Evsiz html təsdiq. Əməliyyatlar xəbərdar edir, tezləşdirir və təsdiqləyir. Javascript-də istifadəçi qarşılıqlı əlaqəsi. jQuery istifadə edərək təsdiqləmə dialoqunun dəyişdirilməsi
təsdiq () metodu
Təsdiq () metodu alert() metodu ilə yaradılan xəbərdarlıq pəncərəsinə bənzəyən, lakin iki düymədən ibarət olan təsdiqləmə pəncərəsini göstərir: OK və Ləğv et. Siyahı 11.3 təsdiqləmə pəncərəsinin yaradılmasını nümayiş etdirir, lakin bu skript OK və Ləğv düymələri arasında fərq qoymur. Düymələrdən hər hansı birinə basmaqla sadəcə pəncərə bağlanacaq (şək. 11.5).
düyü. 11.5. Təsdiqlə işləmək
Siyahı 11.3. Təsdiqlə işləmək
Təsdiqlə işləmək
təsdiq ("Bu mənim təsdiqimdir");
Bu fəsli oxuduqdan sonra siz OK və Ləğv düymələrini kliklədiyiniz zaman skriptinizin fərqli cavab verməsi üçün bu üsuldan necə istifadə edəcəyinizi öyrənəcəksiniz.
Andrey Vladimiroviç Popovun Windows 2000/XP üçün Windows Script Host kitabındanRun metodu intWindowStyle parametri işə salınacaq proqram üçün pəncərə növünü təyin edir (Cədvəl 1.13).Cədvəl 1.13. Pəncərə növləri (intWindowStyle) Parametr Visual Basic Constant Təsvir 0 vbHide Cari pəncərəni gizlədir və başqa pəncərəni aktivləşdirir (onu göstərir və ona fokus verir) 1 vbNormalFocus Aktivləşdirir və
Fulton Halın Ruby-də Proqramlaşdırma [Dil ideologiyası, nəzəriyyəsi və tətbiqi təcrübəsi] kitabındanSilinmə metodu Əgər güc parametri yanlışdırsa və ya göstərilməyibsə, Sil metodundan istifadə etməklə yalnız oxumaq üçün atributlu kataloqu silmək mümkün olmayacaq. Gücün doğru olması bu cür qovluqların dərhal silinməsinə imkan verəcəkdir
Klimov Alexander P. NET Compact Framework-də PDA və smartfonların proqramlaşdırılması kitabından.Köçürmə metodu Tələb olunan təyinat parametri köçürmənin aparılacağı kataloqu müəyyən edir; kataloq adında joker işarələrə icazə verilmir. Qeyd Move metodu əvəzinə MoveFolder obyekt metodundan istifadə edə bilərsiniz
Linux və UNIX kitabından: qabıq proqramlaşdırması. Tərtibatçı Bələdçisi. Tainsley David tərəfindənKopyalama metodu Tələb olunan təyinat parametri surətin aparılacağı faylı müəyyən edir; fayl adında joker işarələrə icazə verilmir. Üzərinə yazma parametri təyinat adlı mövcud faylın üzərinə yazılmayacağını təyin edən Boole dəyişəndir (overwrite=true).
RuBoard Team tərəfindən PascalABC.NET dilinin təsviri kitabındanSilinmə metodu Əgər güc parametri yalnışdırsa və ya göstərilməyibsə, Sil metodundan istifadə etməklə yalnız oxumaq üçün atributlu faylı silmək mümkün olmayacaq. Gücün doğru olaraq təyin edilməsi belə faylların dərhal silinməsinə imkan verəcək. Qeyd Siz Delete metodu əvəzinə DeleteFile metodundan istifadə edə bilərsiniz.
Müəllifin kitabından8.3.1. Inject metodu Inject metodu Ruby-ə Smalltalk dilindən gəldi (ilk dəfə Ruby 1.8-də çıxdı). İlk dəfə başa düşmək asan olmasa da, onun davranışı maraqlıdır. Əlbəttə ki, ən çox
Müəllifin kitabından8.3.3. Bölmə üsulu Necə deyərlər, “dünyada iki növ insan var: insanları müxtəlif tiplərə ayıranlar və ayırmayanlar”. Bölmə metodu insanlara aid deyil (baxmayaraq ki, biz onları Ruby-də obyektlər kimi təqdim edə bilərik), lakin o, həm də çoxluğu iki hissəyə bölürsə, bölmə çağırarkən blok verilir
Müəllifin kitabından11.1.10. initialize_copy metodu Dup və ya klon metodundan istifadə edərək obyekti kopyalayarkən konstruktor çağırılmır. Bütün dövlət məlumatları kopyalanır. Bəs bu davranışa ehtiyacınız yoxdursa? Nümunəyə baxaq: sinif Document attr_accessor:title, :text attr_reader:timestamp def initialize(title, text) @title, @text = title, text @timestamp =
Müəllifin kitabından11.1.11. Ayırma metodu Nadir hallarda olur, lakin belə olur ki, onun konstruktorunu çağırmadan (insializasiya metodundan yan keçməklə) obyekt yaratmaq lazımdır. Məsələn, ola bilər ki, obyektin vəziyyəti tamamilə onun giriş metodları ilə müəyyən edilir; o zaman yeni metodu çağırmağa ehtiyac yoxdur (bu, işə salma çağıracaq).
Müəllifin kitabından11.3.2. const_get Metod const_get metodu aid olduğu modul və ya sinifdən verilən adla sabitin qiymətini alır.str = "PI"Math.const_get(str) # Dəyər Math::PI-dir bəzən qeyri-münasib hesab edilən qiymətləndirmə metodunu çağırmaqdan çəkinin. Bu yanaşma bir baxımdan daha ucuzdur
Müəllifin kitabından11.3.5. Define_method Metod def açar sözündən başqa, metodu sinfə və ya obyektə əlavə etməyin yeganə normal yolu define_method metodundan istifadə etməkdir və bu, sizə bunu icra zamanı etməyə imkan verir icra vaxtı. Əgər
Müəllifin kitabından11.3.6. const_missing metodu const_missing metodu method_missing metoduna bənzəyir. Naməlum sabitə daxil olmaq istəyərkən, bu üsul çağırılır - əgər müəyyən edilirsə, əlbəttə. Parametr olaraq ona zəngləri kəsmək üçün sabitə istinad edən simvol ötürülür
Müəllifin kitabındanLockbits Metod .NET Compact Framework 2.0 LockBits metodu üçün məhdud dəstək təqdim etdi ki, bu da bir sıra təsvir piksellərinin manipulyasiyası üçün istifadə edilə bilər. Bu metoddakı ImageLockMode siyahıları ReadWrite, ReadOnly və WriteOnly dəyərlərinə imkan verir. Və PixelFormat siyahıları dəstəkləyir
Müəllifin kitabından Müəllifin kitabındanMetod Zip Metodların təsviri Metodlar T funksiyasının ardıcıllığı üçün verilmişdir. Zip(ikinci: TSecond ardıcıllığı; resultSelector: (T,TSSecond)->Res): Res ardıcıllığı; Müəyyən edilmiş funksiyadan istifadə edərək iki ardıcıllığı birləşdirir, hər bir ardıcıllığın bir elementini götürür və
Müəllifin kitabındanMetod ehtiva edir Metodların təsviri Metodlar T. funksiyasının ardıcıllığı üçün verilmişdir Contains(qiymət: T): boolean; Defolt bərabərlik müqayisəçisindən istifadə edərək, göstərilən elementin ardıcıllıqla olub-olmadığını müəyyən edir. funksiya Tərkibində(dəyər: T; müqayisə edən: IEqualityComparer): boolean;
Bu yazıda biz üç maraqlı metodu öyrənəcəyik, alert(), confirm() və prompt() metodları. Onların hamısı istifadəçi ilə qarşılıqlı əlaqə üçün nəzərdə tutulmuşdur.
Bu üç metodun hamısı pəncərə obyektinə (Browser Window) aiddir. Və onları belə adlandırmaq olar: window.method_name(); Lakin JavaScript bizə bu pəncərə obyektini təyin etməyə deyil, sadəcə metodun adını yazmağa imkan verir.
Biz alert() metodu ilə başlayacağıq. Bu üsul istifadəçinin brauzer pəncərəsində göstərilən mesajı göstərir. Bu pəncərə bütün səhifənin yuxarı hissəsində görünəcək və istifadəçi OK düyməsini klikləməyənə qədər bağlanmayacaq.
Nümayiş etmək üçün alert() metodundan istifadə edərək mesajı göstərək.
Var today_is = "Bazar ertəsi"; alert("Bu gün " + bu gün_dir);
Metodun içərisində biz html teqləri olmadan istənilən sətri təyin edə bilərik. Onlar burada işlənmir, lakin olduğu kimi göstərilir.
Göstərmək istədiyimiz sətir çox uzundursa və biz yeni sətir yaratmaq istəyiriksə, burada html teqi var
işləməyəcək. Burada "\n" simvolundan istifadə etməlisiniz.
Alert("Çoooooooooooox \nStringgggggg");
Bu üsul tez-tez kodda səhvləri tapmaq üçün istifadə olunur.
Kodun işlənməsi prosesi yuxarıdan aşağıya doğru gedir, ona görə də xətanı tutmaq üçün sadəcə olaraq xətanın yerləşdiyi gözlənilən sahəyə alert() metodunu yazırıq. Və əgər alert() işlədisə, o zaman onun yazıldığı sətirə qədər heç bir xəta yoxdur.
Sonra, onu bir və ya daha çox aşağıya köçürməlisiniz. Dəyişiklikləri saxlayırıq, brauzerdə səhifəni yenidən təzələyirik və alert() funksiyasının işlədiyini görürük, onda onun yerləşdiyi sətirə qədər heç bir səhv yoxdur, əks halda, işləməyibsə, xəta ekranda yerləşir. hazırda yerləşdiyi xəttdən yuxarı xətt. Kodda səhvi belə tapa bilərsiniz.
təsdiq () metoduBu üsul sualın cavabını təsdiqləmək üçün istifadə olunur. Yalnız iki cavab variantı var, bəli (OK) və ya yox (Ləğv et). Əgər istifadəçi “bəli” cavabını verirsə, o zaman metod doğru, əks halda isə yalan qaytarır.
Məsələn, biz confirm() metodundan istifadə edərək pəncərəni göstərəcəyik, burada istifadəçidən “Səhifəni tərk etmək istədiyinizə əminsinizmi?” sualını verəcəyik. Əgər istifadəçi “bəli” cavabını verərsə, alert() metodu vasitəsilə “İstifadəçi səhifəni tərk etmək istəyir”, əks halda “İstifadəçi səhifəni tərk etmək istəmir” mesajını göstərəcəyik.
Var user_answer = confirm("Səhifəni tərk etmək istədiyinizə əminsinizmi?"); if(user_answer) alert("İstifadəçi səhifəni tərk etmək istəyir"); else alert("İstifadəçi \nsəhifəni tərk etmək İSTƏMİR");
confirm() metodu belə işləyir. Müxtəlif hallarda istifadə edilə bilər. Məsələn, saytdan nəyisə silməzdən əvvəl istifadəçidən öz hərəkətlərinə arxayın olub-olmadığını soruşmaq adətdir. Və ya formanı göndərməzdən əvvəl istifadəçidən “Hər şeyi düzgün doldurdunuzmu?” sualını verə bilərsiniz.
prompt() metoduÖyrənəcəyimiz son üsul prompt() metodudur. Bu üsul digər iki üsuldan daha az istifadə olunur. O, istifadəçidən mətn sahəsinə daxil edəcəyi bəzi məlumatları almağa imkan verir.
Nəticə olaraq, prompt() metodu istifadəçi OK düyməsini kliklədikdə daxil edilmiş sətri qaytarır və ya istifadəçi ləğv düyməsini sıxdıqda null qaytarır.
Parametr olaraq, yəni bu metodun mötərizəsinin içərisində biz göstərici sətir və ya sual yaza bilərik ki, istifadəçi hansı məlumatı daxil etmək lazım olduğunu bilsin.
Məsələn, istifadəçidən “Adın nədir?” sualına cavab verməsini xahiş edək. İstifadəçinin daxil etdiyi ad alert() metodundan istifadə etməklə ekranda görünəcək.
Var name = prompt("Adın nədir?"); alert("Adınız "+addır);
Saxlayın və brauzerdə səhifəni açın.
Təbii ki, siz prompt() metodundan mətn sahəsinə istənilən məlumatı daxil edə bilərsiniz. Bu məlumat hətta rəqəmlər və ya digər xüsusi simvollar olsa belə, sətir kimi qaytarılacaq.
Məsələn, istifadəçidən iki ədədi daxil etməyi və sonra onları çoxaltmağı xahiş edək. Rəqəmləri vurmaq üçün bir növ kalkulyator olacaq.
Var x = prompt("Birinci nömrəni daxil edin:"); var y = prompt("İkinci nömrəni daxil edin:"); //Daxil edilmiş ədədləri sətir tipindən rəqəmli tipə çevirin x = Number(x); y = Nömrə (y); sənəd.write(x + " * " + y + " = " + (x * y));
Daxil edilmiş ədədlər sətirdir, ona görə də vurmanın düzgün nəticəsi üçün bu ədədlər onları sətir tipindən normal ədədlərə çevirən Number() funksiyasından keçməlidir.
Yaxşı, hamısı budur. İndi siz daha üç üsul bilirsiniz: alert(), confirm() və prompt(). Hansı ki, praktikada təhlükəsiz istifadə edə bilərsiniz.
Defolt brauzer parametrlərini necə gözəlləşdirmək və idarə etmək barədə dərslərimizi davam etdirərək, bu gün sizi istifadəsi asan jQuery plaginindən istifadə edərək brauzerlər arası təsdiqləmə dialoqunu hazırlamağa dəvət edirik. Klikdən sonra yerinə yetiriləcək mətni, düymələri və hərəkətləri seçə bilərsiniz.
HTML kodu
Əvvəlcə təsdiqləmə pəncərəsinə diqqət yetirməli olsaq da, əvvəlcə sizə istifadə edəcəyimiz səhifə haqqında bir az məlumat verək. Əgər plaqinin mənbə kodunu görmək istəyirsinizsə, bu addımı atlayıb məqalənin jQuery hissəsinə keçə bilərsiniz.
Index.php
Bir jQuery Confirm Dialoq CSS3 ilə dəyişdirilməsi | Tutorialzine Demo
Sənədin yuxarı hissəsində biz Cuprum şriftini , jQuery.confirm.css (dialoq qutusu üçün kaskad üslub vərəqləri) və styles.css - səhifəmizin ardıcıl stil cədvəllərini daxil etdik.
Sənədin ən aşağı hissəsində jQuery kitabxanasını, jquery.confirm.js (əsas plagin faylı), həmçinin düyməni basma hadisəsini dinləyən və plaqini işlədən script.js faylını daxil etdik. Bugünkü dərsimizin son mərhələsində sizə bu iki fayl haqqında məlumat verəcəyik.
Veb saytınıza təsdiqləmə pəncərəsini daxil etmək üçün siz endirilmiş arxivdən jquery.confirm qovluğunu kopyalamalı və kodun başına jquery.confirm.css faylını, həmçinin jquery.confirm.js faylını daxil etməlisiniz. sənədin əsas hissəsini bitirən etiket + jQuery kitabxanası.
Dialoqun özü HTML kodunun bir neçə sətirindən başqa bir şey deyil. Aşağıda dialoq qutusunu göstərmək üçün plagin tərəfindən daxil edilmiş kodu görə bilərsiniz.
Misal Dialoq Qutusu Kodu
Kod sənədin mətninə əlavə olunur. confirmOverlay səhifənin qalan hissəsinin yuxarı hissəsində göstərilir ki, bu da dialoq qutusu göstərilərkən səhifə elementləri ilə hər hansı qarşılıqlı əlaqənin qarşısını alır. h1, p və div confirmDüymələri plagin parametrlərində göstərilən struktura uyğun olaraq yerləşdirilir. Daha sonra məqalədə bu barədə daha çox məlumat əldə edəcəksiniz.
CSS kodu
Dialoq qutusunun dizaynı jquery.confirm.css faylında var. Bu, bitmiş layihəyə inteqrasiyanı xeyli asanlaşdırır və üslubun tərtibatı elə aparılır ki, üslubların artıq səhifədə olanlarla qarışmayacağına əmin ola bilərsiniz.
jquery.confirm.css
#confirmOverlay(
eni: 100%;
hündürlüyü: 100%;
mövqe: sabit;
yuxarı: 0;
sol: 0;
fon:url("yəni.png");
fon: -moz-xətti-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) təkrar-x rgba(11,11,11,0.2);
fon:-webkit-gradient(xətti, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) təkrar-x rgba(11,11,11,0.2);
z indeksi: 100000;
}
#confirmBox(
fon:url("body_bg.jpg") təkrar-x sol alt #e5e5e5;
eni: 460px;
mövqe: sabit;
sol: 50%;
yuxarı: 50%;
haşiyə:-130px 0 0 -230px;
haşiyə: 1px bərk rgba(33, 33, 33, 0.6);
Moz-box-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) daxil;
-webkit-box-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) daxil;
qutu-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) daxil;
}
#confirmBox h1,
#confirmBox p(
şrift:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
fon:url("header_bg.jpg") təkrar-x sol alt #f5f5f5;
doldurma: 18px 25px;
mətn kölgəsi: 1px 1px 0 rgba(255, 255, 255, 0.6);
rəng:#666;
}
#confirmBox h1(
hərf aralığı: 0.3px;
rəng:#888;
}
#confirmBox p(
fon: heç biri;
font ölçüsü: 16px;
xəttin hündürlüyü: 1.4;
üst doldurma: 35px;
}
#təsdiq düymələri(
doldurma:15px 0 25px;
mətnin düzülməsi:mərkəz;
}
#confirmBox .düyməsi(
ekran:inline-blok;
rəng: ağ;
mövqe: qohum;
hündürlük: 33px;
Şrift:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
Kənar-sağ: 15px;
doldurma: 0 35px 0 40px;
mətn dekorasiyası:yoxdur;
sərhəd: heç biri;
}
#confirmBox .button:son-child( kənar-sağ:0;)
#confirmBox .düymə aralığı(
mövqe: mütləq;
yuxarı: 0;
sağ: -5px;
fon:url("buttons.png") təkrar yoxdur;
eni: 5px;
hündürlük: 33px
}
#confirmBox .blue( fon-mövqe:sol yuxarı;mətn-kölgə:1px 1px 0 #5889a2;)
#confirmBox .mavi aralıq (fon mövqeyi:-195px 0;)
#confirmBox .blue:hover( fon-mövqe:sol alt;)
#confirmBox .blue:hover span (fon mövqeyi:-195px alt;)
#confirmBox .gray( fon mövqeyi:-200px yuxarı; mətn-kölgə:1px 1px 0 #707070;)
#confirmBox .boz aralıq (fon mövqeyi:-395px 0;)
#confirmBox .gray:hover( fon mövqeyi:-200px alt;)
#confirmBox .gray:hover span( fon mövqeyi:-395px alt;)
Bu, yeni CSS3-dən istifadə edir. #confirmOverlay tərifində biz CSS3 dərəcələrindən istifadə edirik (yalnız Firefox, Safari və Chrome-da işləyir) şəffaf PNG şəklində təmin edilmiş ehtiyatla.
Sonra, mərkəzləşdirilmiş #confirmBox displeyinə daxili qutu kölgəsi əlavə etdik (Photoshop-da daxili parıltıya bənzər bir şey). Google-un şrift kataloqundan əlavə edilmiş Cuprum şriftindən də istifadə etdik.
Mətn kölgələri ilə yanaşı, düymələrin üslubunu görə bilərsiniz. Onlar sürüşmə qapılardan istifadə etməklə həyata keçirilir. Hazırda iki növ dizayn mövcuddur - mavi və boz. Koda yeni bəyannamələr əlavə etməklə yeni düymə rəngi əlavə edə bilərsiniz.
jQuery
Pluginin mənbə koduna keçməzdən əvvəl gəlin bir az daha ətraflı baxaq. script.js-də siz plaqinin işlədiyini görə bilərsiniz.
Script.js
$(sənəd).ready(funksiya())(
$(".element .sil").klik(funksiya())(
Var elem = $(bu).yaxın(".element");
$.təsdiq et((
"title" : "Təsdiqi silin",
"message" : "Siz bu elementi silmək üzrəsiniz.
Sonradan bərpa edilə bilməz! Davam etsin?"
"düymələr" :(
"Bəli" :(
"sinif": "mavi",
"fəaliyyət": funksiya())(
elem.slideUp();
}
},
"Yox" :(
"sinif": "boz",
"fəaliyyət": function()() // Bu halda heç nə etmək olmaz. Siz həmçinin fəaliyyət xüsusiyyətini buraxa bilərsiniz.
}
}
});
Nümunəmizdə div .deleted kliklədikdə, skript plaginlə müəyyən edilmiş $.confirm funksiyasını yerinə yetirir. Aşağıda dialoq qutusunun başlığı, təsviri və düymələri olan obyekt verilmişdir. Hər düymənin bir CSS sinif adı, həmçinin fəaliyyət parametri var. Fəaliyyət düyməyə basıldığında işləyən funksiyadır.
İndi keçək maraqlı hissəyə. jquery.confirm.js-də dialoqumuzun mənbə koduna baxa bilərsiniz.
jquery.confirm.js
$.confirm = funksiya(params)(
If($("#confirmOverlay").length)(
// Təsdiq artıq səhifədə göstərilib:
yalanı qaytarmaq;
}
Var buttonHTML = "";
// Düymələr üçün işarələmənin yaradılması:
If(!obj.action)(
obyekt.action = funksiya())(;
}
});
Var işarələmə = [
"
"
",params.message,"
","
",
düyməsiniHTML,
"
].qoşulmaq("");
$(markup).hide().appendTo("bədən").fadeIn();
Var düymələri = $("#confirmBox .button"),
i = 0;
$.hər (params.buttons,funksiya(ad,obj)(
buttons.eq(i++).klik(funksiya())(
// hərəkət atributunun çağırılması a
// klik baş verir və təsdiq gizlənir.
Obj.action();
$.confirm.hide();
yalanı qaytarmaq;
});
});
}
$.confirm.hide = funksiya())(
$("#confirmOverlay").fadeOut(funksiya())(
$(bu).Remove();
});
}
Pluginimiz $.confirm() metodunu müəyyən edir. Bu üsul daxil etdiyiniz məlumatları emal edir, işarələmə qurur və sonra hamısını səhifəyə əlavə edir. #confirmOverlay div CSS bəyannaməsi vasitəsilə sabit mövqeyə malik olduğundan, biz onu brauzerə mərkəzləşdirmə prosesini tərk edəcəyik və istifadəçi səhifəni sürüşdürdükcə onu köçürəcəyik.
İşarələməni əlavə etdikdən sonra skript basılan düyməyə uyğun hərəkəti yerinə yetirərək düyməni basma hadisələri üçün hadisə rıçaqlarını paylayır.
Bununla bizim dialoq qutumuz yekunlaşır!
Gəlin ümumiləşdirək
Siz jquery.confirm.css faylından istifadə edərək dialoq qutusunun görünüşünü redaktə edə bilərsiniz. Dialoq qutusundakı mesaj atributu HTML kodundan istifadə etdiyi üçün siz ora şəkillər və ya nişanlar əlavə edə bilərsiniz.
Siz hətta xəta mesajı qutularını həyata keçirmək üçün plaqindən istifadə edə bilərsiniz - sadəcə olaraq fəaliyyət atribut dəsti olmadan tək düymə əlavə etməlisiniz.
Diqqət! Sizin gizli mətnə baxmaq icazəniz yoxdur.
Yenə də sizi JavaScript dilinə həsr olunmuş başqa bir mövzuya salamlayıram, burada xəbərdarlıq, operativ, təsdiqləmə üsullarını təhlil edəcəyik. Bu üsullar Javascript dilində qurulub və istifadəçi ilə əlaqə saxlamağa kömək edir.
Xəbərdarlıq brauzer ekranında müəyyən məlumatları olan bir pəncərə göstərir, istifadəçi OK düyməsini klikləyənə qədər skripti dayandırır.
Sorğu adətən istifadəçiyə OK düyməsini basmazdan əvvəl konkret mətn sahəsində cavab verməli olduqları sualı verən pəncərəni göstərir. İstifadəçi Ləğv düyməsini basmaqla heç nə daxil edə bilməz.
Təsdiq et, həmçinin istifadəçinin mətn sahəsinə artıq heç nə daxil edə bilməyəcəyi, ancaq OK düyməsini sıxa və ya ləğv edə biləcəyi pəncərəni göstərir.
İndi isə qısa bir girişdən sonra yuxarıdakıların hamısını praktikada nəzərdən keçirməyə keçək.
xəbərdar etmək, xəbərdar etmək, təsdiqləmək
alert("Salam, əziz istifadəçi!");
var nameUser = prompt("Adınız?" , "ad" );
var userAnswer = confirm("Saytdan çıxmaq istədiyinizə əminsinizmi?" );
Nəticədə, biz brauzer səhifəsini yenilədikdə istifadəçini qarşılayan bir pəncərə görəcəyik. OK düyməsini basdıqdan sonra adınızı soruşan aşağıdakı pəncərə görünəcək. Bu metodun iki parametri var, birincisi tələb olunur və göstəriləcək başlığa cavabdehdir, bizim vəziyyətimizdə bu istifadəçi adı sualıdır. İkinci parametr isə mətn sahəsində standart olaraq göstəriləcək dəyərdən məsuldur. Adınızı daxil edib OK düyməsini sıxsanız, adınız nameUser dəyişəninə yerləşdiriləcək. Ləğv et düyməsini sıxsanız, dəyişənə null yazılacaq.
Və nəhayət, istifadəçidən saytımızı tərk etmək istəyib-istəmədiyini soruşan pəncərə. Razılıq olduqda, Boolean true dəyəri dəyişəndə yerləşdiriləcək, imtina edildiyi təqdirdə isə müvafiq olaraq false. Bu üsullar haqqında bilmək lazım olan hər şey budur, növbəti dərslərdə görüşənədək!
Standart brauzer alətlərinə alternativ olaraq, bu dərslikdə istifadəsi asan jQuery plagini şəklində təsdiqləmə dialoqunu təmin etmək üçün çarpaz brauzer həllini hazırlayacağıq. Düymələrə basıldığında yerinə yetiriləcək mətni, düymələri və hərəkətləri dəyişmək mümkün olacaq.
Səylərin çoxu təsdiqləmə dialoquna yönəldilsə də, əvvəlcə demo üçün istifadə olunacaq səhifə haqqında bir neçə söz deyək. Plugin kodunu görmək istəyənlər dərhal jQuery bölməsinə keçə bilərlər.
index.phpjQuery | istifadə edərək təsdiqləmə dialoqunun dəyişdirilməsi Sayt veb saytı üçün demo " target="_blank"> " alt="" width="250" /> jQuery istifadə edərək təsdiqləmə dialoqunun dəyişdirilməsi
Səhifəmizin başlıq hissəsində şrift daxil edilmişdir Cuprum Google Fontdan, təsdiq dialoqu üçün üslubları ehtiva edən jquery_confirm.css və demo səhifəsi üçün üslubları ehtiva edən styles.css.
jQuery kitabxanası səhifənin əsas hissəsinin aşağı hissəsinə daxil edilmişdir , əsas plagin kodunu ehtiva edən jquery_confirm.js və hadisə idarəedicisi üçün kodu ehtiva edən script.js basın, plaqini işə salmaq üçün demo səhifəsində istifadə olunur.
Saytınızdakı təsdiqləmə dialoqundan istifadə etmək üçün mənbə arxivindən jquery_confirm qovluğunu kopyalamalı və səhifənin başlığı bölməsinə jquery_confirm.css daxil etməli və bağlanma teqindən əvvəl jquery_confirm.js yapışdırmalısınız. bədən, həmçinin jQuery kitabxanası.
Təsdiq dialoqunun özü bir neçə sətir HTML kodundan başqa bir şey deyil. Dialoq qutusunu göstərmək üçün plagini yaradan kod aşağıda verilmişdir.
Dialoq kodu nümunəsiPəncərə başlığı
Prosesin təsviri
Həqiqətən yoxBu kod sənədə əlavə olunur. Element örtüyü təsdiqləyin təsdiqləmə dialoqu (modal pəncərə) açıq olduqda onunla hər hansı qarşılıqlı əlaqənin qarşısını almaq üçün səhifə məzmununun qalan hissəsinin yuxarısında göstərilir. Elementlər h1, səh Və təsdiq düymələri plaginə ötürülən arqumentlərə uyğun olaraq doldurulur. Əlavə izahatlar aşağıda dərsin mətnində verilmişdir.
Təsdiq dialoqu üçün üslublar fayldadır jquery_confirm.css. Beləliklə, plagin mövcud layihəyə qoşulmaq asan olacaq və o, səhifələrinizin üslubları ilə mümkün kəsişmələri aradan qaldıracaq şəkildə qurulmuşdur.
jquery_confirm.css#confirmOverlay( en:100%; hündürlük:100%; mövqe:sabit; yuxarı:0; sol:0; fon:url("ie.png"); fon: -moz-linear-gradient(rgba(11,11) ,11,0.1), rgba(11,11,11,0.6)) təkrar-x rgba(11,11,11,0.2 fon:-webkit-gradient(xətti, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) təkrar-x rgba(11,11,11,0.2): 100000; background:url("body_bg.jpg") təkrar-x sol alt; width:460px;sabit:50%; (33, 33, 33, 0.6); -moz-box-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) inset; -webkit-box-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) qutu-kölgə: 0 0 2px rgba(255, 255, 255, 0.6) inset; #confirmBox h1, #confirmBox p( font:26px/1 "Cuprum","Lucida Sans Unicode" Lucida Grande", sans-serif; background:url("header_bg.jpg") təkrar-x sol alt #f5f5f5; mətn kölgəsi: 1px 1px 0 rgba(255, 255, 0.6); ) #confirmBox h1( hərf aralığı:0,3px; rəng:#888; ) #confirmBox p( background:none; font-size:16px; line-height:1.4; padding-top: 35px; ) #confirmButtons( padding:15px 0 25px; text-align:center; ) #confirmBox .button( displey :inline-block; background:url("buttons.png") no-repeat: relative; : 15px; text-decoration:none; border:none; :url("buttons.png") repeat yoxdur; eni:5px hündürlük:33px ) #confirmBox .blue( background-position:left top; text- shadow:1px 1px 0 #5889a2;) #confirmBox .blue span( background-position:-195px 0;) #confirmBox .blue:hover( background-position:sol alt;) #confirmBox .blue:hover span( background-position:-195px below;) #confirmBox .gray( background-position: -200px top;mətn-kölgə:1px 1px 0 #707070;) #confirmBox .gray span( background-position:-395px 0;) #confirmBox .gray: hover( background-position:-200px below;) #confirmBox .gray :hover span (fon mövqeyi: -395px alt;)
Bir neçə CSS3 qaydaları istifadə olunur. #confirmOverlay tərifində biz CSS3 gradientlərini təyin edirik (bunlar yalnız Firefox, Safari və Chrome brauzerlərində mövcud olacaq).
Ekranın mərkəzində yerləşən #confirmBox-a təsir edici görünən daxili kölgələr əlavə edilib (Photoshop-da daxili parıltıya bənzəyir). Həmçinin istifadə olunan şrift Cuprum, Google Font-a daxil olan.
Düymələr CSS spritlərindən istifadə edir. İki dizayn variantı mövcuddur - boz və mavi. Siz həmçinin düymələr üçün öz üslubunuzu əlavə edə bilərsiniz.
jQueryPlugin koduna baxmadan əvvəl ondan necə istifadə olunacağına nəzər salaq. Plugin scripts.js faylında çağırılır.
script.js$(sənəd).ready(funksiya())( $(".element .sil").click(funksiya())( var element = $(bu).closest(".item"); $.confirm(( "title " : "Silinmənin təsdiqi", "mesaj" : "Siz elementi silmək qərarına gəldiniz.
Silindikdən sonra onu bərpa etmək mümkün deyil! Davam edək?", "düymələr" : ( "Bəli" : ( "sinif" : "mavi", "fəaliyyət": function() ( elem.slideUp(); ) ), "Xeyr" : ( "class" : "gray ", "action": function()() // Bu halda, biz heç nəyi buraxmaq olmaz ) ) ));
Element üzərində olduqda div.delete sıxılır, skript funksiyanı yerinə yetirir $.təsdiq edin, plagin tərəfindən müəyyən edilir. O, dialoq başlığını, təsviri və düymə obyektini plaginə ötürür. Hər bir düymə bir CSS sinif adı və bir xüsusiyyət əldə edir hərəkət. Bu xassə düyməni basdıqda yerinə yetirilən funksiyanı təyin edir.
İndi dərsimizin ən maraqlı hissəsinə keçə bilərik. jquery_confirm.js faylında standart təsdiqləmə dialoquna alternativ plagin kodu var.
jquery_confirm.js(function($)( $.confirm = function(params)( if($("#confirmOverlay").length)( // Təsdiqləmə dialoqu artıq səhifədə göstərilir: return false; ) var buttonHTML = ""; $.each (params.buttons,function(name,obj)( // Düymə işarələməsini yaradın: buttonHTML += ""+name+""; if(!obj.action)( obj.action = function())(); ) )); var işarələmə = [ "", "", "",params.title,"", "
",params.message,"
", "", buttonHTML, "" ].join(""); $(markup).hide().appendTo("body").fadeIn(); var buttons = $("#confirmBox .button"), i = 0; $.each(params.buttons,function(name,obj)( buttons.eq(i++).click(function())( // Düymə kliklədikdə, fəaliyyət funksiyasını çağırın // və bağlayın. təsdiqləmə dialoqu obj .action(); $.confirm.hide = function())( $("#confirmOverlay").fadeOut(function()); ).remove() ) )(); jQuery);Pluginimiz $.confirm() metodunu müəyyən edir. Metod ötürülən arqumentləri oxuyur, işarələmə qurur və onu səhifəyə əlavə edir. Çünki div#confirmOverlay sabit yerləşdirməyə malikdir, yəni o, ekranın mərkəzində yerləşdirilir və istifadəçi səhifəni sürüşdürsə belə, öz mövqeyində qalır.
İşarələməni əlavə etdikdən sonra skript dialoq düymələri üçün müvafiq hərəkətləri yerinə yetirən hadisə işləyicilərini quraşdırır.
Hazır!
NəticəFaylı dəyişdirərək dialoq üslubunu dəyişə bilərsiniz jquery_confirm.css. Dialoq mesajı atributu HTML mətnini qəbul etdiyi üçün siz dialoq qutusunda göstərmək üçün onlara şəkillər və nişanlar əlavə edə bilərsiniz.
Siz həmçinin xəbərdarlıqları göstərmək üçün plaqindən istifadə edə bilərsiniz - fəaliyyət atributu olmadan yalnız bir düyməni keçmək lazımdır.
