آموزش طراحی وب

نحوه استفاده از جی کوئری ؟

در جلسه ی گذشته راجع به انواع کتابخانه های جی کوئری توضیح داده شد ، در این جلسه نحوه استفاده از هر کتابخانه را توضیح خواهیم داد .

نحوه استفاده از جی کوئری ؟

فصل اول (مبانی جی کوئری)

جلسه دوم ( نحوه استفاده از جی کوئری ؟)

در جلسه ی گذشته راجع به انواع کتابخانه های جی کوئری توضیح داده شد ، در این جلسه نحوه استفاده از هر کتابخانه را توضیح خواهیم داد .

نحوه استفاده از کتابخانه Jquery

جهت استفاده از کتابخانه جی کوئری و امکانات آن ابتدا باید آن را از سایت Jquery.com دانلود نمایید . سه مدل برای دانلود وجود دارد :

Minified   فایل فشرده شده ی کتابخانه می باشد که حجم آن ۱۵ کیلوبایت است .

Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.

Packed : حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده شده .

پیشنهاد ما برای دانلود jquery.min یعنی مدل  Minified  می باشد ، زیرا سرعت لود بالاتری نسبت به دیگر مدل ها دارد .

جهت استفاده از جی کوئری پس از دانلود آن را در صفحه فراخوانی می نمایید .  دستور فراخوانی این کتابخانه به صورت زیر می باشد :

<script type=”text/javascript” src=”jquery.min.js”></script>

پس از فراخوانی آن در صفحه می توانید از پلاگین های مختلف جهت برطرف نمودن نیاز خود استفاده کنید .

نکته قابل توجه این است که برای استفاده از هر گونه پلاگین جی کوئری باید ابتدا کتابخانه آن را در ابتدای کدهای جی کوئری فراخوانی نمود .

در صورتی که بخواهید بدون استفاده از پلاگین های خاص توسط دستورهای جاوااسکریپتی برخی از Function های کتابخانه را فراخوانی نمایید می توانید به دو روش عمل نمایید :

روش Inline : در این روش کدهای جاوا اسکریپت بین دو تگ <script></script> در ابتدا و یا انتهای صفحه نوشته می شود  . به عنوان مثال :

 روش External : در این روش که ما هم این روش را پیشنهاد می کنیم ، شما تمامی کدهای جاوااسکریپتی خود را در یک صفحه js نوشته و سپس در صفحه وب ، همانند کتابخانه جی کوئری فراخوانی می کنید . بخاطر داشته باشید که فایل خود را پس از کتابخانه جی کوئری فراخوانی نمایید . به عنوان مثال :

نحوه استفاده از کتابخانه Jquery-ui

برای استفاده از این کتابخانه ابتدا آن را از http://jqueryui.com دانلود کنید . علاوه بر این می توانید بصورت optional گزینه های مورد نیاز خود را انتخاب کرده و کتابخانه jqueryui را ایجاد و سپس دانلود نمایید . برای ایجاد کتابخانه JqueryUi بصورت Optional می توانید به لینک http://jqueryui.com/download مراجعه نمایید . قابل ذکر است که این فریم ورک همراه با کتابخانه jquery ورژن ۱.۶ به بالا عمل می کند . بعد از دانلود کتابخانه آن را از حالت zip خارج کنید ، پوشه ی دانلود شده شامل پوشه های زیر می باشد :

  • /css/
  • /development-bundle/
  • /js/
  • index.html

برای استفاده از این کتابخانه در هر صفحه ای شما نیاز به فراخوانی این سه فایل دارید :

پس از اینکه شما فایل های ضروری را در صفحه ی وب خود قرار دهید ، می توانید انواع ویجت ها را به راحتی به صفحه وب خود اضافه کنید . به عنوان مثال برای استفاده از datepicker که در تصویر زیر مشاهده می کنید ، تنها یک input قرار میدهیم و از تابع .datepicker() استفاده می کنیم .

datepicker

کد input را در تگ body قرار می دهیم و کد جی کوئری آن را در فایل js  صفحه :

با دو خط کد بالا می توانیم یک datepicker حرفه ای در سایت خود لحاظ کنیم .

نحوه استفاده از کتابخانه Jquery-mobile

برای استفاده از این کتابخانه ابتدا آن را از http://jquerymobile.com دانلود کنید . در تگ <head> متاتگ viewport رو قرار دهید ، استایل مربوط به ورژن دانلود شده را نیز فراخوانی کنید ، سپس کتابخانه Jquery و در انتها کتابخانه Jquery-mobile را فراخوانی می کنیم . قابل ذکر است که این فریم ورک همراه با کتابخانه jquery ورژن ۱.۷.۰ تا ۱.۸.۲ عمل می کند .سپس در تگ <body> یک <div> با data-role با مقدار page به عنوان wrapper برای ترسیم یک صفحه قرار میدهیم . در wrapper برای Header Bar ها و یا عناوین باکس ها از یک <div> با data-role با مقدار header استفاده می کنیم ؛ برای محتوا از یک <div> با data-role با مقدار content و برای فوتر از یک <div> با data-role با مقدار footer استفاده می کنیم .

برای درک بهتر کد زیر را مشاهده فرمایید :

 این فریم ورک شامل سری کامل element های html می باشد که با استفاده از attribute های تعریف شده در jquery-mobile می توان به راحتی یک ویجت با طراحی touch friendly ایجاد کرد که شامل button ها ، input ها ، Slider ها ، sidebar ها و … باشد . به عنوان مثال برای طراحی دکمه های زیر تنها چند خط کد لازم است که در زیر تصویر مشاهده می فرمایید .

jquery mobile buttons

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

 

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

برای درک بهتر این جلسه می توانید فایل پیوست را دانلود نمایید .

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۱

    • خیلی ممنون
      از چه لحاظ ضعیفه دوست گرامی؟ بفرمایید تا اگر امکان داشت تو نسخه ی بعد اصلاح کنیم .
      باتشکر

  • درود
    ممنون از بابت وقتی که جهت آموزش ها میکشید
    سوالی داشتم
    بنظر شما استفاده از جی کوئری موبایل جهت طراحی سایت و نرم افزار های تحت وب مناسب هست یا همچین کارایی ندارد البته در کنار php

    • سلام دوست عزیز
      از کتابخانه جی کوئری موبایل برای ویجت های موبایل استفاده میشه.
      موفق و پاینده باشید

  • سلام آقای همت یار ۲ تا سوال داشتم ازتون ممنون می شم جوا بدید ۱- برای اعتبار سنجی فرم با جیکوئری چه رویدای رو استفاده کنم برای دکمه سابمیت که اول چک کنه توابعی رو که نوشتیم و بعد اگه معتبر بود فرم رو ارسال کنه ۲- میشه در یه المنت دو تابع رو فراخوانی کرد با تشکر

    • سلام دوست عزیز
      برای سوال اولتون مقاله ای هست که میتونید مطالعه بفرمایید . دیروز در سایت ارسال کردم :
      goo.gl/1AEtU8
      سوال دومتون رو متوجه نشدم ، مثال بزنید.

  • سلام خیلی مفید بود با تشکر از شما و تیم خوبتون که همچنین مطالبی رو آموزش می دهند سپاس.

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین