بررسی ساختار ویجتهای وب Kendo UI
نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۸/۱۴ ۱۴:۱۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<input id="pickDate" type="text"/>
<script type="text/javascript">
$(function() {
$("#pickDate").kendoDatePicker();
});
</script> <input id="dateOfBirth" type="text" data-role="datepicker" />
<!--KendoUI: Web--> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.web.min.js" type="text/javascript"></script> <!--KendoUI: DataViz--> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> <script src="js/kendo.dataviz.min.js" type="text/javascript"></script> <!--KendoUI: Mobile--> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.all.min.js" type="text/javascript"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#pickDate").kendoDatePicker();
});
$(function () {
// initialize any widgets in the #container div
kendo.init($("#container"));
});
</script>
</head>
<body>
<span>
Pick a date: <input id="pickDate" type="text" />
</span>
<div id="container">
<input id="dateOfBirth" type="text" data-role="datepicker" />
<div id="colors"
data-role="colorpalette"
data-columns="4"
data-tile-size="{ width: 34, height: 19 }"></div>
</div>
</body>
</html> <script type="text/javascript">
$(function () {
$("#pickDate").kendoDatePicker({
format: "yyyy/MM/dd"
});
});
</script> <input id="dateOfBirth" type="text"
data-role="datepicker"
data-format="yyyy/MM/dd" /> <input id="colorPicker1" />
<script type="text/javascript">
$(document).ready(function () {
$("#colorPicker1").kendoComboBox({
dataSource: ["Blue", "Green", "Red", "Yellow"]
});
});
</script> <input id="colorPicker2" data-role="combobox" data-source='["Blue", "Green", "Red", "Yellow"]' />
<script type="text/javascript">
$(document).ready(function () {
kendo.init($("#colorPicker2"));
});
</script> <input id="colorPicker3" />
<script type="text/javascript">
function onColorChange(e) {
alert('Color Change!');
}
$(document).ready(function () {
$("#colorPicker3").kendoComboBox({
dataSource: ["Blue", "Green", "Red", "Yellow"],
change: onColorChange
});
});
</script> <input id="colorPicker4" data-role="combobox"
data-source='["Blue", "Green", "Red", "Yellow"]'
data-change="onColorChange" />
<script type="text/javascript">
function onColorChange(e) {
alert('Color Change!');
}
$(document).ready(function () {
kendo.init($("#colorPicker4"));
});
</script> <script src="js/kendo.web.min.js" type="text/javascript"></script>