با سلام به شما دوستان خوب وهمراهان گرامی ، امیدوارم که حالتون خوب باشه و با اموزشهای ما همراه بمانید.pinner widget فلش های بالا / پایین را به سمت چپ یک باکس ورودی اضافه می کند، بنابراین به یوزر اجازه می ده تا یک مقدار را در باکس ورودی کم و زیاد کند. علاوه بر این این امکان را برای یوزر فراهم می کند تا یک مقدار را به طور مستقیم تایپ کند، یا اینکه یک مقدار موجود را با استفاده از ماوس، صفحه کلید و یا اسکرول تغییر دهد. این برنامه همچنین دارای مرحله ی برای رد کردن برخی مقادیر است. علاوه برویژگی های عددی پایه، جهانی کردن طراحی گزینه ها را نیز امکان پذیر می سازد ( برای مثال ارز، مجزاکننده های مختلف، اعشار و غیره) بنابراین یک باکس مناسب بین المللی شده ارائه می دهد.
مثال زیر به Globalize بستگی دارد. شما می توانید فایل های جهانی شده را از https://github.com/jquery/globalize دریافت کنید. روی لینک های منتشر شده کلیک کنید، ورژن مورد نظر خود را انتخاب کنید و فایل .zip یا tar.gz را دانلود کنید. این فایل ها را باز کرده و فایل های زیر را روی فولدر مربوط به مثال، کپی کنید.
lib/globalize.js: این فایل حاوی کد javascript برای مواجه شدن با محلی کردن ها وجود دارد.
lib/globalize.culture.js: این فایل حاوی مجموعه ی کاملی از داخلی هایی است که کتابخانه ی Globalize با آن روبرو می شود.
این فایل ها در فولدر external از کتابخانه ی jquery-ui نیز وجود دارند.
jQueryUI یک متد spinner() ارائه می دهد که یک spinner ایجاد می کند.
ترکیب:
متد spinner() به دو فرم زیر قابل استفاده می باشد:
$(selector, context).spinner (options) Method
$(selector, context).spinner (“action”, params) Method
متد $(selector, context).spinner (options):
متد spinner (options) اعلام می کند که یک عنصر HTML و محتوای آن باید مانند یک spinner مدیریت و برخورد شود. پارامتر options آبجکتی است که ظاهر و رفتار عناصر موجود در spinner را مشخص می کند.
ترکیب:
$(selector, context).spinner (options);
شما می توانید با استفاده از آبجکت Javascript، یک یا چند گزینه را همزمان ارائه دهید. اگر بیشتر از یک گزینه وجود دارد، می توانید آنها را با استفاده از کاما از یکدیگر مجزا کنید، همانطور که در زیر مشاهده می کنید:
$(selector, context).spinner({option1: value1, option2: value2….. });
جدول زیر گزینه های مختلفی را لیست می کند که با این متد مورد استفاده قرار می گیرند:
Option
Description
culture
این گزینه culture را برای تجزیه و قالب بندی مقدار تنظیم می کند. مقدار پیش فرض آن null می باشد که به این معناست که culture تنظیم شده در Globalize استفاده می شود.
disabled
اگراین گزینه روی true تنظیم شده باشد، spinner را غیرفعال می کند. به طور پیش فرض مقدار آن false می باشد.
icons
این گزینه آیکن ها را برای استفاده ی دکمه ها تنظیم می کند، یک آیکن را که به وسیله ی jQuery UI CSS Framework ارائه شده، هماهنگ می کند. مقدار پیش فرض آن { down: “ui-icon-triangle-1-s”, up: “ui-icon-triangle-1-n” } می باشد.
incremental
این گزینه تعداد مراحلی را کنترل می کند که هنگام پایین نگاه داشتن دکمه ی spin مورد نیاز است. مقدار پیش فرض آن true می باشد.
max
این گزینه حداکثر مقدار مجاز را نشان می دهد. مقدار پیش فرض آن null است که به این معناست که هیچ حداکثر اجرایی وجود ندارد.
min
این گزینه حداقل مقدار مجاز را نشان می دهد. مقدار پیش فرض آن null است که به این معناست که هیچ حداقل اجرایی وجود ندارد.
numberFormat
این گزینه فرمت اعدادی را نشان می دهد که برای Globalize شدن منتقل شدند. متداول ترین ها عبارتند از n برای اعداد اعشاری و c برای ارزش پول. مقدار آن به طور پیش فرض null می باشد.
page
این گزینه تعداد مراحل مورد نیاز برای صفحه بندی از طریق متدهای pageUp/pageDown را نشان می دهد. مقدار آن به طور پیش فرض ۱۰ است.
step
این گزینه اندازه ی مراحل مورد نیاز برای spinning از طریق دکمه ها یا از طریق متدهای thestepUp()/stepDown() را نشان می دهد. در صورت وجود، ویژگی عنصر step استفاده می شود و گزینه به طور مشخص تنظیم نشده است.
در بخش بعدی چند مثال در مورد قابلیت spinner widget ارائه خواهد شد.
قابلیت پیش فرض
مثال زیر یک قابلیت spinner widget را توضیح می دهد که پارامتری به متد spinner() انتقال نمی دهد.
#spinner-1 input {
width: 100px;
}
$(function () {
$(“#spinner-1”).spinner();
});
استفاده از گزینه های min، max و step:
مثال زیر استفاده از سه گزینه ی min، max و step را در spinner widget از JqueryUI توضیح می دهد.
#spinner-2, #spinner-3 input {
width: 100px;
}
$(function () {
$(“#spinner-2”).spinner({
min: -10,
max: 10
});
$(‘#spinner-3’).spinner({
step: 100,
min: -1000000,
max: 1000000
});
});
Spinner Min, Max value set:
Spinner increments/decrements in step of of 100:
در مثال بالا مشاهده می کنید که در اولین spinner مقادیر max و min به ترتیب بر روی ۱۰ و ۱۰- تنظیم شده اند. از این رو با انتقال این مقادیر، spinner افزایش / کاهش را متوقف خواهد کرد. در spinner دوم، مقدار را در مرحله ی ۱۰۰ افزایش / کاهش می دهد.
استفاده از گزینه ی icons:
مثال زیر استفاده از گزینه ی icons را در spinner widget از JqueryUI توضیح می دهد.
#spinner-5 input {
width: 100px;
}
$(function () {
$(“#spinner-5”).spinner({
icons: {
down: “custom-down-icon”, up: “custom-up-icon”
}
});
});
در مثال بالا متوجه می شوید که spinner تصاویر تغییر یافته است.
استفاده از گزینه های culture، numberFormat و page:
مثال زیر استفاده از سه گزینه ی culture,numberFormat و page را در spinner widget از JqueryUI توضیح می دهد.
$(function () {
$(“#spinner-4”).spinner({
culture: “de-DE”,
numberFormat: “C”,
step: 2,
page: 10
});
});
در مثال بالا مشاهده می کنید که spinner تعداد را در فرمت حاضر با عنوان numberFormat نمایش می دهد که روی C تنظیم شده و culture روی deDE تنظیم شده است. در اینجا از فایل های Globalize از کتابخانه ی jquery-ui استفاده کرده ایم.
متد $(selector, context).spinner (“action”, params):
متد spinner (“action”, params) می تواند فعالیتی را روی عناصر spinner اجرا کند، مانند فعال / غیرفعال کردن spinner. فعالیت به عنوان یک رشته در اولین argument تعیین می شود ( به عنوان مثال گزینه ی disable در واقع spinner را غیر فعال می سازد.). فعالیت هایی را که قابل انتقال هستند در جدول زیر بررسی کنید.
ترکیب:
$(selector, context).spinner (“action”, params);
جدول زیر فعالیت های مختلفی را نشان می دهد که با این متد استفاده می شود:
Action
Description
destroy
این فعالیت قابلیت spinner را از روی یک عنصر از بین می برد. عناصر به وضعیت pre-init خود بازمی گردند. این متد هیچ برهانی (argument) را نمی پذیرد.
disable
این عمل قابلیت spinner را غیرفعال می سازد. این متد هیچ برهانی را نمی پذیرد.
enable
این عمل قابلیت spinner را فعال می سازد. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این متد مقدار مربوط به optionName را دریافت می کند. در واقع optionName نام گزینه ی دریافتی می باشد.
option
این عمل یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های مربوط به spinner کنونی را نمایش می دهد. این متد هیچ برهانی را نمی پذیرد.
option( optionName, value )
این عمل مقدار گزینه ی spinner مربوط به optionName تعیین شده را تنظیم می کند.
option( options )
این عمل یک یا چند گزینه را برای spinner تنظیم می کند.
pageDown( [pages ] )
این عمل مقدار را با تعداد مشخص شده ی صفحات، کاهش می دهد، همانطور که در گزینه ی page تعریف شد.
pageUp( [pages ] )
این عمل مقدار را با تعداد مشخص شده ی صفحات، افزایش می دهد، همانطور که در گزینه ی page تعریف شد.
stepDown( [steps ] )
این عمل مقدار را به وسیله ی تعداد تعیین شده ی مراحل کاهش می دهد.
stepUp( [steps ] )
این عمل مقدار را به وسیله ی تعداد تعیین شده ی مراحل کاهش می دهد.
value
این عمل مقدار حاضر را به عنوان یک عدد دریافت می کند. این مقدار براساس گزینه های numberFormat و culture تجزیه می شود. این متد هیچ برهانی را نمی پذیرد.
value( value )
این عمل مقدار را تنظیم می کند، اگر مقدار انتقال یابد، براساس گزینه های numberFormat و culture تجزیه می شود.
widget
این عمل عنصر spinner widget را بازمی گرداند، عنصری که با نام گروه ui-spinner توضیح داده می شود.
مثال زیر استفاده از فعالیت های جدول بالا را توضیح می دهد.
استفاده از فعالیت stepUp، stepDown، pageUp و pageDown:
مثال زیر استفاده از متدهای stepUp, stepDown, pageUp و pageDown را توضیح می دهد.
#spinner-6 input {
width: 100px;
}
$(function () {
$(“#spinner-6”).spinner();
$(‘button’).button();
$(‘#stepUp-2’).click(function () {
$(“#spinner-6”).spinner(“stepUp”);
});
$(‘#stepDown-2’).click(function () {
$(“#spinner-6”).spinner(“stepDown”);
});
$(‘#pageUp-2’).click(function () {
$(“#spinner-6”).spinner(“pageUp”);
});
$(‘#pageDown-2’).click(function () {
$(“#spinner-6”).spinner(“pageDown”);
});
});
در مثال بالا از دکمه های مرتبط با افزایش / کاهش spinner استفاده شد.
استفاده از فعالیت های enable و disable:
مثال زیر استفاده از متدهای enable و disable را توضیح می دهد.
#spinner-7 input {
width: 100px;
}
$(function () {
$(“#spinner-7”).spinner();
$(‘button’).button();
$(‘#stepUp-3’).click(function () {
$(“#spinner-7”).spinner(“enable”);
});
$(‘#stepDown-3’).click(function () {
$(“#spinner-7”).spinner(“disable”);
});
});
در مثال بالا از دکمه های Enable/Disable برای فعالسازی یا غیرفعال کردن spinner استفاده می کنیم.
مدیریت رویداد روی عناصر spinner
علاوه برمتد spinner (options) که در بخش های قبل مشاهده کردیم، JqueryUI متدهایی را ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر ارائه شده اند:
Event Method
Description
change(event, ui)
این رویداد وقتی آغاز می شود که مقدار spinner تغییر کرده و ورودی دیگر مد نظر نیست.
create(event, ui)
این رویداد وقتی آغاز می شود که spinner ایجاد شود.
spin(event, ui)
این رویداد در زمان افزایش / کاهش آغاز می شود.
start(event, ui)
این رویداد قبل از یک spin آغاز می شود. می تواند کنسل شود و از پیشروی spin جلوگیری کند.
stop(event, ui)
این رویداد پس از یک spin آغاز می شود.
مثال:
مثال زیر متد استفاده شده در spinner widget را توضیح می دهد. این مثال استفاده از رویدادهای spin, change و stop را توضیح می دهد.
#spinner-8 input {
width: 100px;
}
$(function () {
$(“#spinner-8”).spinner({
spin: function (event, ui) {
var result = $(“#result-2”);
result.append(“Spin Value: ” + $(“#spinner-8”).spinner(“value”));
},
change: function (event, ui) {
var result = $(“#result-2”);
result.append(“Change value: ” + $(“#spinner-8”).spinner(“value”));
},
stop: function (event, ui) {
var result = $(“#result-2”);
result.append(“Stop value: ” + $(“#spinner-8”).spinner(“value”));
}
});
});
در مثال بالا مقدار spinner را تغییر دهید و پیغامی که در زیر برای چرخش و توقف رویدادها نمایش داده می شود را مشاهده کنید. اکنون تمرکز spinner را تغییر داده و سپس پیغامی را روی رویداد تغییر مشاهده خواهید کرد.
Extension Points
Spinner widget با widget factory ساخته می شود و می تواند گسترده شود. برای گسترش ویجت ها می توانیم یا برخی رفتارهای متدهای موجود را نادیده بگیریم و یا اینکه به آنها مواردی اضافه کنیم. جدول زیر extension point را با ثبات API و با همان روش spinner ذکر شده در جدول فوق، ارائه می دهد.
Method
Description
_buttonHtml(event)
این متد یک String را بازمی گرداند که یک HTML می باشد. این HTML می تواند برای دکمه های افزایش و کاهش spinner استفاده شود. هر دکمه باید دارای یک گروه ui-spinner-button باشد که برای رویدادهای مرتبط با کار نامگذاری می شود. این متد هر برهانی را نمی پذیرد.
_uiSpinnerHtml(event)
این متد HTML را برای استفاده در پوشاندن عنصر lt;input> & مربوط به spinner، تعیین می کند. این متد هر برهانی (argument) را نمی پذیرد.
jQuery UI Widget Factory یک اساس توسعه پذیر می باشد که روی آن همه ی ویجت های jQuery UI ساخته می شوند. استفاده از widget factory برای ساختن یک پلاگین، سهولت هایی برای مدیریت وضعیت و همچنین کنوانسیون هایی برای کارهای معمولمی سازد، از جمله نمایش دادن متدهای پلاگین و تغییر گزینه ها پس از نمونه.
