آموزش ساخت ComboBox
آموزش ساخت ComboBox در Kendo UI
با استفاده از فیلد های ComboBox، علاوه بر اینکه کاربر می تواند، یکی از آیتم های لیست کشوئی را انتخاب کند، می تواند متنی را داخل ComboBox تایپ کند.
متد ()kendoComboBox
با استفاده از متد ()kendoComboBox در Kendo UI، می توانید یک ComboBox بسازید.
پیکربندی (Configuration)
| پارامتر | توضیح |
|---|---|
| dataTextField |
باید با نام فیلدی که برای متن گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (text) |
| dataValueField |
باید با نام فیلدی که برای مقادیر گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (value) |
| dataSource |
با استفاده از این پارامتر می توانید منبع داده های ComboBox را مشخص نمایید، در مثال بالا، از یک لیست استاتیک استفاده شده است. |
| animation |
با استفاده از این پارامتر می توانید، نحوه ی نمایش لیست گزینه های ComboBox را تغییر دهید. |
| index |
تنظیم گزینه پیشفرض ComboBox، از صفر شروع می شود. |
| filter |
نحوه ی فیلترینگ گزینه های ComboBox را مشخص می کند، زمانی که کاربر کاراکتری را تایپ می کند، براساس این کاراکتر در گزینه های ComboBox جستجو می کند و آنهایی که با آن کاراکتر شروع می شوند(startswith) یا شامل آن کاراکتر هستند (contains) را نمایش می دهد. |
| ignoreCase |
زمان فیلترینگ، به حروف بزرگ و کوچک حساس باشد یا خیر. |
| minLength |
حداقل چند کاراکتر تایپ شود، تا فیلترینگ عمل کند. |
| placeholder |
با استفاده از این پارامتر می توانید یک متن پیشفرض مانند "انتخاب کنید ..." در ComboBox نمایش دهید. |
| suggest |
آیا سیستم پیشنهاد دهی فعال باشد یا نه، زمانی که کاربر، کاراکتری را تایپ می کند، براساس آن کاراکتر در کادر ComboBox یکی از گزینه های ComboBox نمایش داده می شود. |
| select |
با نام یک تابع تنظیم می شود و زمانی که یکی از گزینه های ComboBox انتخاب شد، صدا زده می شود. |
| change |
با نام یک تابع تنظیم می شود و زمانی که مقدار ComboBox تغییر کرد، صدا زده می شود. |
| close |
با نام یک تابع تنظیم می شود و زمانی که لیست ComboBox پنهان شود، صدا زده می شود. |
| open |
با نام یک تابع تنظیم می شود و زمانی که لیست ComboBox ظاهر شود، صدا زده می شود. |
در مثال زیر، نحوه ساخت فیلد ComboBox با استفاده از متد ()kendoComboBox و تنظیم پارامترهای مختلف آن نشان داده شده است. همچنین در انتهای مثال با استفاده از متد ()bind رویداد change را به ComboBox اضافه کرده ایم. وظیفه این تابع این است که مقدار انتخاب شده را در عنصر <div> با شناسه "info" نمایش دهد:
مثال (آموزش ساخت ComboBox)
<html>
<head>
<title>RTL support</title>
<meta charset="utf-8">
<link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="/../../../js/jquery.min.js"></script>
<script src="/../../../js/kendo.web.min.js"></script>
<script src="/../../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section">
<div class="k-rtl">
<h2>RTL ComboBox</h2>
<input id="combobox" />
</div>
</div>
<script>
$(document).ready(function() {
var data = [
{ text: "Item 1", value:"1" },
{ text: "Item 2", value:"2" },
{ text: "Item 3", value:"3" }
];
$("#combobox").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: data
//animation:{
// open:{
// effects:"fadeIn",
// duration:1000,
// show:true,
// hide:false
// },
// close:{
// effects:"fadeOut",
// duration:1000,
// show:false,
// hide:true
// }
//},
//index : 2,
//filter:'startswith'//'contains',
//ignoreCase:0,
//minLength:1,
//placeholder:'choose an item',
//suggest:true
});
});
</script>
</div>
</body>
</html>
توجه: برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <div> مطابق مثال بالا تنظیم نمایید.
تنظیم رویداد change با استفاده از متد ()bind
در مثال زیر، با استفاده از متد ()bind رویداد change را به DropDownList اضافه کرده ایم. وظیفه این تابع این است که مقدار انتخاب شده را در عنصر <div> با شناسه "info" نمایش دهد:
$(document).ready(function(){
var combobox = $('#combobox').data('kendoComboBox');
combobox.bind("change",function(e) {
var result = combobox.text();
$('#info').text(result);
$('#info').css("background-color","yellow");
});
});
</script>
غیر فعال کردن ComboBox
$(document).ready(function(){
var combobox = $('#combobox').data('kendoComboBox');
combobox.enable(false);
});
</script>
قرار دادن ComboBox برروی گزینه دوم
$(document).ready(function(){
var combobox = $('#combobox').data('kendoComboBox');
combobox.select(1);
});
</script>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21328
دیدگاه‌ها
نقل قول:
اگر این مجموعه آموزشی را از ابتدا دنبال فرموده باشید، خواهید دید که در مطلب اول یعنی "معرفی کندو" تمام فایل ها برای دانلود قرار داده شده است.