დაარღვიე დაადასტურე html. გაფრთხილება, მოთხოვნა, დადასტურების მეთოდები JavaScript-ში

ამ გაკვეთილზე ჩვენ გავეცნობით ფანჯრის ობიექტის alert(), prompt() და confirm() მეთოდებს.

alert() მეთოდი

alert() მეთოდი შექმნილია გამაფრთხილებელი დიალოგური ფანჯრის გამოსაჩენად მითითებულ შეტყობინებასთან და ღილაკზე "OK" მომხმარებლის ეკრანზე. ის შეიძლება გამოყენებულ იქნას მომხმარებლისთვის მნიშვნელოვანი ინფორმაციის გადასაცემად.

window.alert(Parameter_1);

alert() მეთოდს აქვს ერთი საჭირო პარამეტრი - ეს არის შეტყობინების ტექსტი, რომელიც ნაჩვენებია დიალოგურ ფანჯარაში. ეს მეთოდი არ აბრუნებს არაფერს მისი შესრულების შედეგად.

მაგალითად, მოდით გამოვაჩინოთ გამაფრთხილებელი დიალოგური ფანჯარა საიტის ვიზიტორებისთვის, როდესაც ისინი დააწკაპუნებენ ბმულზე: გადადით საიტზე

confirm() მეთოდი ფანჯრის ობიექტის confirm() მეთოდი შექმნილია მომხმარებლის ეკრანზე დიალოგური ფანჯრის გამოსახატავად მითითებული გზავნილით და OK და Cancel ღილაკებით. დადასტურების ფანჯრის გამოყენება შესაძლებელია მომხმარებლისგან კონკრეტული მოქმედების შესრულების ნებართვის მოსათხოვად.

var resultConfirm = დადასტურება(პარამეტრი_1);

ამ მეთოდს აქვს ერთი პარამეტრი - ეს არის შეტყობინების ტექსტი, რომელიც გამოჩნდება დიალოგურ ფანჯარაში.

confirm() მეთოდი აბრუნებს ორიდან ერთ მნიშვნელობას მისი შესრულების შედეგად:

• მართალია, თუ მომხმარებელმა დააწკაპუნა "OK";
• false თუ მომხმარებელმა დააწკაპუნა გაუქმებაზე ან დახურა.

მაგალითად, მოდით გამოვაჩინოთ p ელემენტში id="resultConfirm"-ით მომხმარებლის მიერ დიალოგურ ფანჯარაში ღილაკზე "OK" დაწკაპუნების შედეგი:

var resultActionUser = დადასტურება ("მომხმარებელი, გთხოვთ დააჭიროთ OK ღილაკს."); if (resultActionUser) (document.getElementById("resultConfirm").innerHTML = "მომხმარებელი, გმადლობთ, რომ დააწკაპუნეთ OK ღილაკზე"; ) else (document.getElementById("resultConfirm").innerHTML = "მომხმარებელი, ჩვენ იმედგაცრუებული ვართ თქვენი პასუხი ";)

prompt() მეთოდი

prompt() მეთოდი შექმნილია მომხმარებლის ეკრანზე დიალოგური ფანჯრის გამოსაჩენად შეტყობინებით, ტექსტური ველით მონაცემების შესაყვანად და ღილაკებით "OK" და "Cancel". ის შექმნილია იმისთვის, რომ მომხმარებლისთვის მონაცემები მოითხოვოს.

var resultPrompt = prompt(Parameter_1, Parameter_2);

ამ მეთოდს აქვს ორი პარამეტრი:

• შეტყობინება, რომელიც გამოჩნდება დიალოგურ ფანჯარაში. ეს პარამეტრი აუცილებელია და შეიცავს შეტყობინებას, რომელიც „ეუბნება“, რა მონაცემები უნდა შეიყვანოს მომხმარებელმა ტექსტურ ველში;
• მეორე პარამეტრი არჩევითია და შეიძლება გამოყენებულ იქნას საწყისი მნიშვნელობის დასაზუსტებლად, რომელიც დაიბეჭდება დიალოგური ფანჯრის შეყვანის ველში გახსნისას.

მომხმარებლის ქმედებებიდან გამომდინარე, prompt() მეთოდმა შეიძლება დააბრუნოს შემდეგი მონაცემები:

• ტექსტის მნიშვნელობა - თუ შეყვანის ველი შეიცავს მონაცემებს და მომხმარებელმა დააწკაპუნა "OK";
• ცარიელი ხაზი - თუ შეყვანის ველი არ შეიცავს მონაცემებს და მომხმარებელმა დააწკაპუნა "OK";
• null - თუ მომხმარებელმა დააწკაპუნა "გაუქმება" ან დახურა ეს ფანჯარა, არ აქვს მნიშვნელობა რა მონაცემები იყო შეყვანილი ტექსტის ველში.

შენიშვნა: დიალოგური ფანჯარა, რომელიც ჩნდება alert() , confirm() ან prompt() ერთ-ერთი მეთოდის შესრულების შედეგად არის მოდალური, ე.ი. ის ბლოკავს მომხმარებლის წვდომას მშობელ აპლიკაციაზე (ბრაუზერზე), სანამ მომხმარებელი არ დახურავს დიალოგურ ფანჯარას.

მაგალითად, ვთხოვოთ მომხმარებლის სახელი და, შედეგიდან გამომდინარე, გამოვაჩინოთ ტექსტი ელემენტში id="nameUser" :

var nameUser = მოთხოვნა ("შეიყვანეთ თქვენი სახელი?"); if (nameUser) ( document.getElementById("nameUser").innerHTML = nameUser +", კეთილი იყოს თქვენი მობრძანება საიტზე!"; ) else (document.getElementById("nameUser").innerHTML = "სტუმარი, კეთილი იყოს თქვენი მობრძანება საიტზე!" ;)

მაგალითად, ვთხოვოთ მომხმარებელს გამოიცნოს ნომერი 8:

ფუნქცია guessNumber() ( var findNumber = მოთხოვნა ("გამოიცანი რიცხვი 1-დან 10-მდე?"); შეცვლა (findNumber) (შემთხვევა "6": alert ("უკვე უფრო თბილია!"); შესვენება; შემთხვევა "7": გაფრთხილება (" ცხელა!"); შესვენება; შემთხვევა "8": alert ("სწორად გამოიცანით! ეს არის ნომერი 8."); შესვენება; შემთხვევა "9": alert ("უკვე უფრო თბილია!"); შესვენება; ნაგულისხმევი : alert("ცივა!"); შესვენება; ) ) ... გამოიცანით ნომერი

მე ვისაუბრე "თარგების" მოდალურ ფანჯრებზე. იმათ. ისინი, რისთვისაც იქმნება ცალკე შაბლონის ფაილები. და ამ ფანჯრების სირთულე და დახვეწილობა შეიძლება უსაზღვრო იყოს.

მაგრამ ხშირად, მომხმარებელთან კომუნიკაციისთვის, გჭირდებათ ძალიან მარტივი დიალოგური ფანჯრები - უბრალოდ აჩვენეთ რამდენიმე შეტყობინება ერთი "Ok" ღილაკით, რომელიც მან ვერ შეამჩნია, ან სთხოვეთ მას რაიმე მოქმედების დადასტურება.

ვებსაიტები ხშირად იყენებენ სისტემის ფუნქციებს ასეთი მიზნებისთვის.
ძრავში არის ეგრეთ წოდებული "სისტემის" ფუნქციების რამდენიმე ჯგუფი. ამ ფუნქციების შემცველი ფაილები იტვირთება ძრავის დასაწყისშივე, კონფიგურაციის ფაილების ჩატვირთვამდეც და თავად ფუნქციები არ არის მიბმული რომელიმე მოდულთან და მათი გამოყენება შესაძლებელია სადმე, ნებისმიერ კომპონენტში - მოდულებში, მოქმედებებში, რუკებში. და ა.შ." class="term">სისტემის ფუნქციების alert() , confirm() და prompt() , მსგავსი რამ:
წაშალე ყველაფერი!
ეს მუშაობს ნებისმიერ ბრაუზერში, მაგრამ ფანჯრები, რომლებიც ნაჩვენებია ასეთი ფუნქციებით, გამოიყურება მახინჯი, პრიმიტიული და არღვევს მთელ სილამაზეს, რასაც ჩვენ ვქმნით ჩვენს საიტზე.

ძრავში ამ პრობლემის მოსაგვარებლად ახლა შეგიძლიათ (მე ვიტყოდი, რომ აუცილებელია) გამოიყენოთ ანალოგები:

ls.modal.alert(options) - საინფორმაციო ფანჯრის ჩვენება ერთი "OK" ღილაკით
ls.modal.confirm(options) - აჩვენებს ფანჯარას ღილაკებით "გაუქმება" და "დადასტურება".
ls.modal.prompt(options) - ფანჯარა შეყვანის ველით

ყველა ფუნქციაში, პარამეტრების პარამეტრი შეიძლება იყოს სტრიქონი ან ობიექტი. Მაგალითად:
ls.modal.alert („გამარჯობა, სამყარო!“);
ეს კოდი აჩვენებს მოდალურ ფანჯარას ტექსტით "გამარჯობა, სამყარო!" და ღილაკი "Ok". და რაც მთავარია, ეს ფანჯარა ზუსტად ისე იქნება შექმნილი, როგორც ყველა სხვა მოდალური ფანჯარა თქვენს საიტზე.

ჩვენ ასევე შეგვიძლია დავწეროთ ღილაკზე დაწკაპუნების დამმუშავებელი:
ls.modal.alert((სათაური: "მე ვამბობ", ტექსტი: "გამარჯობა, სამყარო!", onConfirm: function())( // მომხმარებელმა დააჭირა Ok ღილაკს))); აქ ემატება ფანჯრის სათაური “I say” და ღილაკზე დაჭერისას შესრულდება onConfirm პარამეტრში გადაცემული ფუნქცია.

მაგრამ ეს ყველაფერი არ არის! ჩვენ შეგვიძლია გამოვაჩინოთ ნებისმიერი HTML კოდი ფანჯრის სხეულში:
var htmlCode = " აქ არის თქვენი ახალი ავატარი"; ls.modal.alert((სათაური: "Avatar", html: htmlCode)); და მივიღებთ მსგავს რაღაცას:

გაითვალისწინეთ, რომ html პარამეტრი გამოიყენება HTML კოდის საჩვენებლად და არა ტექსტის პარამეტრი (თუ ორივე პარამეტრს გადასცემთ, ტექსტი გამოყენებული იქნება და html იგნორირებული იქნება).

ls.modal.confirm() და ls.modal.prompt() ფუნქციები გამოიყენება ანალოგიურად. მაგრამ ამ ფუნქციებში შესაძლებელია დამატებითი პარამეტრები. მაგალითად, ls.modal.confirm() ფუნქციის პარამეტრებში შეგვიძლია გადავიტანოთ არა ერთი, არამედ ორი დამმუშავებელი - თითოეული ღილაკისთვის თითო დამმუშავებელი:
ls.modal.confirm((სათაური: "წაშლა", ტექსტი: "წაშალო ყველაფერი?", onConfirm: function())( // მომხმარებელმა დააწკაპუნა ღილაკს "Confirm"), onCancel: function())( // მომხმარებელმა დააჭირა ღილაკს "გაუქმება" ) )); ls.modal.prompt() ფუნქცია გამოიყენება მომხმარებლისთვის გარკვეული მნიშვნელობის მოთხოვნის მიზნით. და ჩვენ შეგვიძლია დავაყენოთ ეს ნაგულისხმევად:
ls.modal. prompt ((title: "Enter a number", text: "Enter a number here", მნიშვნელობა: 123 onConfirm: function(value)( // შეიყვანეთ მნიშვნელობა ცვლადში
ცვლადის სახელის ზოგადი სქემა ასეთია: პრეფიქსი+დამატებითი პრეფიქსი+ცვლადისახელი+სუფიქსი. ცვლადის სახელები შეიცავს დიდ და პატარა ასოებს და იწყება პატარა პრეფიქსით, რომელიც მიუთითებს ცვლადის მნიშვნელობის მონაცემთა ტიპზე. გამოსაყენებლად რეკომენდებული პრეფიქსების სია მოცემულია ქვემოთ. დამატებითი პრეფიქსი განსაზღვრავს ცვლადის მნიშვნელობას და არჩეულია ქვემოთ ჩამოთვლილი რეკომენდებული დამატებითი პრეფიქსების სიიდან. ცვლადის სახელი შედგება ერთი ან მეტი სიტყვისაგან, რომელიც აღწერს ამ ცვლადის სემანტიკურ მნიშვნელობას და იწერება ამაღლებული რეგისტრით. ვინაიდან პრეფიქსები აღწერს ცვლადის მნიშვნელობის ტიპს, მისი სახელი აღწერს ამ ტიპის სინგულარულ მაგალითს. სუფიქსი ავსებს ცვლადის სახელს და აზუსტებს მის სემანტიკურ მნიშვნელობას. გამოსაყენებლად რეკომენდებული სუფიქსების სია მოცემულია ქვემოთ. სახელში ნომრები დასაშვებია, მაგრამ არ არის რეკომენდებული. სახელში ქვედა ხაზი არ გამოიყენება.

პრეფიქსები
გამოსაყენებლად რეკომენდებულია პრეფიქსების შემდეგი სია:
- a (მასივი) - მასივის მნიშვნელობა;
- b (bool) - ლოგიკური მნიშვნელობა;
- e (entity) - Entity ტიპის და მისგან მემკვიდრეობით მიღებული ობიექტი;
- i (მთლიანი) - მთელი მნიშვნელობა;
- f (float) - რეალური ტიპის მნიშვნელობა;
- m (mapper) - Mapper ტიპის და მისგან მემკვიდრეობით მიღებული ობიექტი;
- n (რიცხვი) - განუსაზღვრელი ციფრული ტიპის მნიშვნელობა, რომელსაც შეუძლია მიიღოს ან მთელი რიცხვი ან
რეალური ღირებულება. საჭიროებს ტიპის მნიშვნელობის შემოწმებას გამოყენებისას.

- o (ობიექტი) - Mapper-ისა და Entity-სგან განსხვავებული ტიპის ობიექტი;
- s (სტრიქონი) - სიმებიანი მნიშვნელობა;
- x (miXed) - შერეული ტიპის ობიექტი. საჭიროებს ტიპის მნიშვნელობის შემოწმებას გამოყენებისას.

გამოსაყენებლად რეკომენდებულია დამატებითი პრეფიქსების შემდეგი სია:
- მინ (მინიმუმი) - მინიმალური მნიშვნელობა;
- მაქს (მაქსიმალური) - მაქსიმალური მნიშვნელობა;
- მიმდინარე - მიმდინარე მნიშვნელობა.

სუფიქსები
დამატებითი პრეფიქსებისგან განსხვავებით, სუფიქსები აკონკრეტებენ ცვლადის სახელის სემანტიკურ მნიშვნელობას და არა მის სახელს.
მნიშვნელობა. გამოსაყენებლად რეკომენდებულია სუფიქსების შემდეგი სია:
- პირველი - პირველი მნიშვნელობა ხელმისაწვდომი სიიდან;
- ბოლო - ბოლო მნიშვნელობა ხელმისაწვდომი სიიდან;
- ლიმიტი - ლიმიტის მნიშვნელობა ხელმისაწვდომი სიიდან;
- Tmp - დროებითი მნიშვნელობა;
- ახალი - ახალი (დადგენილი) მნიშვნელობა;
- ძველი - ძველი (გადაწერილი) ღირებულება;

გამონაკლისები
არსებობს ცვლადის სახელები, რომლებიც განკუთვნილია სპეციალური გამოყენებისთვის - გამონაკლისები აღნიშნულიდან
რეკომენდაციები:
- i, j - იტერატორები მცირე მარყუჟებისთვის (მარყუჟი ითვლება პატარა, თუ ის მთლიანად ჯდება
ერთი ეკრანი და საშუალებას გაძლევთ ერთდროულად ნახოთ იტერატორების ყველა შემთხვევა);
- k, v - foreach ციკლის ცვლადები ($aData როგორც $k => $v);
- გასაღები, მნიშვნელობა - foreach loop ცვლადები ($aData როგორც $key => $value);
- s - მონაცემთა სერიული წარმოდგენა;
- data - ცვლადი მონაცემებით ერთეულში, ისევე როგორც მონაცემები დაბრუნებული mapper მეთოდებიდან;
- sql - mappers-ში, ცვლადი, რომელიც შეიცავს მოთხოვნის ტექსტს - პრეფიქსი "s" არ გამოიყენება." class="term">ცვლადი "მნიშვნელობა") )); აქ მომხმარებლის მიერ შეყვანილი მნიშვნელობა გადაეცემა დამმუშავებელს და ჩვენ შეგვიძლია გამოვიყენოთ ის, რომ განვსაზღვროთ რა უნდა გავაკეთოთ შემდეგ.

ამ ნაწილის დასასრულს, მინდა გავამახვილო ყურადღება ერთ მახასიათებელზე, რომელიც არ უნდა დავივიწყოთ: მნიშვნელოვანი განსხვავებაა სისტემის ფუნქციების alert(), confirm() და prompt() და მათი ანალოგების ქცევაში - ls.modal.alert(Options), ls.modal.confirm(options) და ls.modal.prompt(options) . კერძოდ - სისტემის ფუნქციები
ძრავში არის ეგრეთ წოდებული "სისტემის" ფუნქციების რამდენიმე ჯგუფი. ამ ფუნქციების შემცველი ფაილები იტვირთება ძრავის დასაწყისშივე, კონფიგურაციის ფაილების ჩატვირთვამდეც და თავად ფუნქციები არ არის მიბმული რომელიმე მოდულთან და მათი გამოყენება შესაძლებელია სადმე, ნებისმიერ კომპონენტში - მოდულებში, მოქმედებებში, რუკებში. და ა.შ." class="term">სისტემის ფუნქციები აჩერებს Javascript კოდის შესრულებას და ელოდება მომხმარებლის რეაქციას. და მხოლოდ მას შემდეგ რაც მომხმარებელი რეაგირებს, კოდის შესრულება გრძელდება. როდესაც იყენებთ აქ აღწერილ ფუნქციებს, მთელი კოდი, სადაც თავად ზარი კეთდება, ჯერ სრულდება და მხოლოდ ამის შემდეგ გამოჩნდება დიალოგური ფანჯარა.

ამიტომ, თუ აიღებთ სტატიის დასაწყისში მოცემულ კოდს და უბრალოდ შეცვლით confirm() ზარს ls.modal.confirm()-ით და კოდი უნდა გადაიწეროს დაახლოებით ასე:
წაშალე ყველაფერი! $(function())( $("js-delete-all").click(ls.modal.confirm("დარწმუნებული ხარ?", function()( location.href="site.com/delete/all/ ";)););)); გთხოვთ გაითვალისწინოთ, რომ დამმუშავებლის ფუნქცია გადაეცემა არა onConfirm პარამეტრში, არამედ ფუნქციის მეორე არგუმენტად; ეს ასევე მისაღებია.

დიახ, ცოტა მეტი კოდია. მაგრამ მშვენიერია! სილამაზე კი, მოგეხსენებათ, მსხვერპლს მოითხოვს.

ვაგრძელებთ ჩვენი გაკვეთილების სერიას, თუ როგორ უნდა გავალამაზოთ და მართოთ ბრაუზერის ნაგულისხმევი პარამეტრები, დღეს გეპატიჟებით განავითაროთ ბრაუზერის დადასტურების დიალოგი ადვილად გამოსაყენებელი jQuery მოდულის გამოყენებით. თქვენ შეგიძლიათ აირჩიოთ ტექსტი, ღილაკები და მოქმედებები, რომლებიც შესრულდება დაწკაპუნების შემდეგ.

HTML კოდი

მიუხედავად იმისა, რომ თავდაპირველად ყურადღება უნდა მივაქციოთ დადასტურების ფანჯარას, ჯერ ცოტათი მოგიყვებით იმ გვერდის შესახებ, რომელსაც ჩვენ ვიყენებთ. თუ გსურთ ნახოთ მოდულის საწყისი კოდი, შეგიძლიათ გამოტოვოთ ეს ნაბიჯი და გადახვიდეთ სტატიის jQuery ნაწილზე.

ინდექსი.php

jQuery დაადასტურეთ დიალოგის ჩანაცვლება CSS3 | Tutorialzine Demo

დოკუმენტის ზედა ნაწილში ჩვენ დავამატეთ Cuprum შრიფტი , jQuery.confirm.css (კასკადური სტილის ფურცლები დიალოგური ფანჯრისთვის) და styles.css - ჩვენი გვერდის კასკადური სტილის ფურცლები.

დოკუმენტის სხეულის ბოლოში ჩვენ დავამატეთ jQuery ბიბლიოთეკა, jquery.confirm.js (მთავარი მოდულის ფაილი), ასევე script.js, რომელიც უსმენს ღილაკზე დაწკაპუნების მოვლენას და აწარმოებს დანამატს. ჩვენი დღევანდელი გაკვეთილის ბოლო ეტაპზე ჩვენ მოგიყვებით ამ ორი ფაილის შესახებ.

თქვენს ვებსაიტზე დადასტურების ფანჯრის ჩასართავად, თქვენ უნდა დააკოპიროთ jquery.confirm საქაღალდე გადმოწერილი არქივიდან და ჩართოთ jquery.confirm.css კოდის თავში, ასევე jquery.confirm.js ფაილი. ტეგი, რომელიც ამთავრებს დოკუმენტის სხეულს + jQuery ბიბლიოთეკა.

თავად დიალოგი სხვა არაფერია, თუ არა HTML კოდის რამდენიმე ხაზი. ქვემოთ შეგიძლიათ იხილოთ მოდულის მიერ ჩასმული კოდი დიალოგური ფანჯრის საჩვენებლად.

მაგალითი დიალოგის კოდი

კოდი ემატება დოკუმენტის სხეულს. confirmOverlay ნაჩვენებია დანარჩენი გვერდის თავზე, რაც ხელს უშლის გვერდის ელემენტებთან ურთიერთქმედებას, სანამ დიალოგური ფანჯარა გამოჩნდება. h1, p და div დადასტურება ღილაკები განლაგებულია დანამატის პარამეტრებში მითითებული სტრუქტურის შესაბამისად. ამის შესახებ მოგვიანებით სტატიაში შეიტყობთ.

CSS კოდი

დიალოგური ფანჯრის დიზაინი შეიცავს jquery.confirm.css ფაილში. ეს ბევრად აადვილებს ინტეგრირებას დასრულებულ პროექტში და სტილის გაკეთება ხდება ისე, რომ დარწმუნებული იყოთ, რომ სტილები არ შეერევა უკვე გვერდზე არსებულ სტილებს.

jquery.confirm.css

#დაადასტურეთ გადაფარვა(
სიგანე:100%;
სიმაღლე:100%;
პოზიცია: ფიქსირებული;
ზედა: 0;
მარცხენა: 0;
background:url("ie.png");
ფონი: -moz-წრფივი-გრადიენტი(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) გამეორება-x rgba(11,11,11,0.2);
ფონი:-webkit-გრადიენტი(წრფივი, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) გამეორება-x rgba(11,11,11,0.2);
z-ინდექსი:100000;
}

#confirmBox(
background:url("body_bg.jpg") repeat-x მარცხენა ქვედა #e5e5e5;
სიგანე: 460px;
პოზიცია: ფიქსირებული;
მარცხენა:50%;
ზედა:50%;
ზღვარი:-130px 0 0 -230px;
საზღვარი: 1px მყარი rgba(33, 33, 33, 0.6);

Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) ჩასმული;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) ჩასმული;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) ჩასმული;
}

#confirmBox h1,
#confirmBox p(
font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") repeat-x მარცხენა ქვედა #f5f5f5;
padding: 18px 25px;
ტექსტი-ჩრდილი: 1px 1px 0 rgba(255, 255, 255, 0.6);
ფერი:#666;
}

#confirmBox h1(
ასოების ინტერვალი: 0.3px;
ფერი:#888;
}

#confirmBox p(
ფონი: არცერთი;
შრიფტის ზომა:16px;
ხაზი-სიმაღლე:1.4;
padding-top: 35px;
}

#დადასტურების ღილაკები(
padding:15px 0 25px;
text-align:center;
}

#confirmBox.button(
ჩვენება: inline-block;
ფერი: თეთრი;
პოზიცია:ნათესავი;
სიმაღლე: 33px;

შრიფტი:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;

ზღვარი-მარჯვნივ: 15px;
padding: 0 35px 0 40px;
ტექსტი-დეკორაცია:არცერთი;
საზღვარი: არცერთი;
}

#confirmBox .button:last-child( margin-right:0;)

#confirmBox .ღილაკის სიგრძე(
პოზიცია:აბსოლუტური;
ზედა: 0;
მარჯვენა:-5px;
background:url("buttons.png") no-repeat;
სიგანე: 5px;
სიმაღლე: 33 px
}

#confirmBox .blue (ფონის პოზიცია: მარცხნივ ზედა; ტექსტის ჩრდილი: 1px 1px 0 #5889a2;)
#confirmBox .blue span( ფონის პოზიცია:-195px 0;)
#confirmBox .blue:hover( ფონის პოზიცია: მარცხენა ქვედა;)
#confirmBox .blue:hover span(ფონის პოზიცია:-195px ქვედა;)

#confirmBox .gray (ფონის პოზიცია: -200 პიქსელი ზედა; ტექსტის ჩრდილი: 1პx 1პx 0 #707070;)
#confirmBox .gray span( ფონის პოზიცია: -395px 0;)
#confirmBox .grey:hover( ფონის პოზიცია:-200px ქვედა;)
#confirmBox .gray:hover span( ფონის პოზიცია: -395px ქვედა;)

ეს სარგებლობს ახალი CSS3-ით. #confirmOverlay განმარტებაში, ჩვენ ვიყენებთ CSS3 გრადაციას (რომელიც მუშაობს მხოლოდ Firefox-ში, Safari-სა და Chrome-ში) დაბრუნებით, რომელიც მოცემულია გამჭვირვალე PNG-ის სახით.

შემდეგ, ცენტრში #confirmBox ეკრანზე, ჩვენ დავამატეთ შიდა ყუთის ჩრდილი (რაღაც მსგავსია Photoshop-ის შიდა ბზინვარების). ჩვენ ასევე გამოვიყენეთ Cuprum შრიფტი, რომელიც დამატებულია Google-ის შრიფტების დირექტორიადან.

ტექსტის ჩრდილებთან ერთად, შეგიძლიათ იხილოთ ღილაკის სტილი. ისინი ხორციელდება მოცურების კარების გამოყენებით. ამჟამად არსებობს ორი ტიპის დიზაინი - ლურჯი და ნაცრისფერი. თქვენ შეგიძლიათ დაამატოთ ახალი ღილაკის ფერი კოდში ახალი დეკლარაციების დამატებით.

jQuery

სანამ მოდულის საწყის კოდს გადავალთ, ჯერ ცოტა შორს გადავხედოთ. script.js-ში შეგიძლიათ ნახოთ მოდული გაშვებული.

Script.js

$(დოკუმენტი).ready(function())(

$(".item .delete"). დააწკაპუნეთ(function())(

Var elem = $(this).closest(."item");

$.დაადასტურეთ((
"title" : "დადასტურების წაშლა",
"message" : "თქვენ აპირებთ ამ ელემენტის წაშლას.
მისი შემდგომი აღდგენა შეუძლებელია! გაგრძელება?"
"ღილაკები" :(
"დიახ" :(
"კლასი": "ლურჯი",
"მოქმედება": ფუნქცია())(
elem.slideUp();
}
},
"არა" :(
"კლასი": "ნაცრისფერი",
"action": function()() // ამ შემთხვევაში არაფერია გასაკეთებელი. თქვენ ასევე შეგიძლიათ გამოტოვოთ მოქმედების თვისება.
}
}
});

როდესაც ჩვენს მაგალითში დააწკაპუნეთ div .deleted, სკრიპტი ახორციელებს დანამატით განსაზღვრულ $.confirm ფუნქციას. ქვემოთ მოცემულია დიალოგური ფანჯრის სათაური, აღწერა და ღილაკის ობიექტი. თითოეულ ღილაკს აქვს CSS კლასის სახელი და ასევე მოქმედების პარამეტრი. მოქმედება არის ფუნქცია, რომელიც მუშაობს ღილაკზე დაწკაპუნებისას.

ახლა გადავიდეთ საინტერესო ნაწილზე. jquery.confirm.js-ში შეგიძლიათ ნახოთ ჩვენი დიალოგის საწყისი კოდი.

Jquery.confirm.js

$.confirm = ფუნქცია(პარამები)(

If($("#confirmOverlay").length)(
// დადასტურება უკვე ნაჩვენებია გვერდზე:
დაბრუნება false;
}

Var ღილაკიHTML = "";

// ღილაკებისთვის მარკირების გენერირება:

თუ(!obj.action)(
obj.action = ფუნქცია())();
}
});

Var მარკირება = [
"

",params.title,"",
"

",params.message,"

",
"

",
ღილაკი HTML,
"

"
].join("");

$(markup).hide().appendTo("body").fadeIn();

Var ღილაკები = $("#confirmBox .button"),
i = 0;

$.each(params.buttons,function(name,obj)(
buttons.eq(i++).click(function())(

// მოქმედების ატრიბუტის გამოძახება, როდესაც ა
// დაწკაპუნება ხდება და დამალულია დადასტურება.

Obj.action();
$.confirm.hide();
დაბრუნება false;
});
});
}

$.confirm.hide = ფუნქცია())(
$("#confirmOverlay").fadeOut(function())(
$(this).remove();
});
}

ჩვენი მოდული განსაზღვრავს $.confirm() მეთოდს. ეს მეთოდი ამუშავებს თქვენს მიერ შეყვანილ მონაცემებს, აყალიბებს მარკირებას და შემდეგ ამატებს ყველაფერს გვერდზე. იმის გამო, რომ #confirmOverlay div-ს აქვს ფიქსირებული პოზიცია CSS დეკლარაციის საშუალებით, ჩვენ მას ბრაუზერს დავუტოვებთ ცენტრირების პროცესს და შემდეგ გადავაადგილებთ მას, როცა მომხმარებელი ახვევს გვერდს.

მარკირების დამატების შემდეგ, სკრიპტი ანაწილებს ღონისძიების ბერკეტებს ღილაკზე დაწკაპუნების მოვლენებისთვის, ასრულებს დაჭერილი ღილაკის შესაბამის მოქმედებას.

ამით დასრულდა ჩვენი დიალოგური ფანჯარა!

შევაჯამოთ

თქვენ შეგიძლიათ შეცვალოთ დიალოგური ფანჯრის გარეგნობა jquery.confirm.css ფაილის გამოყენებით. ვინაიდან დიალოგურ ფანჯარაში შეტყობინების ატრიბუტი იყენებს HTML კოდს, შეგიძლიათ იქ დაამატოთ სურათები ან ხატები.

თქვენ შეგიძლიათ გამოიყენოთ დანამატი შეცდომის შეტყობინებების ყუთების დასანერგად - თქვენ უბრალოდ უნდა დაამატოთ ერთი ღილაკი მოქმედების ატრიბუტების ნაკრების გარეშე.

ყურადღება! თქვენ არ გაქვთ ფარული ტექსტის ნახვის უფლება.

და კიდევ, მივესალმები კიდევ ერთ თემას, რომელიც ეძღვნება JavaScript ენას, რომელშიც გავაანალიზებთ გაფრთხილების, სწრაფი, დადასტურების მეთოდებს. ეს მეთოდები ჩაშენებულია Javascript ენაში და გვეხმარება მომხმარებელთან ურთიერთობაში.
Alert აჩვენებს ფანჯარას ბრაუზერის ეკრანზე გარკვეული ინფორმაციით, რომელიც აჩერებს სკრიპტს მანამ, სანამ მომხმარებელი არ დააწკაპუნებს OK.
Prompt, როგორც წესი, აჩვენებს ფანჯარას, რომელიც სვამს მომხმარებელს შეკითხვას, რომელსაც უნდა უპასუხოს კონკრეტულ ტექსტურ ველში OK-ზე დაწკაპუნებამდე. მომხმარებელს ასევე შეუძლია არაფერი შეიყვანოს გაუქმების ღილაკზე დაჭერით.
Confirm ასევე აჩვენებს ფანჯარას, რომელშიც მომხმარებელს აღარ შეუძლია რაიმეს შეყვანა ტექსტის ველში, მაგრამ შეუძლია მხოლოდ დააწკაპუნოს OK ან გააუქმოს.
ახლა კი, მოკლე შესავლის შემდეგ, გადავიდეთ ყოველივე ზემოთქმულის პრაქტიკაში გათვალისწინებაზე.

გაფრთხილება, მოწოდება, დადასტურება



alert ("გამარჯობა, ძვირფასო მომხმარებელო!" );
var nameUser = prompt("თქვენი სახელი?" , "სახელი" );
var userAnswer = დადასტურება ("დარწმუნებული ხართ, რომ გსურთ საიტის დატოვება?" );

შედეგად, ბრაუზერის გვერდის განახლებისას, ჩვენ დავინახავთ ფანჯარას, რომელიც მიესალმება მომხმარებელს. OK-ზე დაწკაპუნების შემდეგ, შემდეგი ფანჯარა გამოჩნდება თქვენი სახელის მოთხოვნით. ამ მეთოდს აქვს ორი პარამეტრი, პირველი აუცილებელია და პასუხისმგებელია სათაურზე, რომელიც გამოჩნდება, ჩვენს შემთხვევაში ეს არის მომხმარებლის სახელის შეკითხვა. ხოლო მეორე პარამეტრი პასუხისმგებელია იმ მნიშვნელობაზე, რომელიც ნაგულისხმევად იქნება ნაჩვენები ტექსტის ველში. თუ შეიყვანთ თქვენს სახელს და დააწკაპუნეთ OK, თქვენი სახელი განთავსდება nameUser ცვლადში. თუ დააჭირეთ გაუქმების ღილაკს, null ჩაიწერება ცვლადში.
და ბოლოს, ფანჯარა, რომელიც ეკითხება მომხმარებელს, სურს თუ არა მას ჩვენი საიტის დატოვება. თანხმობის შემთხვევაში ცვლადში განთავსდება ლოგიკური მნიშვნელობა true, ხოლო უარის შემთხვევაში, შესაბამისად false. ეს არის ყველაფერი, რაც თქვენ უნდა იცოდეთ ამ მეთოდების შესახებ, შევხვდებით შემდეგ გაკვეთილებზე!

HTML, XHTML და CSS 100% Kvint Igor მეთოდის დადასტურება()

confirm() მეთოდი

confirm() მეთოდი აჩვენებს დადასტურების ფანჯარას, რომელიც მსგავსია alert() მეთოდით გენერირებული გაფრთხილების ფანჯრისა, მაგრამ შეიცავს ორ ღილაკს: OK და Cancel. ჩამონათვალი 11.3 აჩვენებს დადასტურების ფანჯრის შექმნას, მაგრამ ეს სკრიპტი არ განასხვავებს OK და Cancel ღილაკებს შორის. რომელიმე ღილაკზე დაჭერით უბრალოდ ფანჯარა დაიხურება (სურ. 11.5).

ბრინჯი. 11.5. დადასტურებასთან მუშაობა

ჩამონათვალი 11.3. დადასტურებასთან მუშაობა

დადასტურებასთან მუშაობა

დადასტურება ("ეს არის ჩემი დადასტურება");

ამ თავის წაკითხვის შემდეგ, თქვენ შეისწავლით თუ როგორ გამოიყენოთ ეს მეთოდი, რათა თქვენი სკრიპტი განსხვავებულად რეაგირებდეს, როდესაც დააწკაპუნებთ OK და Cancel ღილაკებზე.

ანდრეი ვლადიმერვიჩ პოპოვის წიგნიდან Windows Script Host for Windows 2000/XP

გაშვების მეთოდი intWindowStyle პარამეტრი ადგენს გასაშვები აპლიკაციის ფანჯრის ტიპს (ცხრილი 1.13). ცხრილი 1.13. ფანჯრის ტიპები (intWindowStyle) პარამეტრი Visual Basic მუდმივი აღწერა 0 vbHide მალავს მიმდინარე ფანჯარას და ააქტიურებს სხვა ფანჯარას (უჩვენებს მას და აძლევს ფოკუსს) 1 vbNormalFocus ააქტიურებს და

Fulton Hal-ის წიგნიდან Programming in Ruby [ენის იდეოლოგია, გამოყენების თეორია და პრაქტიკა]

წაშლის მეთოდი თუ ძალის პარამეტრი მცდარია ან არ არის მითითებული, მაშინ წაშლის მეთოდის გამოყენებით შეუძლებელი იქნება მხოლოდ წაკითხვის ატრიბუტის მქონე დირექტორიას წაშლა. ძალის დაყენება „true“-ზე ასეთი დირექტორიების დაუყოვნებლივ წაშლის საშუალებას მისცემს. Delete მეთოდის გამოყენებისას არ აქვს მნიშვნელობა მითითებულია თუ არა

წიგნიდან პროგრამირება PDA-ები და სმარტფონები .NET Compact Framework-ზე კლიმოვის ალექსანდრე პ.

გადაადგილების მეთოდი საჭირო დანიშნულების პარამეტრი განსაზღვრავს დირექტორიას, სადაც განხორციელდება გადაადგილება; ველური ბარათები არ არის დაშვებული დირექტორიაში. შენიშვნა Move მეთოდის ნაცვლად, შეგიძლიათ გამოიყენოთ MoveFolder ობიექტის მეთოდი

წიგნიდან Linux და UNIX: shell programming. დეველოპერის სახელმძღვანელო. ტეინსლი დევიდის მიერ

კოპირების მეთოდი საჭირო დანიშნულების პარამეტრი განსაზღვრავს ფაილს, რომელზეც მოხდება ასლი; wildcards დაუშვებელია ფაილის სახელში. გადაწერის პარამეტრი არის ლოგიკური ცვლადი, რომელიც განსაზღვრავს გადაიწეროს თუ არა არსებული ფაილის სახელწოდება დანიშნულება (overwrite=true)

RuBoard გუნდის წიგნიდან PascalABC.NET ენის აღწერა

წაშლის მეთოდი თუ ძალის პარამეტრი მცდარია ან არ არის მითითებული, მაშინ წაშლის მეთოდის გამოყენებით შეუძლებელი იქნება ფაილის წაშლა მხოლოდ წაკითხვის ატრიბუტით. ძალის დაყენება „true“-ზე ასეთი ფაილების დაუყოვნებლივ წაშლის საშუალებას მისცემს. შენიშვნა თქვენ შეგიძლიათ გამოიყენოთ DeleteFile მეთოდი წაშლის მეთოდის ნაცვლად.

ავტორის წიგნიდან

8.3.1. ინექციის მეთოდი ინექციის მეთოდი Ruby-ში მოვიდა Smalltalk ენიდან (ის პირველად გამოჩნდა Ruby 1.8-ში). საინტერესოა მისი ქცევა, თუმცა პირველად არ არის ადვილი გასაგები, ეს ასახავს იმ ფაქტს, რომ ხშირად გვსურს სიაში შემოვლა და გზაში გარკვეული შედეგის „დაგროვება“. რა თქმა უნდა, ყველაზე მეტად

ავტორის წიგნიდან

8.3.3. დაყოფის მეთოდი, როგორც ამბობენ, „მსოფლიოში ორი ტიპის ადამიანია: ისინი, ვინც ადამიანებს სხვადასხვა ტიპებად ყოფენ და ვინც არა“. დანაყოფის მეთოდი არ ეხება ადამიანებს (თუმცა შეგვიძლია მათი წარმოდგენა Ruby-ში ობიექტების სახით), მაგრამ ის ასევე ყოფს კომპლექტს ორ ნაწილად. თუ დანაყოფი გამოძახებისას მოცემულია ბლოკი, მაშინ იგი ფასდება.

ავტორის წიგნიდან

11.1.10. მეთოდი startize_copy როდესაც ობიექტის კოპირება ხდება dup ან clone მეთოდის გამოყენებით, კონსტრუქტორი არ არის გამოძახებული. ყველა სახელმწიფო ინფორმაცია კოპირებულია. მაგრამ რა მოხდება, თუ ეს ქცევა არ გჭირდებათ? მოდით შევხედოთ მაგალითს: class Document attr_accessor:title, :text attr_reader:timestamp def initialize(სათაური, ტექსტი) @title, @text = სათაური, ტექსტი @timestamp =

ავტორის წიგნიდან

11.1.11. გამოყოფის მეთოდი იშვიათია, მაგრამ ხდება ისე, რომ საჭიროა ობიექტის შექმნა მისი კონსტრუქტორის გამოძახების გარეშე (ინიციალიზაციის მეთოდის გვერდის ავლით). მაგალითად, შესაძლოა ობიექტის მდგომარეობა მთლიანად განისაზღვროს მისი წვდომის მეთოდებით; მაშინ არ არის საჭირო ახალი მეთოდის გამოძახება (რომელიც გამოიძახებს ინიციალიზაციას), თუ თქვენ

ავტორის წიგნიდან

11.3.2. const_get მეთოდი const_get მეთოდი იღებს მუდმივის მნიშვნელობას მოცემული სახელით მოდულიდან ან კლასიდან, რომელსაც ეკუთვნის.str = "PI"Math.const_get(str) # მნიშვნელობა არის Math::PI. ეს არის გზა მოერიდეთ ევალ მეთოდის გამოძახებას, რომელიც ზოგჯერ არაელეგანტურად ითვლება. ეს მიდგომა უფრო იაფია თვალსაზრისით

ავტორის წიგნიდან

11.3.5. მეთოდი define_method გარდა def საკვანძო სიტყვისა, კლასში ან ობიექტში მეთოდის დამატების ერთადერთი ნორმალური გზა არის define_method მეთოდის გამოყენება და ეს საშუალებას გაძლევთ ამის გაკეთება გაშვების დროს. რა თქმა უნდა, Ruby-ში თითქმის ყველაფერი ხდება გაშვების დრო. თუ

ავტორის წიგნიდან

11.3.6. const_missing მეთოდი const_missing მეთოდი მსგავსია მეთოდი_missing მეთოდის. უცნობი მუდმივზე წვდომის მცდელობისას, ამ მეთოდს უწოდებენ - თუ ის განსაზღვრულია, რა თქმა უნდა. როგორც პარამეტრს, მას გადაეცემა სიმბოლო, რომელიც მიუთითებს მუდმივზე

ავტორის წიგნიდან

Lockbits მეთოდი .NET Compact Framework 2.0 შემოიღო LockBits მეთოდის შეზღუდული მხარდაჭერა, რომელიც შეიძლება გამოყენებულ იქნას გამოსახულების პიქსელების მასივის მანიპულირებისთვის. ImageLockMode ჩამოთვლა ამ მეთოდში იძლევა მნიშვნელობებს ReadWrite, ReadOnly და WriteOnly. და PixelFormat ჩამოთვლა მხარს უჭერს

ავტორის წიგნიდან ავტორის წიგნიდან

მეთოდი Zip მეთოდების აღწერა მეთოდები მოცემულია T. ფუნქციის თანმიმდევრობის თანმიმდევრობისთვის Zip(second: sequence of Tsecond; resultSelector: (T,TSsecond)->Res): Res of Res; აერთიანებს ორ მიმდევრობას მითითებული ფუნქციის გამოყენებით, რომელიც იღებს თითოეული მიმდევრობის ერთ ელემენტს და

ავტორის წიგნიდან

მეთოდი შეიცავს მეთოდების აღწერას მეთოდები მოცემულია T ფუნქციის თანმიმდევრობისთვის. შეიცავს (მნიშვნელობა: T): ლოგიკური; ადგენს შეიცავს თუ არა მითითებული ელემენტს თანმიმდევრობაში ნაგულისხმევი თანასწორობის შედარების გამოყენებით. ფუნქცია შეიცავს (მნიშვნელობა: T; შედარება: IEqualityComparer): ლოგიკური;