پنجشنبه، دسامبر 4th، 2008
بدون نظر

جی کوئری: پنجره تایید

ما همچنان موضوع از جی کوئری استفاده عملی. امروز من برای نوشتن یک پنجره تایید عملیات در پنل مدیریت. در مورد به نظر می رسد ساده باشد و می تواند موضوع را حل شده است، فراموش کردن جاوا اسکریپت (تکرار) و یا پی اچ پی، اما لذت نهفته در چگونگی انجام این کار نمی شود و حتی این که نتیجه بسیار مناسب و معقول بود؟
من سعی خواهد کرد به ارائه یک راه حل نمونه برای این مشکل، فرض کنید که عنصر را که ما می خواهیم همراه با تایید توسط کاربر، یک لینک است.

اول نمونه فایل های HTML

ما با یک فایل است که بر روی ما انجام آزمایشات مورد تاخت وتاز ما شروع از: 

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 انتقالی / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html؛ charset=utf-8" />
 <title> تایید محاوره ای </ TITLE>
 </ سر>
 <body> این
 <P>
 Lorem ipsum ناله تحصن آمت، consectetur نخبگان adipiscing.  quis nisl Quisque ultrices Orci.  Aliquam در اندوه.  به SED quam consequat AC لئو.  Curabitur Fringilla sodales SEM است.  Praesent eleifend mauris AC و حول و حوش aliquet حکم.  Sapien Etiam تهی، consequat eget، consequat تاریخچه مختصری از زندگی، molestie شناسه (شماره)، Lectus.  در HAC habitasse platea dictumst.  Aliquam feugiat odio AC Lectus.  Suspendisse egestas nisl varius.  Morbi تهی.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc، eleifend مستعار، eleifend varius، eget کانگ، لئو.  Vestibulum حول و حوش ipsum primis در faucibus Orci و همکاران ultrices posuere luctus cubilia Curae. <br/> با
 Aliquet Cras، quis ligula rutrum accumsan lorem velit lorem dignissim و fermentum dignissim quam ligula در ligula.  Nulla حکم purus interdum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem، سمپر aliquet، tempus AC، rutrum تعداد بارداری، libero.  Etiam neque odio، blandit NEC، suscipit با نام مستعار، scelerisque Pellentesque، لئو.  در Metus شناسه.  Vivamus rutrum.  Nulla NEC velit.  دانشگاه تهران purus Nisi، در porta، آمت tincidunt تحصن، scelerisque pulvinar، SEM.  SED Risus adipiscing.  nisi.  آگوستین و دیگران.  Phasellus ullamcorper quis کوزه tempus dapibus Lacus.  SED تخمین eget  Etiam tellus erat، adipiscing NEC، placerat SED ultricies Orci،.  Cras AC Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> حامی و حافظ علم و ادب </ A> aliquet iaculis turpis.
 </ P>
 <id="confirm"> </ P>
 </ BODY>
 </ HTML>

نمونه ژنراتور متن Lorem ipsum ، رفت داخل ص. مدت کوتاهی قبل از تگ بسته شدن بدن، DIV # تایید، که در آن وجود خواهد داشت کد از پنجره ما را به تایید قرار داده است.

دوم لایه ارائه

اجازه دهید ما را در تمرکز بر روی پنجره ما. در مورد من، کد HTML غیر فعال خواهد شد که مسئول تمام پنجره، به عنوان شرح زیر است: 

  <div id="confirm">
 <div> است
 <div> است
 های <h1> آیا شما مطمئن هستید که می خواهید این آیتم را حذف کنید </ H1>
 <P> <button onClick="location.href='TUTAJ محتویات عکاس هنگام عکسبرداری از LINKU'"> بله </ را فشار دهید> <button> نه </ را فشار دهید> </ P> آمار
 </ DIV> <- پایان # DIV DIV تایید ->
 </ P> <- پایان # DIV تایید ->
 </ DIV> <- پایان # تکرار ->

کد داخل تایید #، جاوا اسکریپت تولید شده است. اما با توجه به ارزش چرا به نظر می رسد فقط می خواهم که و به همین دلیل در پایین صفحه کد است؟

بیایید با دلایل از جمله کد در پایان. برای تعیین موقعیت مطلق، برای تایید #، بدون Z-پارامتر اول، دنباله ای از اشیاء از موقعیت: مطلق، از آن خواهد شد که در آن توسط مرورگر ایجاد شده مطابقت داشته باشد. تاریخ و زمان آخرین وارد شده، وجود خواهد داشت بیش از یک پشته از لایه های با درجه کاربری: مطلق، بنابراین اگر برای مثال، در همان ابعاد، ماسک لایه، که ظاهر شده در کد قبل از آن.

چرا تایید داخل، ما دو بار یک div قرار می گیرد؟ برای روشن کردن این نکته است، فقط بخش کد CSS خود را که شما در داخل بخش head قرار: 

  <style type="text/css">
 <-
 * {حاشیه: 0px، بالشتک: 0px؛}
 بدن {حاشیه: 10px؛}
 P {عرض: 600px؛ حاشیه: 0 خودکار، خط ارتفاع: 25px؛}

 / * تکرار * /
 # {:: مطلق، ارتفاع: 100 عرض: 100٪؛ سابقه و هدف: # 000؛: 0؛ چپ: موقعیت هیچ نمایش 0؛} تکرار
 # تکرار {ارتفاع: عبارت (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight، document.documentElement.scrollHeight document.body.offsetHeight، document.documentElement.clientHeight] مکس (): document.documentElement.scrollHeight) + 'پیکسل')؛ عرض: عبارت (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth، document.documentElement.scrollWidth، document.body.offsetWidth، سند. documentElement.clientHeight] حداکثر (): document.documentElement.scrollWidth) + 'پیکسل')؛}
 # [ID] تکرار {درجه کاربری: ثابت؛}
 # DIV {: حاشیه بالا 10px: بالشتک 200px؛} تکرار
 # تکرار DIV DIV {سابقه و هدف: # 900c0c عرض: 500px؛ حاشیه: 0 خودکار مرز: 1px جامد # CCC. سرریز: مخفی.}
 # DIV DIV H1 تکرار {:؛ رنگ 18px: فونت، اندازه # FFF؛}
 # DIV DIV P {: 20px پد؛} تکرار
 ->
 </ سبک>

# معرفی می تأیید پس زمینه است که "برای پوشش دادن کل صفحه. خط 2، (با ارتفاع عجیب و غریب و عرض است)، لازم است در مورد اینترنت اکسپلورر. # تکرار [ID] فهم فقط مرورگرهای مدرن، و این برنامه به پس زمینه پنجره ما بود شد اندازه 100٪ به 100٪ و اجرا می شود در طول زمان با سایت (برای اینترنت اکسپلورر است که در هر مورد بر اساس عرض و ارتفاع پنجره محاسبه).

اولین DIV لازم است به مرکز 2 و فاصله را از پنجره بالا بر روی حاشیه بالا. DIV دوم در حال حاضر فراهم می کند پنجره برای تایید است که می تواند متمرکز است، آن را به عنوان عنصر درون بلوک با عرض: 100٪ (مقدار استاندارد برای یک عنصر را با صفحه نمایش: بلوک - که یک div است)

سوم زمان برای از jQuery

آن باقی مانده است برای ما به کلیک بر روی لینکی که به نظر می رسد در پایان بلوک P، که در lorem ipsum'a قرار داده است، واکنش نشان می دهند: 

  <a href="http://poslinski.net" class="confirm"> حامی و حافظ علم و ادب </ A>

در مورد ما، تمام لینک ها با تایید کلاس، به اسکریپت واکنش نشان می دهند. شما می توانید اذعان ما به تمام لینک های درخواست، برای از بین بردن ارزش را از پایگاه داده است.

از آن نیاز به کدهای جاوا اسکریپت است که در پایین صفحه قرار می گیرد: 

  SRC = "jquery.js" <script type="text/javascript"> </ script> نمایش
 <script type="text/javascript">
 $ (سند). آماده (تابع () {
 ("تکرار") کلیک کنید (تابع () {
 ("تکرار")
 است. CSS ({کدورت: 0.95})
 است. FadeIn ()
 است. اچ تی ام ال ('<div> است عنصر <div> های <h1> تغییر مسیر </ H1> <p <زد، دکمه = \ "location.href = \" + (این). Attr ("عکاس هنگام عکسبرداری) +' \ \ "> بله </ را فشار دهید> <button> نه </ را فشار دهید> </ P> </ DIV> </ DIV> ')؛
 بازگشت به کاذب؛
 })؛
 $ ("# تکرار") (تابع () {$ (این) عادی ()؛})؛
 })؛
 </ SCRIPT>

اولین خط از jQuery بار.

سپس، شعبه اصلی ما کد $ (سند) آماده شود، کد خود را فعال کنید، بعد از لود صفحه.

ما به کلیک کردن بر روی این عنصر با تایید کلاس، باعث یک سری از روش عنصر با ID = تایید در این مورد پاسخ دهند. برای شروع، شفافیت اضافه کنید (اما هنوز هم قرار است به یک عنصر نمایش ها: None)، سپس با استفاده از روش fadeIn، جی کوئری یکپارچه از صفحه نمایش حرکت می کند: هیچ یک برای کدورت: 0.95 (در این مورد). در نهایت، در داخل عنصر # تایید، بار کد HTML غیر فعال دو divami، که در داخل H1 دکمه های هدر و دو دکمه قرار می گیرد. همانطور که شما احتمالا متوجه شده اند که یکی از آنها، به علاوه آنها اعلام رویداد زد، که به تایید کاربر مثبت واکنش نشان می دهند، او را przekierowywując به جای نشان داد که لینک کلیک.

چرا بازگشت کاذب در پایان این بلوک از کد؟ به مرورگر، ما هدایت نه به طور خودکار، با کلیک کردن بر روی لینک، عملکرد ما باید بازگشت کاذب، در غیر این صورت آن را هدایت و پنجره را تایید خواهد شد موضوعات.

اگر شما با کلیک بر روی هر نقطه دیگری از دکمه "بله" است، استفاده از عادی رویداد ()، بلوک یکپارچه را محو خواهد شد با تایید ما، که متوجه $ ("# تایید"). کلیک کنید (...).

کل کد نوشته شده باید چیزی شبیه به این: 

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 انتقالی / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html؛ charset=utf-8" />
 <title> تایید محاوره ای </ TITLE>
 <style type="text/css">
 <-
 * {حاشیه: 0px، بالشتک: 0px؛}
 بدن {حاشیه: 10px؛}
 P {عرض: 600px؛ حاشیه: 0 خودکار، خط ارتفاع: 25px؛}

 / * تکرار * /
 # {:: مطلق، ارتفاع: 100 عرض: 100٪؛ سابقه و هدف: # 000؛: 0؛ چپ: موقعیت هیچ نمایش 0؛} تکرار
 # تکرار {ارتفاع: عبارت (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight، document.documentElement.scrollHeight document.body.offsetHeight، document.documentElement.clientHeight] مکس (): document.documentElement.scrollHeight) + 'پیکسل')؛ عرض: عبارت (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth، document.documentElement.scrollWidth، document.body.offsetWidth، سند. documentElement.clientHeight] حداکثر (): document.documentElement.scrollWidth) + 'پیکسل')؛}
 # [ID] تکرار {درجه کاربری: ثابت؛}
 # DIV {: حاشیه بالا 10px: بالشتک 200px؛} تکرار
 # تکرار DIV DIV {سابقه و هدف: # 900c0c عرض: 500px؛ حاشیه: 0 خودکار مرز: 1px جامد # CCC. سرریز: مخفی.}
 # DIV DIV H1 تکرار {:؛ رنگ 18px: فونت، اندازه # FFF؛}
 # DIV DIV P {: 20px پد؛} تکرار
 ->
 </ سبک>
 </ سر>
 <body> این
 <P>
 Lorem ipsum ناله تحصن آمت، consectetur نخبگان adipiscing.  quis nisl Quisque ultrices Orci.  Aliquam در اندوه.  به SED quam consequat AC لئو.  Curabitur Fringilla sodales SEM است.  Praesent eleifend mauris AC و حول و حوش aliquet حکم.  Sapien Etiam تهی، consequat eget، consequat تاریخچه مختصری از زندگی، molestie شناسه (شماره)، Lectus.  در HAC habitasse platea dictumst.  Aliquam feugiat odio AC Lectus.  Suspendisse egestas nisl varius.  Morbi تهی.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc، eleifend مستعار، eleifend varius، eget کانگ، لئو.  Vestibulum حول و حوش ipsum primis در faucibus Orci و همکاران ultrices posuere luctus cubilia Curae. <br/> با
 Aliquet Cras، quis ligula rutrum accumsan lorem velit lorem dignissim و fermentum dignissim quam ligula در ligula.  Nulla حکم purus interdum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem، سمپر aliquet، tempus AC، rutrum تعداد بارداری، libero.  Etiam neque odio، blandit NEC، suscipit با نام مستعار، scelerisque Pellentesque، لئو.  در Metus شناسه.  Vivamus rutrum.  Nulla NEC velit.  دانشگاه تهران purus Nisi، در porta، آمت tincidunt تحصن، scelerisque pulvinar، SEM.  SED Risus adipiscing.  nisi.  آگوستین و دیگران.  Phasellus ullamcorper quis کوزه tempus dapibus Lacus.  SED تخمین eget  Etiam tellus erat، adipiscing NEC، placerat SED ultricies Orci،.  Cras AC Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> حامی و حافظ علم و ادب </ A> aliquet iaculis turpis.
 </ P>
 <id="confirm"> </ P>
 SRC = "jquery.js" <script type="text/javascript"> </ script> نمایش
 <script type="text/javascript">
 $ (سند). آماده (تابع () {
 ("تکرار") کلیک کنید (تابع () {
 ("تکرار")
 است. CSS ({کدورت: 0.95})
 است. FadeIn ()
 است. اچ تی ام ال ('<div> است عنصر <div> های <h1> تغییر مسیر </ H1> <p <زد، دکمه = \ "location.href = \" + (این). Attr ("عکاس هنگام عکسبرداری) +' \ \ "> بله </ را فشار دهید> <button> نه </ را فشار دهید> </ P> </ DIV> </ DIV> ')؛
 بازگشت به کاذب؛
 })؛
 $ ("# تکرار") (تابع () {$ (این) عادی ()؛})؛
 })؛
 </ SCRIPT>
 </ BODY>
 </ HTML>

خلاصه

کار به عنوان مثال، شما می توانید اینجا را ببینید .

این راه حل نمونه تمام امکانات نیاز ندارد. Możemy کد ارتقا به عنوان تاثیر می گذارد به صورت تایید، شما پس از ارسال فرم را برای کنترل آنچه که ما به خوبی می تواند انجام دهد از جی کوئری شما همچنین می توانید بر اساس کد بالا برای ایجاد یک پلاگین برای جی کوئری. احساس آزاد به بحث در مورد در نظر در این پست.

اجتماعی سهم سایت

نوشته های مرتبط

دسته ها: جی کوئری
برچسب ها: ، ، ، ،
«
»
شما میتوانید هر پاسخی به این مطلب را از طریق فید دنبال RSS 2.0 . شما همچنین می توانید نظرات خود را بنویسید ، و یا پیوند دادن به این پست را در صفحه خود پست کنید.
    • Obraz CAPTCHY
    فراخوانی تصویر
    *

    هرزنامه محافظت شده توسط WP-SpamFree