به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

استفاده از کدهای دیگر کتابخانه ها در جی کوئری

مسئله

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

 


نکته: کلمه ی .radioClass() از رفتار دکمه های رادیویی(radio buttons) در اپلیکیشن های وب و دسکتاپ نشئت گرفته است، زیرا کلیک کردن بر روی یک دکمه،باعث می شود که دیگر دکمه هایی که در گروه دکمه ی رادیویی(radio button group) مشابهی قرار دارند،  از حالت انتخاب بیرون بیایند. کلمه ی دکمه ی رادیویی(radio button) برای عناصر input، از دکمه های رادیوهای درون ماشین های قدیمی نشئت گرفته است. آن دکمه هایی که وقتی یکی از آنها را فشار می دهیم، بقیه ی دکمه ها بسته می شوند.


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

<div>
<div id="one" class="hilite">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>

 اکنون فرض کنید بخواهیم دستورات زیر را اجرا کنیم:

// و div#three به hilite اضافه کردن کلاس
// حذف این کلاس از تمام دیگر عناصر هم نیا یا خواهر و برادر آن
// (e.g. div#one)
$('#three').radioClass('hilite');

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

// div#two به hilite اضافه کردن کلاس
// div#three و div#one و حذف این کلاس از دیگر عناصر هم نیا مثل div#four و
$('#two,#four').radioClass('hilite');

 


راه حل

برای اضافه کردن متد .radioClass() به جی کوئری، کافی است یک پلاگین ساده را به کدها اضافه کنید:

//کلاس مشخص شده را از تمام هم نیاهای عنصر یا عناصر انتخاب شده حذف کنید
// سپس آن کلاس را به عنصر یا عناصر انتخاب شده اضافه کنید
// زیرا انجام این کار به آن شیوه به ما امکان می دهد تا چندین عنصر هم نیا
//انتخاب شوند

jQuery.fn.radioClass = function( cls ) {
  return this.siblings().removeClass(cls).end().addClass(cls);
};

 این یک تابع کوتاه کافی است اما در داخل یک خط، فهم آن کمی مشکل به نظر می رسد، اما با ایجاد تو رفتگی در کدها، همان طور که در بخش 5.4 (Recipe 5.4)توضیح دادیم، کاملا باعث می شود که بفهمیم چگونه کار می کند:

jQuery.fn.radioClass = function( cls ) {
   return this  // رشته ی اولیه که نتایج خود را برمی گرداند
        .siblings() // تمام عناصر هم نیای عناصر انتخاب شده را انتخاب می کند
           .removeClass(cls) // حذف کلاس از آن عناصر هم نیا
        .end() // عقب رفتن به سمت انتخاب اصلی
        .addClass(cls);  // اضافه کردن کلاس به عناصر انتخاب شده
};

 


توضیحات

گزارش شده است که ایگور استراوینسکیِ آهنگساز گفته است:  آهنگسازان خوب قرض می گیرند. آهنگسازان بزرگ می دزدند. او ظاهراً نقل قول را از T.S. الیوت گرفته است که نوشته است: شاعران نابالغ تقلید می کنند; شاعران بالغ دزدی می کنند.

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

 


نکته: برای اطلاعات بیشتر در مورد کدهای متن باز و نرم افزارهای رایگان، می توانید به سایت های زیر سر بزنید:

https://opensource.org/

https://www.fsf.org/

 


 

 

You may not even need the actual code in a case like this one, where the implementation
is very simple and just the idea of having a “radio class” method is the missing link.

 

 


While not required, it’s a good courtesy to give credit to the source of the idea.

 

Whether the idea comes from elsewhere or is something you thought of yourself, in a
surprising number of cases you can write a useful jQuery plugin in one or a few lines
of code.

 

 

 

 

 

 

 

 

نوشتن دیدگاه

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


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال