jQuery UI控制组小工具

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>

输出:
jQuery UI控制组小工具

改变控制组的方向/方位。控制组的方向可以通过在 “方向 “选项中指定来改变。默认情况下,它被设置为水平方向,它可以用来改变方向为垂直方向。

示例 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>

输出:
jQuery UI控制组小工具

启用/禁用控制组。禁用选项设置为真,用于禁用控制组。默认情况下,该值为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>

输出:
jQuery UI控制组小工具

销毁控制组。要销毁控制组,请使用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>

输出:
jQuery UI控制组小工具

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程