jQuery UI控制组小工具
控制组是用来分组各种输入部件,如复选框、按钮等。控制组有助于对表单的所有元素应用共同的属性。例如,如果用户声明现在的地址与永久地址相同,那么我们可以禁用用于输入永久地址的部分。控制组的工作方式是选择适当的子项并应用它们各自的部件。如果这些部件已经存在,它们的refresh()方法就会被调用。控制组可以被启用和禁用,从而启用和禁用所有包含的小部件。
语法:
$( ".my_games_control_group" ).controlgroup({
});
属性:
- destroy: 它用于从你的代码中删除控制组函数。
- disable:用于禁用控制组。
- enable:用于启用控制组,如果它之前被禁用。
- instance。返回当前对象的实例。
- option。返回当前与指定选项名称相关的值。
- refresh。用来处理任何被添加或删除的小部件。
- widget。返回一个包含整个控制组的对象。
让我们创建一个简单的、基本的控制组,有一个单选按钮、一个下拉框、一个复选框、一个标签和一个按钮。为了做到这一点,我们在一个类中指定这些部件,并在脚本标签中的javascript代码中提到这个类的名字。
示例 1:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="my_games_control_group">
<label for="radio_1">Men
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official
<input type="checkbox"
name="official"
id="official">
<button id="apply">Apply</button>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
(".my_games_control_group").controlgroup({});
})
</script>
</center>
</body>
</html>
输出:
改变控制组的方向/方位。控制组的方向可以通过在 “方向 “选项中指定来改变。默认情况下,它被设置为水平方向,它可以用来改变方向为垂直方向。
示例 2:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="my_games_control_group">
<label for="radio_1">Men
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
(".my_games_control_group").controlgroup({
"direction": "vertical"
});
})
</script>
</center>
</body>
</html>
输出:
启用/禁用控制组。禁用选项设置为真,用于禁用控制组。默认情况下,该值为false。在下面的代码中,添加了另一个带有两个辐射按钮的控制组,将启用或禁用主控制组。这也显示了禁用控制组的代码。
示例 3:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>disabled option true or false</h2>
<div class="my_games_control_group">
<label for="radio_1">Men
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<br><br><br>
<div id=display>Display</div>
<br> Set the Disabled option
<div class='radio_selection'>
<label for=sel_radio_1>True
<input type='radio'
name='r_disabled'
id='sel_radio_1'
value=true>
<label for=sel_radio_2>False
<input type='radio'
name='r_disabled'
id='sel_radio_2'
value=false
checked>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
(".my_games_control_group, .radio_selection").controlgroup()
("input:radio[name=r_disabled]").click(function() {
var selection = ((this).val() == 'true');
(".my_games_control_group").controlgroup(
"option", "disabled", selection);
('#display').html(
" $( \".my_games_control_group\" ).controlgroup( \"option\", \"disabled\", "
+ selection + ")");
})
})
</script>
</center>
</body>
</html>
输出:
销毁控制组。要销毁控制组,请使用destroy方法。这个方法摧毁了控制组,完全删除了它的功能,并将所有包含的小部件返回到它的预启动状态。下面的代码中使用的销毁方法是通过一个按钮的点击事件,还有另一个按钮可以重新加载页面,再次尝试。
示例 4:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Destroy methods</h2>
<div class="my_games_control_group">
<label for="radio_1">Men
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<button id=my_button>Destroy</button>
<a href=''>
<button type='button'>Try again : Refresh</button>
</a>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
(".my_games_control_group").controlgroup({})
('#my_button').click(function() {
(".my_games_control_group").controlgroup("destroy");
})
})
</script>
</center>
</body>
</html>
输出: