Plik java script:
$(document).ready(function(){
$("body").on("keyup", function() {
var WzorName = /^[a-z]{3,30}$/i;
var name = $("#name").val();
if (WzorName.test(name))
{
$("#name").attr('title','OK');
$("#name").css('background-image', 'url(images/okicon.png)');
$("#name").css('background-repeat', 'no-repeat');
$("#name").css('background-position', 'right');
$("#name").css('border', '1px solid #d9d9d9');
$("#name").css('border-top', '1px solid #c0c0c0');
} else if($("#name").val() === ""){
$("#name").attr('title','Nie wpisałeś imienia!');
$("#name").css('background-image', 'url(images/okicon.png)');
$("#name").css('background-repeat', 'no-repeat');
$("#name").css('background-position', 'right');
$("#name").css('border', '1px solid red');
}else {
$("#name").attr('title','Wpisałeś niepoprawny znak w pole imię. Dopuszczalne są tylko duże i małe litery polskiego alfabetu np: Żaneta.');
$("#name").css('background-image', 'url(images/okicon.png)');
$("#name").css('background-repeat', 'no-repeat');
$("#name").css('background-position', 'right');
$("#name").css('border', '1px solid red');
}
var titleText = $('#name').attr('title');
$('.tooltip').text(titleText).hide().fadeIn('slow');
});
});
$(document).ready(function(){
$('#RegDialogRegister').click(function() {
openDialog('#RegDialog');
});
$('#RegDialog')
.find('.cancel')
.live('click', function() {
closeDialog(this);
})
.end()
.find('.cancel')
.live('click', function() {
// Clicked disagree!
console.log('clicked disagree!');
});
});
function openDialog(selector) {
$(selector)
.clone()
.show()
.appendTo('#RegDialogOverlay')
.parent()
.fadeIn('fast');
}
function closeDialog( selector ) {
$(selector)
.parents('#RegDialogOverlay')
.fadeOut('fast', function() {
$(this)
.find('.dialog')
.remove();
});
}
$(document).ready(function(){
$("body").on({
mouseenter: function (e) {
var titleText = $(this).attr('title');
$(this).data('tipText', titleText).removeAttr('title');
$('
<p class="tooltip" style="z-index: 9999;"></p>').fadeIn('slow').text(titleText)
.appendTo('body')
.css('top', (e.pageY - 10) + 'px')
.css('left', (e.pageX + 20) + 'px');
},
mouseleave: function () {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
mousemove: function (e) {
$('.tooltip')
.css('top', (e.pageY - 10) + 'px')
.css('left', (e.pageX + 20) + 'px');
}
}, '.RegDialogTitle');
});
Dodana linijka
26 i
27.
Oczywiście z animacją się tam jeszcze możesz pobawić, wedle uznania.
Pozdrawiam!