0
آموزش jQuery UI قسمت نهم کار با Button
آموزش jQuery UI قسمت نهم کار با Button
در این پست در ادامه آموزش jQuery UI به مبحث دکمه ها یا همان Button ها می پردازیم.
در مثال زیر چهار دکمه را با استفاده از آی دی آنها انتخاب کردیم و سپس تابع ()button را صدا زدیم. و همچنین با استفاده از تابعد ()buttonset سه دکمه Left و Middle و Right کنار هم ایجاد کردیم.
<!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 () {
$("#button-1, #button-2, #button-3, #button-4").button();
$("#button-5").buttonset();
});
</script>
</head>
<body>
<button id="button-1">A button element</button>
<input id="button-2" type="submit" value="A submit button">
<a id="button-3" href="">An anchor</a>
<input type="checkbox" id="button-4">
<label for="button-4">Toggle</label>
<br><br>
<div id="button-5">
<input type="checkbox" id="check1">
<label for="check1">Left</label>
<input type="checkbox" id="check2">
<label for="check2">Middle</label>
<input type="checkbox" id="check3">
<label for="check3">Right</label>
</div>
</body>
</html>
تنظیمات بیشتر برای دکمه ها
در مثال زیر سه دکمه در صفحه قرار دادیم و با استفاده تنظیمات زیر برای دکمه اول یک آیکون اضافه کردیم و برای دکمه دوم با استفاده از disabled آن را غیر فعال کردیم و برای دکمه سوم با استفاده از primary یک آیکون در اول دکمه قرار دادیم و با استفاده از secondary یک آیکون در آخر دکمه قرار دادیم.
نکته:
برای تغییر شکل آیکون دکمه ها می توانید کلاس مورد (فایل css) نظر را برای دکمه ها انتخاب کنید.
<!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 () {
$(function () {
$("#button-6").button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$("#button-7").button({
disabled: true
});
$("#button-8").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
});
</script>
</head>
<body>
<button id="button-6">
Button with icon only
</button>
<button id="button-7">
Button Disabled
</button>
<button id="button-8">
Button with two icons
</button>
</body>
</html>
در مثال زیر که مانند مثال قبلی می باشد به نوعی دیگر به دکمه ها تغییرات را اعمال کردیم.
<!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 () {
$(function () {
$("#button-9").button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$("#button-9").button('destroy');
$("#button-10").button({
icons: {
primary: "ui-icon-seek-prev"
}
});
$("#button-10").button('disable');
$("#button-11").button({
text: false,
icons: {
primary: "ui-icon-play"
}
});
});
});
</script>
</head>
<body>
<button id="button-9">
I'm destroyed
</button>
<button id="button-10">
I'm disabled
</button>
<button id="button-11">
play
</button>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال