Старый 13.02.2011, 17:11   #1
Deymos
RAM 16MB
 
Аватар для Deymos
 
Регистрация: 10.08.2009
Сообщений: 20
Deymos на пути к лучшему
Deymos вне форума

41 Красивые диалоговые окна на jquery


Я очень люблю делать дизайн поистине красивым, таким, который понравился бы мне. Если я пишу скрипт самостоятельно, то я всегда очень придаю этому значение. В этой статье я расскажу вам, как можно сделать красивые диалоговые окна на JQuery.

Подключим следующие библиотеки:
PHP код:
<link type="text/css" href="dev/themes/base/ui.all.css" rel="stylesheet" />
        <
script type="text/javascript" src="dev/jquery-1.3.2.js"></script>
        <
script type="text/javascript" src="dev/ui/ui.core.js"></script>
        <
script type="text/javascript" src="dev/ui/ui.draggable.js"></script>
        <
script type="text/javascript" src="dev/ui/ui.resizable.js"></script>
        <
script type="text/javascript" src="dev/ui/ui.dialog.js"></script>
        <
script type="text/javascript" src="dev/ui/effects.core.js"></script>
        <
script type="text/javascript" src="dev/ui/effects.highlight.js"></script>
        <
script type="text/javascript" src="dev/external/bgiframe/jquery.bgiframe.js"></script

Пример с формой регистрации:

PHP код:
$(function() {
                
                var 
name = $("#name"),
                        
email = $("#email"),
                        
password = $("#password"),
                        
allFields = $([]).add(name).add(email).add(password),
                        
tips = $("#validateTips");

                function 
updateTips(t) {
                        
tips.text(t).effect("highlight",{},1500);
                }

                function 
checkLength(o,n,min,max) {

                        if ( 
o.val().length max || o.val().length min ) {
                                
o.addClass('ui-state-error');
                                
updateTips("Length of " " must be between "+min+" and "+max+".");
                                return 
false;
                        } else {
                                return 
true;
                        }

                }

                function 
checkRegexp(o,regexp,n) {

                        if ( !( 
regexp.testo.val() ) ) ) {
                                
o.addClass('ui-state-error');
                                
updateTips(n);
                                return 
false;
                        } else {
                                return 
true;
                        }

                }
                
                $(
"#formDialog").dialog({
                        
bgiframetrue,
                        
autoOpenfalse,
                        
height300,
                        
modaltrue,
                        
buttons: {
                                
'Создать пользователя': function() {
                                        var 
bValid true;
                                        
allFields.removeClass('ui-state-error');

                                        
bValid bValid && checkLength(name,"username",3,16);
                                        
bValid bValid && checkLength(email,"email",6,80);
                                        
bValid bValid && checkLength(password,"password",5,16);

                                        
bValid bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Имя пользователя может содержать только символы [a-z, 0-9, _] и начинаться с буквы.");
                                        
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                                        
bValid bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Некорректный формат e-mail. Для примера [email protected]");
                                        
bValid bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"В пароле разрешенны только символы [a-z,0-9]");
                                        
                                        if (
bValid) {
                                                $(
'#users tbody').append('<tr>' +
                                                        
'<td>' name.val() + '</td>' 
                                                        
'<td>' email.val() + '</td>' 
                                                        
'<td>' password.val() + '</td>' +
                                                        
'</tr>'); 
                                                $(
this).dialog('close');
                                        }
                                },
                                
'Отмена' : function() {
                                        $(
this).dialog('close');
                                }
                        },
                        
close: function() {
                                
allFields.val('').removeClass('ui-state-error');
                        }
                });
                
                
                $(
'#create-user').click(function() {
                        $(
'#formDialog').dialog('open');
                })
                .
hover(
                        function(){ 
                                $(
this).addClass("ui-state-hover"); 
                        },
                        function(){ 
                                $(
this).removeClass("ui-state-hover"); 
                        }
                ).
mousedown(function(){
                        $(
this).addClass("ui-state-active"); 
                })
                .
mouseup(function(){
                                $(
this).removeClass("ui-state-active");
                });

        }); 
Пример диалога подтверждения:
PHP код:
$(function() {
                $(
"#confirmDialog").dialog({
                        
bgiframetrue,
                        
resizablefalse,
                        
height:140,
                        
modaltrue,
                        
autoOpenfalse,
                        
overlay: {
                                
backgroundColor'#000',
                                
opacity0.5
                        
},
                        
buttons: {
                                
'Удалить все': function() {
                                        $(
this).dialog('close');
                                },
                                
'Отмена': function() {
                                        $(
this).dialog('close');
                                }
                        }
                });
        }); 
Пример информационного сообщения:

PHP код:
$(function() {
                $(
"#messageDialog").dialog({
                        
bgiframetrue,
                        
modaltrue,
                        
autoOpenfalse,
                        
buttons: {
                                
Ok: function() {
                                        $(
this).dialog('close');
                                }
                        }
                });
        }); 
Информация очень полезная для владельцев сайтов, которые тщательно следят за дизайном своих проектов. Так же информация будет интересна многим программистам. Выкладываю исходник: [Ссылки доступны только зарегистрированным пользователям . Зарегистрируйся, чтобы увидеть ссылку.]

(с) [Ссылки доступны только зарегистрированным пользователям . Зарегистрируйся, чтобы увидеть ссылку.]
  Ответить с цитированием
Последний раз редактировалось Deymos; 23.02.2011 в 20:11.
Ответ

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.



взломать аську аську взломать взлом программы сделать взлом программы как сделать взлом программы хакерские сайты как легко взломать аську лучшие хакерские сайты топ список хакерские сайты взлом паролей легкий взлом паролей

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd. Перевод: zCarot