طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : jquery

جاوا اسکریپت | طراحی سایت در کرج | طراحی وب سایت در کرج | هلدینگ کیان تجارت فاوا

مزایای جی کوئری بر روی جاوا اسکریپت

مزایای جی کوئری بر روی جاوا اسکریپت

هر دو جاوا اسکریپت و جی کوئری، کتابخانه های اسکریپت سمت سرویس گیرنده هستند که برای انجام وظایف مانند اعتبار سنجی، ایجاد عناصر بصری جذاب مانند منوهای ناوبری فانتزی و غیره استفاده می شوند.

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

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

 

۱٫ jQuery به خوبی ساخته شده و به خوبی سازماندهی شده است

 

jQuery دارای یک جامعه قوی است که در تأیید و فهرست کردن ماژول ها در پورتال رسمی خوب کار می کند. به عنوان مثال در نظر بگیرید که یک برنامه نویس می خواهد از «انتخاب تاریخ» استفاده کند (عنصر Date Picker برای انتخاب یک تاریخ از یک تقویم پاپ استفاده می شود. پس از انتخاب، مقدار تاریخ در یک جعبه متن جایگزین خواهد شد. زمان برای کاربران نهایی)

اگر برنامه نویس جی کوئری را انتخاب کرده باشد، وی به سرعت افزونه را از وب سایت رسمی دانلود می کند. از سوی دیگر، اگر برنامه نویس همان جاوا اسکریپت را انتخاب کرده باشد، در گوگل برای کد جاوا اسکریپت باز شده برای عنصر «انتخابگر تاریخ» جستجو خواهد کرد.

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

راه حل های متداول با jQuery امکان پذیر است که اغلب از جاوا اسکریپت امکان پذیر نیست.

 

۲٫ jQuery نیاز به حداقل تلاش تست شده

قبل از اینکه برای برنامه نویسان در دسترس باشد، اجزای jQuery در تمام مرورگرهای محبوب مانند موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم و غیره مورد آزمایش قرار می گیرند.

از این رو برنامه نویسان نیازی به تست کردن جزء در تمام مرورگرها ندارند. برنامه نویسان لذت بردن از آزادی تست در هر یک از مرورگرها. با این حال، با جاوا اسکریپت، هیچ تضمینی وجود ندارد که این جزء در همه مرورگرها نگاه و رفتار مشابهی داشته باشد.

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

۳٫ jQuery نیاز به تلاش کمتر اشکال زدایی

توابع jQuery مدولار و بسیار قابل خواندن هستند. آنها خلاصه تر از جاوا اسکریپت هستند. به عنوان مدولار و مختصر، اشکال زدایی از کد جی کوئری بسیار ساده تر از جاوا اسکریپت است.

۴٫ jQuery به طور مداوم به روز می شود

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

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

 

Tagged
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | هلدینگ کیان تجارت فاوا

تفاوت های بین JQuery و جاوا اسکریپت

تفاوت های بین JQuery و جاوا اسکریپت

به عنوان یک زبان اسکریپت بسیار محبوب در سمت سرویس گیرنده، جاوا اسکریپت نیازی به معرفی ندارد.

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

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

JQuery یک کتابخانه ی جاوا اسکریپت به طور گسترده ای استفاده می شود. با وجود منبع باز، جی کوئری آسان برای استفاده، سریع و مختصر است. API ارائه شده توسط jQuery به طور یکپارچه در مرورگرهای بزرگ وب کار می کند.

همچنین، کتابخانه جاوا اسکریپت ویژگی های پیشرفته برای توسعه دهندگان وب برای دستکاری اسناد HTML، رسیدگی به رویدادها، ایجاد انیمیشن ها، انتخاب عناصر DOM و ایجاد برنامه AJAX آسان تر می شود. در عین حال، با استفاده از مزایای کتابخانه جاوا اسکریپت، می توان برای ایجاد انواع افزونه ها نیز از jQuery استفاده کرد.

بنابراین، توسعه دهندگان وب مدرن دارای گزینه ای برای استفاده از جاوا اسکریپت و جی کوئری به صورت جداگانه یا کنار یکدیگر هستند. با این حال، برای برنامه نویسان هم مهم است که برخی از تفاوت های اصلی بین جاوا اسکریپت و jQuery را درک کنید.

۴ تفاوت مهم بین جاوا اسکریپت و جی کوئری

۱) زبان برنامه نویسی و کتابخانه

جاوا اسکریپت به عنوان یک زبان برنامه نویسی پویا، سبک های برنامه نویسی شی گرا، ساختار یافته، کاربردی و ضروری را پشتیبانی می کند. توابع کلاس اول و تایپ پویا همچنین جاوا اسکریپت را به عنوان یک زبان برنامه نویسی مبتنی بر پروتوتایپ طبقه بندی می کنند.

از سوی دیگر، jQuery یک کتابخانه جاوا اسکریپت است. چارچوب فناوری اطلاعات، توسعه دهندگان را برای انجام برخی از وظایف وب معمولی مانند دستکاری سند HTML، مدیریت رویداد، انیمیشن، انتخاب عنصر DOM و توسعه برنامه AJAX ساده تر می کند.

۲) زمان اسکریپت

وقتی یک توسعه دهنده وب تصمیم به استفاده از جاوا اسکریپت مستقیم می کند، TEMP برای نوشتن کد اضافی برای انجام چندین وظیفه می نویسد. او همچنین TEMP را برای زمان و تلاش اضافی برای اشکال زدایی و حل مشکلات سازگاری مرورگر قرار داده است.

اما جی کوئری به توسعه دهندگان اجازه می دهد تا از اسکریپت های موجود استفاده کنند. بنابراین آنها می توانند اسکریپت های موجود در jQuery را برای انجام چندین وظایف وب بدون نوشتن خطوط طولانی تر از کد استفاده کنند.

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

۳) ساده سازی اسکریپت های مشتری

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

اما توسعه دهندگان باید خطوط بیشتری را برای نوشتن یک برنامه وب در جاوا اسکریپت مستقیم بنویسند. بنابراین توسعه دهندگان وب اغلب از چارچوب توسعه جاوا اسکریپت برای به کار انداختن توابع اسکریپتی به آسانی و به سرعت استفاده می کنند.

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

پلاگین ها، ویدجت ها و UI های ارائه شده توسط این چارچوب به برنامه نویسان وب کمک می کند که به طور چشمگیری زمان توسعه را کاهش دهند.

۴) عملکرد

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

همانطور که جاوا اسکریپت می تواند به DEM سریع تر TEMPthan jQuery دسترسی پیدا کند، برنامه نویسان می توانند به راحتی هزینه های مرتبط با کتابخانه را محدود کنند.

با این حال، جی کوئری برای توسعه دهندگان برای ساخت وبسایت های با عملکرد بالا و برنامه های کاربردی اینترنت با استفاده از قابلیت های مستقل از مرورگرهای وب، ساده تر می شود.
به طور کلی، جاوا اسکریپت یک زبان برنامه نویسی پویا و ویژگی است، در حالی که jQuery یک کتابخانه از کد جاوا اسکریپت است. توسعه دهندگان جاوا اسکریپت به راحتی می توانند از jQuery برای انجام انواع کارها بدون نوشتن خطوط طولانی تر کد استفاده کنند. با این حال، آنها هنوز هم می توانند از jQuery استفاده کنند بدون آنکه در زبان اسکریپت محبوب طرفدار محبوب باشند. این است که چرا؛ توسعه دهندگان نیاز به انتخاب جاوا اسکریپت یا جی کوئری با توجه به نیازهای خاص پروژه.

Tagged
jQuery | طراحی سایت در کرج | طراحی وب سایت در کرج | هلدینگ کیان تجارت فاوا

مزایای جی کوئری بر روی جاوا اسکریپت

مزایای جی کوئری بر روی جاوا اسکریپت

هر دو جاوا اسکریپت و جی کوئری، کتابخانه های اسکریپت سمت سرویس گیرنده هستند که برای انجام وظایف مانند اعتبار سنجی، ایجاد عناصر بصری جذاب مانند منوهای ناوبری فانتزی و غیره استفاده می شوند.

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

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

۱٫ jQuery به خوبی ساخته شده و به خوبی سازماندهی شده است

jQuery دارای یک جامعه قوی است که در تأیید و فهرست کردن ماژول ها در پورتال رسمی خوب کار می کند. به عنوان مثال در نظر بگیرید که یک برنامه نویس می خواهد از «انتخاب تاریخ» استفاده کند (عنصر Date Picker برای انتخاب یک تاریخ از یک تقویم پاپ استفاده می شود.

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

از سوی دیگر، اگر برنامه نویس همان جاوا اسکریپت را انتخاب کرده باشد، در گوگل برای کد جاوا اسکریپت باز شده برای عنصر «انتخابگر تاریخ» جستجو خواهد کرد. ده ها یا صدها نتیجه از آن خواهد بود که او باید یکی را انتخاب کند.

بیشتر احتمال دارد کد مورد استفاده شما تأیید نخواهد شد. از این رو مشخص می شود که jQuery مطمئنا به خوبی سازماندهی شده و به خوبی ساخته شده است. راه حل های متداول با jQuery امکان پذیر است که اغلب از جاوا اسکریپت امکان پذیر نیست.

۲٫ jQuery نیاز به حداقل تلاش تست شده

قبل از اینکه برای برنامه نویسان در دسترس باشد، اجزای jQuery در تمام مرورگرهای محبوب مانند موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم و غیره مورد آزمایش قرار می گیرند.

از این رو برنامه نویسان نیازی به تست کردن جزء در تمام مرورگرها ندارند. برنامه نویسان لذت بردن از آزادی تست در هر یک از مرورگرها. با این حال، با جاوا اسکریپت، هیچ تضمینی وجود ندارد که این جزء در همه مرورگرها نگاه و رفتار مشابهی داشته باشد.

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

۳٫ jQuery نیاز به تلاش کمتر اشکال زدایی

توابع jQuery مدولار و بسیار قابل خواندن هستند. آنها خلاصه تر از جاوا اسکریپت هستند. به عنوان مدولار و مختصر، اشکال زدایی از کد جی کوئری بسیار ساده تر از جاوا اسکریپت است.

۴٫ jQuery به طور مداوم به روز می شودکتابخانه های جی کوئری به صورت دائمی به روز می شوند.

هر زمان که فن آوری های وب و مرورگرها تکامل پیدا می کند، مسائل سازگاری با کتابخانه های جاوا همیشه وجود دارد. اما این مورد در مورد JQuery نیست. کتابخانه های جی کوئری به طور مداوم به روز شده برای انطباق با تغییرات جدید در فن آوری های وب است که با اسکریپت سمت سرویس گیرنده تعامل دارند.

 

Tagged
جاوا اسکریپت | طراحی سایت در کرج | طراحی وب سایت در کرج | هلدینگ کیان تجارت فاوا

جعبه های انتخاب شده را با جی کوئری انتخاب و تنظیم کنید

جعبه های انتخاب شده را با جی کوئری انتخاب و تنظیم کنید

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

بگذارید بگوییم فرم HTML زیر را داریم.

بعضی از نام ها

میکی موس

اردک دونالد

المر فود

این کاملا یک فرم ساده است. فقط یک سلول از سلول ها در یک فرم پیچیده شده است.

 

ما همچنین در آنجا قرار می دهیم که ما برای نشان دادن کاربر چندین مورد انتخاب می کنیم (فقط در صورتی که نمیتوان آنها را حساب کرد).

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

بیایید ببینید که جاوا اسکریپت چگونه خواهد بود.

اولا، ما باید رویداد کلیک را در جعبه چک کنید. در آن زمان، ما بررسی خواهیم کرد که کادر انتخاب شده در حال حاضر بررسی شود یا نه، و برخی از موارد را براساس وضعیت آن انجام دهید.

$(“input[name=ItemKey]”).click( function() {

if ( $(this).is(“:checked”) ){

// update all table cells in the current row with a class to indicate selection

// these could probably be chained.. let me know if you can do this better $(this).parent().addClass(“selected”);

$(this).parent().siblings().addClass(“selected”);

} else {

// remove the class to stop showing the row is selected

$(this).parent().removeClass(“selected”).addClass(“plain”);

$(this).parent().siblings().removeClass(“selected”).addClass(“plain”);

ChangeSelectedLabel();

});

 

// check if all or no checkboxes were set as checked by server-side script

 

SetToggleCheckBoxFromChildren();

 

بنابراین آنچه در اینجا اتفاق می افتد این است که رویداد کلیک کلاس ها را به سلول ها اعمال می کند تا کاربر را نشان دهد که ردیف انتخاب شده است. برای انجام این کار، عنصر اصلی کادر انتخاب انتخاب می کنیم.

سپس همه بچه های این عنصر را دریافت می کنیم (که باید کل ردیف باشد) و کلاس را به آن سلول ها اختصاص می دهیم. شما می توانید این کلاس را در یک شیوه قرار دهید و آن را فرمت کنید هر چند دوست دارید.

به طور مشابه، اگر کادر انتخاب بر روی رویداد کلیک برداشته شود، این کلاس را حذف میکنیم، به طوری که تمام سلولها در ردیف به سبک پیش فرض بازگشتهاند. این به طور کامل بستگی دارد که چگونه میز خود را سبک کنید.

اگر سلول ها در وضعیت پیش فرض هیچ سبک نداشته باشند، فقط کلاس “انتخاب شده” را حذف کنید، بدانید که در مورد استفاده از کلاس “ساده” نگران نباشید. همچنین یک تابع تماس وجود دارد که نشانگر برچسب را به روز می کند. بیایید در حال حاضر به آن نگاه کنیم.

 

function ChangeSelectedLabel() {

var count = $(“input[name=ItemKey]:checked”).length;

$(“#selectedCountLabel”).text(count + ” items selected”);

SetToggleCheckBoxFromChildren ()؛

}

 

این تابع مجموعه ای از متغیر برای کل موارد چک شده است. حتما نام جعبه چک را نشان داده اید، فقط در صورتی که گزینه های دیگری در فرم خود دارید، زیرا نمی خواهید کل کل شما به درستی محاسبه شود. سپس فاصله “selectedCountLabel” با متن دلخواه به روز می شود.

سپس ما یک تابع فراخوانی برای تابع SetToggleCheckBoxFromChildren می کنیم. بیایید به آن نگاه کنیم.

 

function SetToggleCheckBoxFromChildren() {

var TotalDeselectedItems = $(“input[name=ItemKey]:not(:checked)”).length;

if (TotalDeselectedItems == 0) {

$(“#selectallcheckboxes”).prop(“checked”, true);

} else {

$(“#selectallcheckboxes”).prop(“checked”, false);

}

}

خوب، بنابراین این تابع تنظیم وضعیت جعبه والدین را تنظیم می کند. می دانید، یکی در بالای جدول. ممکن است زمانی که اسکریپت سمت سرور صفحه را پر می کند که همه کادرهای جعبه را چک می کند.

در این وضعیت، ما می خواهیم جاوا اسکریپت سمت سرویس گیرنده گزینه چک کردن پدر و مادر را به حالت “چک” تنظیم کنیم. اگر ما این کار را نکنیم، گزینه انتخاب را انتخاب می کنیم. ممکن است متوجه شوید که این تابع در اولین بلوک جاوا اسکریپت نیز نامیده شده است.

این تابع متوجه می شود که آیا چکیده هایی وجود دارد که بررسی نشده اند (به یاد داشته باشید، از نام ما برای فیلتر کردن محدوده استفاده کنید). اگر آنها وجود نداشته باشند، کادر تأیید پدر و مادر را بررسی کنید.

 

امیدواریم مفید واقع شود.

 

Tagged
جی کوئری | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

ایجاد اولین پلاگین JQuery شما

 

ایجاد اولین پلاگین JQuery شما

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

یا شاید شما یکی از ویژگی های عملکرد خود را در یکی از پروژه های خود نوشتید و حالا می خواهید قادر به حرکت آن به راحتی به سایر پروژه ها باشید. در هر صورت نوشتن یک افزونه بهترین گزینه شماست.

جی کوئری عالی است این مرورگر متقابل است، آسان برای یادگیری، و کمک می کند تا شما رابط کاربری بسیار کاربر پسند را. همچنین دارای پلاگین های مفید بسیاری است که تقریبا هر آنچه که می خواهید انجام دهید.

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

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

راه اندازی شما می توانید کل پروژه را از GitHub دانلود کنید برای این آموزش، ما یک پلاگین آکوردئون ساده ایجاد خواهیم کرد. بیایید یک فایل js ایجاد کنیم و آن را در دایرکتوری “js” وب سایت ما قرار دهیم.

این سنت است که تمام فایل های js plugin را با “jquery dot” شروع کنیم و سپس نام پلاگین واقعی آن را بنویسیم، بنابراین ما “jquery.simple-accordion.js” را با ما تماس خواهیم گرفت.

 – فایل پلاگین ما در داخل دایرکتوری js

در دایرکتوری وب سایت ما حالا ما باید فایل پلاگین ما را همراه با کتابخانه جی کوئری به صفحه HTML اصلی (index.html) اضافه کنیم.

بهتر است که کتابخانه جی کوئری را مستقیما از سرورهای Google API بگنجانیم، زیرا آنها به جای محل سرور تک سرور شما در سراسر جهان توزیع شده اند: سرورهای نزدیک تر معمولا به معنای پاسخ سریع تر به بازدید کننده می باشند.

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

محتویات پیش ذخیره شده به معنی بارگذاری بار سریع برای بازدید کننده است. ساختار پلاگین جی کوئری jQuery با تمام قلاب های لازم برای کمک به شما در توسعه پلاگین ما بسته بندی شده است.

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

(function($) {

$.fn.simpleAccordion = function() {

//TODO: code for simple accordion plugin

}

}(jQuery));

بیایید به سرعت از آنچه که در اینجا اتفاق می افتد برویم. با وارد کردن همه چیز در الگوی جاوااسکریپت self-enclosed (function () {}) ما مطمئن هستیم که تمام متغیرهای موجود در پلاگین ما با خیال راحت در خارج از فضای نامیش جهانی باقی خواهند ماند.

ما با هر جاوا اسکریپت دیگری که در این صفحه در حال اجرا است، به درگیری نرسیده ایم، بنابراین ما باید کد خود را همانطور که بالا بود جدا کنیم. چیز دیگری که شما ممکن است متوجه شوید این است که ما پلاگین ما را تعریف می کنیم همانطور که جی کوئری در حالت “بدون درگیری” قرار دارد.

باز هم، ما در تلاش برای جلوگیری از برخورد با دیگر جاوا اسکریپت در صفحه است، بنابراین ما می خواهیم اطمینان حاصل کنیم که افزونه ما وابسته به $ default نیست، که می تواند توسط یک کتابخانه دیگر مورد استفاده قرار گیرد. 

در نهایت، $ .fn راه جی کوئری است که به شما اجازه می دهد پلاگین خود را تعریف کنید، که ما آن را SimpleAccordion نامیدیم. با تمام قطعات ما در محل، بیایید آشپزی کنیم! 

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

با استفاده از کلمه کلیدی “این” ما می توانیم پلاگین خود را اعمال توابع مرتبط با دسترسی به هر عنصر در یک حلقه بدون در نظر گرفتن نوع عنصر. گرفتن بخش HTML آماده – ساخت آکاردئوناز آنجایی که ما در حال ساخت آکاردئون ما می خواهیم ساختار HMLT برای آن را داشته باشیم، بنابراین در اینجا بروید: 

Heading 1 

Cras dolor elit, porttitor ac diam bibendum, eleifend aliquam erat.

Heading 2

Donec blandit risus nec est tristique interdum.

Heading 3

Fusce sit amet arcu id justo malesuada faucibus.

Heading 4

Aliquam tincidunt lobortis sem at porttitor.

این یک ساختار ساده آکوردئون است که چهار عنوان را تعریف می کند و زمینه های مربوط به محتوای آنها را مشخص می کند. بنابراین ایده این است که پلاگین ما این کد HTML را به یک آکوردئون کاربردی تبدیل می کند، جایی که کاربر می تواند بخش های مختلف باز و سقوط کند.

این است که چگونه باید به نظر می رسد:

فقط به نظر می رسد که ما باید برخی از سبک های ساده را اضافه کنیم. پس بزن که بریم:

.accordion {

width: 600px;

border: 1px solid #ccc;

border-bottom: none;

}

.accordion dt,.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: rgba(193, 221, 252, 0.24);

cursor: pointer;

padding: 8px 4px;

font-size: 14px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

در حال حاضر ساختار آکوردئون ما باید چنین باشد:

 

بخش جی کوئری – زمان برای انجام کاری!

 

برای اضافه کردن قابلیت به پلاگین ما قصد داریم فایل js را ویرایش کنیم و کد زیر را اضافه کنیم:

(function($) {

$.fn.simpleAccordion = function(options) {

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

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

واقعا درک نحوه پلاگین خود را برای گسترش کتابخانه جی کوئری نیاز به درک از ویژگی های نمونه اولیه جاوا اسکریپت دارد. اگرچه این طور نیست مستقیما استفاده نمی شود، ویژگی مجتمع جاوااسکریپت پشت صحنه ها از طریق ویژگی jQuery fn استفاده می شود، که یک نام مستعار جی کوئری برای اموال نمونه اولیه جاوا اسکریپت است.

بنابراین در شرایط ساده، شما افزونه خود را از جی کوئری با استفاده از fn “your-plugin-name”

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

به جای ارسال چندین استدلال، با یک شی گزینه ای می توانید چندین خواص را ارسال کنید، که عمل استاندارد جی کوئری است. هنگامی که اجازه می دهد گزینه در پلاگین خود، بهترین روش برای تنظیم گزینه های پیش فرض با استفاده از شیء پیش فرض است.

مانند گزینه ها، پیش فرض ها یک الگوریتم شی هستند که باید شامل ویژگی هایی باشد که شما اجازه می دهید به پلاگین خود منتقل شوند.

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

(function($) {

$.fn.simpleAccordion = function(options) {

var state = $.extend({}, {open: false}, options);

return this.each(function() {

var dts = $(this).children(‘dt’);

dts.click(accordionClick);

dts.each(reset);

if(state.open)

$(this).children(‘dt:first-child’).next().show();

});

function accordionClick() {

$(this).siblings(‘dt’).each(hide);

$(this).next().slideDown(‘fast’);

return false;

}

function hide() {

$(this).next().slideUp(‘fast’);

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

اگر متوجه شدید، ما از مقدار پیش فرض open استفاده می کنیم: false، بنابراین اگر هیچ گزینه ای منتقل شده باشد، افزونه فرض می کند که شما وقتی می خواهید اولین آیتم را در آکاردئون بسته کنید، بسته می شود.

هنگامی که افزونه گزینه ها را دریافت می کند، می توانید به روش $ .extend تکیه کنید تا حقیقت اصلی را اعمال کنید. چه روش $ .extend این است که دو یا چند اشیا را ادغام می کند.

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

Tagged