0
0
0
آموزش jQuery UI قسمت هفتم کار با Spinner
آموزش jQuery UI قسمت هفتم کار با Spinner
در این پست در ادامه آموزش jQuery UI به مبحث Spinner می پردازیم.
Spinner همان تگ های input هستند، که می توان مقدار داخل آن را با استفاده از فلش های بالا و پایین تغییر داد.
در مثال زیر یک input قرار دادیم و همچنین id آن را برابر spinner قرار دادیم و سپس با استفاده از jQuery تابع spinner را صدا می زنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/jquery-ui.css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#spinner").spinner();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<input id="spinner">
</body>
</html>
در مثال زیر یک دکمه قرار دادیم و زمانی که روی دکمه کلیک می شود spinner غیر فعال می شود و اگر دوباره روی دکمه کلیک کنیم spinner فعال می شود.
در کد زیر ابتدا وضعیت spinner را داخل یک متغیر var قرار دادیم. سپس زمانی که روی دکمه کلیک می شود بررسی می کنیم که اگر option برابر disabled بود spinner را فعال می کنیم و در غیر این صورت spinner را غیر فعال می کنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/jquery-ui.css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var s = $("#spinner").spinner();
$("#number").click(function () {
if (s.spinner("option", "disabled")) {
s.spinner("enable");
} else {
s.spinner("disable");
}
});
$("button").button();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="spinner">
<button id="number">Disable or Enable</button>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال