พฤหัสบดี 4 ธันวาคม, 2008
ไม่มีความคิดเห็น

jQuery: หน้าต่างยืนยัน

เรายังคงอยู่ภายใต้ของ jQuery ใช้ในทางปฏิบัติ วันนี้ผมจำเป็นในการเขียนหน้าต่างยืนยันการดำเนินการในแผงบริหาร กรณีที่ดูเหมือนว่าจะง่ายและสามารถแก้ไขได้โดยเรื่องที่ลืมเกี่ยวกับ JavaScript (ยืนยัน) หรือ PHP แต่ความสนุกอยู่ในวิธีการทำเช่นนี้เพื่อที่จะไม่ก่อให้เกิดและแม้กระทั่งที่เป็นผลดีจริงเหรอ?
ผมจะพยายามที่จะนำเสนอวิธีการแก้ปัญหากลุ่มตัวอย่างในการแก้ไขปัญหาที่สมมติว่าองค์ประกอบที่เราต้องการจะมาพร้อมกับการยืนยันโดยผู้ใช้การเชื่อมโยงคือ

ก่อน ตัวอย่างไฟล์ HTML

เราเริ่มต้นด้วยไฟล์ที่เราทำการทดสอบชั่วของเรา: 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"> <html
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 ยืนยันโต้ตอบ <title> </ title>
 <หัว />
 <body>
 <p>
 จำ dolor นั่ง amet, consectetur adipiscing ยอด  Quisque ultrices quis Orci nisl  Aliquam ที่ dolor  Sed Quam Leo consequat AC  Curabitur SEM Fringilla sodales  Praesent eleifend mauris AC ante ภาษิต aliquet  Sapien Etiam โมฆะ consequat eget, consequat Vitae, molestie id, Lectus  ใน HAC habitasse platea dictumst  Aliquam feugiat Lectus odio AC  Suspendisse Varius egestas nisl  null Morbi  Pellentesque aliquet Felis interdum  Vestibulum Libero euismod luctus  Suspendisse Enimem sodales interdum  Pellentesque Orcia  Nulla Massa nunc, eleifend aka, eleifend Varius, กอง eget, Leo  Vestibulum ante ipsum primis ใน faucibus Orci et ultrices posuere luctus cubilia Curae; <br/> ขอ
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim Quam ligula ที่ ligula  Nulla ภาษิต purus interdum  odio Aenean  pretium Vestibulum  Phasellus Enimem Enimem, Semper aliquet, Libero Tempus AC, rutrum gravida,  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, Leo  ใน Metus id  rutrum Vivamus  velit Nulla NEC  Nisi ยูทาห์ purus, Porta ที่, tincidunt นั่ง amet, scelerisque pulvinar, SEM  Risus adipiscing Sed  ใน nisi  อัล Augustin et  Phasellus ullamcorper quis โกศ Lacus Tempus dapibus  ถิติ eget Sed  Etiam TELLUS erat, adipiscing NEC, sed placerat, ultricies, Orci  Lectus Cras AC  ซึ่งมิได้จัดประเภท Curabitur Mattis Lorem ไร้มาตรฐาน  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> turpis aliquet iaculis
 </ P>
 <div id="confirm"> </ div>
 </ body>
 </ html>

ข้อความกำเนิดตัวอย่าง ipsum Lorem , p เข้าไปข้างใน ไม่นานก่อนที่จะปิดแท็กร่างกายให้ใส่ # DIV ยืนยันภายในซึ่งจะมีรหัสจากหน้าต่างของเราเพื่อยืนยัน

ที่สอง ชั้นนำเสนอ

ขอให้เรามุ่งเน้นไปที่หน้าต่างของเรา ในกรณีของฉันรหัส html ที่จะต้องรับผิดชอบสำหรับหน้าต่างทั้งหมดที่จะมีลักษณะดังต่อไปนี้: 

  id="confirm"> <div
 <div>
 <div>
 <h1> คุณแน่ใจหรือว่าต้องการลบรายการนี​​้ไหม </ h1>
 <p> <button onClick="location.href='TUTAJ จะตีเนื้อหาของ HREF ของ LINKU'"> YES ปุ่ม </> <button> ไม่ปุ่ม </> </ p>
 </ div> <- End # ยืนยัน div div ->
 </ div> <- End # ยืนยัน div ->
 </ div> <- End # ยืนยัน ->

รหัสภายใน # ยืนยันจะถูกสร้างขึ้นโดย JavaScript แต่มันเป็นมูลค่าการพิจารณาว่าทำไมมันมีลักษณะเช่นเดียวกับที่และทำไมจึงเป็นที่ด้านล่างของหน้ารหัส?

เริ่มต้นให้กับสาเหตุของการรวมทั้งรหัสที่สิ้นสุด ในการกำหนดตำแหน่ง: แน่นอนสำหรับ # ยืนยันโดยไม่ต้องพารามิเตอร์ z-index ลำดับของวัตถุจากตำแหน่ง: สัมบูรณ์ก็จะตรงกับลำดับในการที่พวกเขาจะถูกสร้างโดยเบราว์เซอร์ เรียบเรียงครั้งจะมีมากกว่ากองของชั้นที่มีตำแหน่ง: สัมบูรณ์ดังนั้นถ้าเช่นจะมีขนาดเดียวกันหน้ากากชั้นซึ่งปรากฏในรหัสก่อนหน้านี้

ทำไมไม่ยืนยันภายในเราวางไว้สองครั้ง div? ชี้แจงประเด็นนี้เป็นเพียงแค่อ่านส่วนในรหัส CSS ของคุณที่คุณวางภายในส่วนหัว: 

  type="text/css"> <style
 <! -
 * {margin: padding, 0px: 0px;}
 ร่างกาย {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * ยืนยัน * /
 # ยืนยัน {display: none; position: absolute; ความสูง: 100%; ความกว้าง: 100%; พื้นหลัง: # 000; ชั้น: 0; ที่ยังเหลือ: 0;}
 # ยืนยัน {height: แสดงออก ((&& (window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] แม็กซ์ ().: document.documentElement.scrollHeight) + 'PX'); ความกว้าง: นิพจน์ ((&& (window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth เอกสาร, . documentElement.clientHeight] สูงสุด (): document.documentElement.scrollWidth) + 'PX');}
 # ยืนยัน [id] {position: ถาวร;}
 # ยืนยัน div {padding: 10px; margin-top: 200px;}
 div div # ยืนยัน {background: # 900c0c; กว้าง: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # ยืนยัน div div h1 {font-size: 18px; color: # FFF;}
 # ยืนยัน div div p {padding: 20px;}
 ->
 </ style>

# กำหนดพื้นหลังที่นี่ยืนยันว่าจะ "ปิด" หน้าทั้งหมด บรรทัดที่สอง (หนึ่งที่มีความสูงที่ผิดปกติและความกว้าง), มันเป็นสิ่งจำเป็นในกรณีของ Internet Explorer. # ยืนยัน [id] คือเข้าใจเท่านั้นที่จะเบราว์เซอร์ที่ทันสมัยและนี้คือแผนการที่จะพื้นหลังของหน้าต่างของเราได้ขนาดของ 100% ถึง 100% และทำงานตลอดเวลา กับเว็บไซต์ (สำหรับ IE มีการคำนวณในแต่ละกรณีขึ้นอยู่กับความกว้างในปัจจุบันและความสูงของหน้าต่าง)

div ครั้งแรกเป็นสิ่งที่จำเป็นไปยังศูนย์ 2 และที่จะใช้ระยะห่างจากหน้าต่างชั้นบน margin-top div สองแล้วให้หน้าต่างเพื่อยืนยันว่าสามารถจะเป็นศูนย์กลางมันเป็นองค์ประกอบที่อยู่ภายในบล็อกที่มีความกว้างของเรา: 100% (ค่ามาตรฐานสำหรับองค์ประกอบที่มีจอแสดงผล: บล็อก - ซึ่งเป็น div)

ที่สาม เวลาสำหรับ jQuery

มันยังคงอยู่ที่เราจะตอบสนองต่อการคลิกบนลิงค์ที่ปรากฏในตอนท้ายของบล็อก P ที่วาง Lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> Maecenas </ a>

ในกรณีของเราเชื่อมโยงทั้งหมดที่มีชั้นยืนยันจะตอบสนองต่อสคริปต์ คุณสามารถใช้การรับรู้ของเราในการเชื่อมโยงทั้งหมดสำหรับการลบค่าจากฐานข้อมูล

มันต้องมีรหัส JavaScript ที่วางอยู่บนด้านล่างของหน้า: 

  src = "jquery.js" type="text/javascript"> <script </ script>
 <script type="text/javascript">
 $ (เอกสาร). พร้อม (function () {
 $ (". ยืนยัน"). คลิก (function () {
 $ ("# ยืนยัน")
 . Css ({opacity: 0.95})
 Fadein. ()
 . Html ('<div> <div> <h1> เปลี่ยนเส้นทาง </ h1> <p <ปุ่ม onClick = \ "location.href = \'' + $ (นี้). attr (" href ") +' \ '\ "> ใช่ปุ่ม </> <button> ไม่ปุ่ม </> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# ยืนยัน") คลิกที่ (function () {$ (นี้) Fadeout ();.});
 });
 </ script>

บรรทัด jQuery ก่อนโหลด

แล้วสาขาหลักของรหัสของเรา $ (เอกสาร). พร้อมเปิดใช้งานรหัสของคุณหลังจากที่โหลดหน้าเว็บ

เราตอบสนองต่อการคลิกที่องค์ประกอบที่มีระดับของการยืนยันที่ก่อให้เกิดในกรณีนี้ชุดของวิธีการเกี่ยวกับองค์ประกอบที่มี id = ยืนยัน การเริ่มต้นให้เพิ่มความโปร่งใส (แต่ก็ยังองค์ประกอบตั้ง display: none) จากนั้นใช้วิธีการ Fadein, jQuery ต่อเนื่องย้ายจาก display: none เพื่อความทึบแสง: 0.95 (ในกรณีของเรา) ในที่สุดภายในองค์ประกอบของ # ยืนยันโหลดโค้ด html สอง divami ของเราซึ่งจะอยู่ภายในส่วนหัวของปุ่ม H1 และสองปุ่ม ในขณะที่คุณอาจจะได้สังเกตเห็นหนึ่งของพวกเขารวมทั้งมีการประกาศเหตุการณ์ onClick ซึ่งจะตอบสนองกับผู้ใช้ยืนยันบวกprzekierowywującเขาไปสถานที่ที่แสดงให้เห็นการเชื่อมโยงการคลิก

กลับเท็จเหตุผลที่ส่วนท้ายของบล็อกของรหัสนี้? เบราว์เซอร์เราไม่เปลี่ยนเส้นทางโดยอัตโนมัติโดยคลิกที่ลิงค์, ฟังก์ชั่นของเราต้องกลับเท็จมิฉะนั้นจะเปลี่ยนเส้นทางและหน้าต่างจะยืนยันหัวข้อ

หากคุณคลิกที่ใดก็ได้อื่นกว่าในปุ่มของ "YES" ใช้ Fadeout เหตุการณ์ (), บล็อกจะหายไปอย่างไร้รอยต่อด้วยการยืนยันที่ตระหนักถึง $ ("# ยืนยัน") ของเรา. คลิก (... )

รหัสที่เขียนทั้งควรมองอะไรเช่นนี้ 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"> <html
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 ยืนยันโต้ตอบ <title> </ title>
 type="text/css"> <style
 <! -
 * {margin: padding, 0px: 0px;}
 ร่างกาย {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * ยืนยัน * /
 # ยืนยัน {display: none; position: absolute; ความสูง: 100%; ความกว้าง: 100%; พื้นหลัง: # 000; ชั้น: 0; ที่ยังเหลือ: 0;}
 # ยืนยัน {height: แสดงออก ((&& (window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] แม็กซ์ ().: document.documentElement.scrollHeight) + 'PX'); ความกว้าง: นิพจน์ ((&& (window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth เอกสาร, . documentElement.clientHeight] สูงสุด (): document.documentElement.scrollWidth) + 'PX');}
 # ยืนยัน [id] {position: ถาวร;}
 # ยืนยัน div {padding: 10px; margin-top: 200px;}
 div div # ยืนยัน {background: # 900c0c; กว้าง: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # ยืนยัน div div h1 {font-size: 18px; color: # FFF;}
 # ยืนยัน div div p {padding: 20px;}
 ->
 </ style>
 <หัว />
 <body>
 <p>
 จำ dolor นั่ง amet, consectetur adipiscing ยอด  Quisque ultrices quis Orci nisl  Aliquam ที่ dolor  Sed Quam Leo consequat AC  Curabitur SEM Fringilla sodales  Praesent eleifend mauris AC ante ภาษิต aliquet  Sapien Etiam โมฆะ consequat eget, consequat Vitae, molestie id, Lectus  ใน HAC habitasse platea dictumst  Aliquam feugiat Lectus odio AC  Suspendisse Varius egestas nisl  null Morbi  Pellentesque aliquet Felis interdum  Vestibulum Libero euismod luctus  Suspendisse Enimem sodales interdum  Pellentesque Orcia  Nulla Massa nunc, eleifend aka, eleifend Varius, กอง eget, Leo  Vestibulum ante ipsum primis ใน faucibus Orci et ultrices posuere luctus cubilia Curae; <br/> ขอ
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim Quam ligula ที่ ligula  Nulla ภาษิต purus interdum  odio Aenean  pretium Vestibulum  Phasellus Enimem Enimem, Semper aliquet, Libero Tempus AC, rutrum gravida,  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, Leo  ใน Metus id  rutrum Vivamus  velit Nulla NEC  Nisi ยูทาห์ purus, Porta ที่, tincidunt นั่ง amet, scelerisque pulvinar, SEM  Risus adipiscing Sed  ใน nisi  อัล Augustin et  Phasellus ullamcorper quis โกศ Lacus Tempus dapibus  ถิติ eget Sed  Etiam TELLUS erat, adipiscing NEC, sed placerat, ultricies, Orci  Lectus Cras AC  ซึ่งมิได้จัดประเภท Curabitur Mattis Lorem ไร้มาตรฐาน  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> turpis aliquet iaculis
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" type="text/javascript"> <script </ script>
 <script type="text/javascript">
 $ (เอกสาร). พร้อม (function () {
 $ (". ยืนยัน"). คลิก (function () {
 $ ("# ยืนยัน")
 . Css ({opacity: 0.95})
 Fadein. ()
 . Html ('<div> <div> <h1> เปลี่ยนเส้นทาง </ h1> <p <ปุ่ม onClick = \ "location.href = \'' + $ (นี้). attr (" href ") +' \ '\ "> ใช่ปุ่ม </> <button> ไม่ปุ่ม </> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# ยืนยัน") คลิกที่ (function () {$ (นี้) Fadeout ();.});
 });
 </ script>
 </ body>
 </ html>

ข้อมูลอย่างย่อ

การทำงานตัวอย่างเช่นคุณสามารถดู ที่นี่ .

วิธีการแก้ปัญหาตัวอย่างนี้ไม่จำเป็นต้องเป็นไปได้ทั้งหมด เราสามารถขยายรหัสเพื่อที่จะส่งผลกระทบต่อฟอร์มการยืนยันแล้วคุณจะส่งการควบคุมรูปแบบที่ยังสามารถทำจากภายใน jQuery. คุณยังสามารถบนพื้นฐานของรหัสข้างต้นที่จะสร้างปลั๊กอินสำหรับ jQuery รู้สึกฟรีเพื่อหารือในความเห็นที่โพสนี้

เป็นหุ้น, เข้ากับคนง่าย!

รายการที่เกี่ยวข้อง

หมวดหมู่: jQuery
Tags: , , , ,
«
»
คุณสามารถปฏิบัติตามคำตอบใด ๆ ที่รายการนี้ผ่านทางฟีด RSS 2.0 . นอกจากนี้คุณยังสามารถเขียน ความเห็นของคุณเอง หรือ ที่จะเชื่อมโยง ไปยังบทความนี้ในหน้าของคุณ