جی کوئری: پیدا کنید ()
جی کوئری یک چهارچوب جاوا اسکریپت است. اگر شما فرصتی برای کار کردن با او را نداشته است، من امیدوارم که انتشار، شما را تشویق به استفاده از این راه حل خاص است. از آنجا که آن را با سرعت مشخص، بهینه سازی کد را به جای او به عنوان مرورگر نیز، که احتمالا بسیاری از جالب ترین - آسان برای ایجاد راه حل های پیچیده است.
در مقاله امروز تمرکز بر روی یک روش بسیار مفید ().
اگر شما با این چارچوب خرید و فروش، می خواهم شما را به خودتان آشنا با اصول اولیه از انتخابگرها را، با استفاده از API رسمی در selectorów در ، یا با آماده شده توسط Bartosz Medonia از jQuery دوره اصول . این دانش تا حد زیادی به درک درستی از راه حل های ارائه شده در اینجا را تسهیل می کند.
بهترین را دریافت برخی از مثال عینی از این روش اجازه. در اکثر صفحات، یکی از عناصر اساسی برای ناوبری منو. ما سعی خواهد کرد خود منو های متحرک با استفاده از کمترین تعداد قطعات و عامل تحت هر مرورگر است که پشتیبانی از جاوا اسکریپت ایجاد کنید.
اول آماده سازی از عناصر
بیایید شروع شده توسط ایجاد یک سند 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> این </ BODY> </ HTML>
سپس آخرین نسخه jQuery را از سایت رسمی این پروژه (تولید) گرفتن و کپی آن را به یک پوشه از فایل های HTML ما.
در این سند، می تواند نمونه برخی از مطالب و منو استفاده کنید. برای این تگ DIV و طول مورد استفاده قرار می گیرد. البته، موارد در منوی ما، باید لینک، بنابراین آنها را با قرار دادن در یک بلوک. کل داخل DIV بلوک با شناسه منو = قرار داده است. اضافه شدن فایل را با استفاده از تگ اسکریپت جی کوئری. کل باید چیزی شبیه به این:
<div id="menu"> <div> است عکاس هنگام عکسبرداری از # 1 منوی </ P> های SPAN، یک عکاس هنگام عکسبرداری # 1.1 منوی </ P> یک عکاس هنگام عکسبرداری # 1.2 منوی </ P> یک عکاس هنگام عکسبرداری # 1.3 منوی </ P> </ P> </ P> <div> است یک عکاس هنگام عکسبرداری # 2 منوی </ P> های SPAN، یک عکاس هنگام عکسبرداری # 2.1 منوی </ P> یک عکاس هنگام عکسبرداری # 2.2 منوی </ P> یک عکاس هنگام عکسبرداری # 2.3 منوی </ P> یک عکاس هنگام عکسبرداری # 2.4 منوی </ P> یک عکاس هنگام عکسبرداری # 2.5 منوی </ P> </ P> </ P> <div> است یک عکاس هنگام عکسبرداری # 3 منو </ P> های SPAN، یک عکاس هنگام عکسبرداری # 3.1 منوی </ P> یک عکاس هنگام عکسبرداری # 3.2 منوی </ P> یک عکاس هنگام عکسبرداری # 3.3 منوی </ P> یک عکاس هنگام عکسبرداری # 3.4 منوی </ P> </ P> </ P> <div> است یک عکاس هنگام عکسبرداری # 4 منو </ P> های SPAN، یک عکاس هنگام عکسبرداری # 4.1 منوی </ P> یک عکاس هنگام عکسبرداری # 4.2 منوی </ P> </ P> </ P> </ P> <- پایان: منو -> برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. برخی از مطالب نمونه. <script type="text/javascript" src="jquery.js"> </ html>
بخصوص بسیاری از موارد منو قرار دهید برای نشان دادن چه آسان به بسیاری از آنها از جی کوئری تجدید نظر، با توجه به بلوک که ما حرکت ماوس است.
دوم تعریف ظاهر منو (CSS)
در این بخش، نگاه مورد استفاده در بلوک های فایل HTML کد، تعریف کنیم. من خودم آماده شده، کد زیر را به سبک، واقع در بخش سر
<style type="text/css"> <- * {حاشیه: 0px، بالشتک: 0px؛} {متن دکوراسیون: هیچ کدام، فونت: 20px گرجستان، "بار جدید روم"، بار، سریف؛} HTML، بدن {حاشیه: 10px؛} منوی # {: 0px؛ شناور: سمت چپ، عرض: 100٪؛} DIV # منو {درجه کاربری: نسبی. شناور: سمت چپ؛} DIV # منو فعال، DIV # منو لینک، DIV # منو: بازدید {نمایش: بلوک موقعیت: نسبت تراز عمودی: متوسط. سابقه و هدف: # CCC؛ رنگ: # FFF؛ پد: 5px 10px؛ عرض: 150px؛} DIV # منو به Hover: {سابقه و هدف: # 999؛} DIV # منو دهانه {نمایش: هیچ کدام. موقعیت: مطلق، از بالا: 100٪؛ چپ: 0؛ شناور: هیچ؛} DIV DIV # منو فعال، منوی DIV DIV: لینک، DIV # منو طول: بازدید {درجه کاربری: نسبی است. نمایش: بلوک. شناور: سمت چپ بالا: 0px؛ سابقه و هدف: DDD رنگ: # FFF؛ پد: 5px 10px عرض: 150px؛ DIV DIV # منو: شناور {سابقه و هدف: # 999؛} -> </ سبک>
در مثال ما، منو تنها ساده دو سطح ایجاد می کنیم، اما هیچ چیز در راه به آنها تغییر و انطباق با هر تعداد از سطوح وجود دارد.
اگر ما در این نقطه هستید، شما همچنین باید به اشاره چارچوب برای ایجاد منو css'owego .
سوم ناخن از برنامه -.
با چنین اقداماتی، ما آماده برای پیاده سازی یک صفحه کامل کد های جاوا اسکریپت. ما همچنین می دانیم، به عنوان ذکر شد، گفت: انتخاب. در مورد ما، به عنوان مثال کاملا ساده است، چرا که تنها چهار منوی اصلی وجود دارد، اما آن را سخت تصور که ممکن است وجود دارد، و هر یک می تواند شاخه های متعدد داشته باشند. این disqualifies روش حلقه، نیز مستثنی brute-force استفاده، پس از بررسی تمام موارد به طور جداگانه. اما به لطف استفاده از روش پیدا کردن، مشکل جوش به یک خط بسیار روشنی از کد است که اجرای کل کار را برای ما. خوب است که کد جاوا اسکریپت ما را در (سند). آماده شود، تضمین ما به آن اشاره هنگامی که صفحه لود تمام اسکریپت خارجی، سبک ها و فایل های دیگر است.
<script type="text/javascript"> <- / / <! [CDATA [ $ (سند). آماده (تابع () { $ ("DIV منو #"). شناور ( تابع () { $ () ("طول") CSS SlideToggle ({کدورت: 0.98}) ("سریع")؛ } تابع () { $ () ("طول") SlideToggle ("سریع")؛ } )؛ })؛ / /]]> -> </ SCRIPT>
کد بالا من توصیه به قرار دادن تگ اسکریپت، که ما در مراجعه به جی کوئری، در پایین است.
در انتخاب اصلی، به تگ ID = "menu" است، که در داخل یک div وجود دارد مراجعه کنید. روش. شناور ()، به معنای وقوع حمله موس، قلم دوم از اقلام انتخاب شده و به عنوان پارامتر می کند، یک یا دو عملکرد است که در شروع این رویداد انجام شده است. ویژگی دوم اختیاری است و هنگامی که ماوس را ترک منطقه از عناصر ما انجام می شود. سعی کردم به معرفی کد به طوری که هر دو از توابع شفاف به خواننده، اما من توصیه به حداقل رساندن کد موجود در پروژه.
اجازه بدهید ما در حال حاضر تجزیه و تحلیل کد داخل تابع. باز هم، در اینجا انتخاب، این زمان ما اشاره به این موضوع است که در آن زندگی می کنیم ما استفاده کنید. هر گرداند انتخابگر جی کوئری، که می تواند از این بند است. اما اگر شما در داخل این عنصر را می خواهم، در داخل یک آیتم به آیتم مراجعه کنید، استفاده از روش های که پیدا کرد و تمام عناصر تطبیق شده را به عنوان پاسخ برمی گرداند. این را در ذهن، چرا که اگر شما می خواهید برای اشاره به یک مورد خاص، شما را مانند یک کلاس استفاده کنید و پس از درخواست تجدید نظر است. (". ClassNazwa"). البته، در داخل پیدا کنید، ما نیز ممکن است به عناصر ساختار پیچیده تر مراجعه کنید، و همچنین انتخابگرهای جی کوئری.
اولین ویژگی همانطور که می بینید، تغییر پیدا کردن روش را برمی گرداند یک شی و تغییر شفافیت آن، و سپس استفاده از slideToggle روش () آغاز انیمیشن، در این مورد، آن انیمیشن است، "نزولی" به پایین، که تعیین پارامتر برای نمایش ندارد هیچ در تنظیمات عنصر (عنصر نامرئی است، بنابراین حرکت دادن تنها چیزی که می تواند انجام دهد این است که آن را نشان می دهد).
در ویژگی دوم، همه چیز بسیار مشابه به نظر می رسد، به جز که ما دیگر نیازی به تغییر کدورت، چون در حال حاضر تغییر یافته است. ما آن را در جی کوئری انجام داد، از جمله به دلیل در CSS نه خواهد بود که ممکن است، در چنین راهی برای رسیدن به انطباق کامل با اعتبار سنج W3C، و به درستی که شفافیت در تمام مرورگرهای مدرن است که جاوا اسکریپت پشتیبانی نمایش داده شد.
4 خلاصه
هدف از این مقاله، آن را یادگیری چگونگی ایجاد منو های متحرک، اما آشنا شدن با بسیاری از مسائل جالب توجه در مورد روش پیدا کردن ()، و همچنین از jQuery. فرصت های بزرگ، و من امیدوارم که پس از خواندن این مقاله، آن را به علاقمندان به چند دست آوردن.
در حالی که اثر کار ما، ما می توانیم از تظاهرات را ببینید .
مقاله بسیار خوب - روش بسیار مفید توصیف جی کوئری، و کاملا عملی به عنوان مثال. همه روشن و دلپذیر، من منتظر برای هنرمندان بعدی