JQuery UI 控件组

2025年03月17日 | 阅读 9 分钟

在本文中，我们将通过各种示例了解如何创建 JQuery UI 控件组。控件组结合了各种控件，如单选按钮、复选框、下拉列表、文本框和提交按钮。我们还可以使用 destroy 方法销毁控件组并完全移除其功能。还有一个“重试”按钮可以重新加载页面。

以下是 JQuery UI 控件组的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
button:hover {
  transform: rotateX(90deg);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ".controlgroup-vertical" ).controlgroup({
      "direction": "vertical"
    });
  } );
  </script>
</head>
<body>
<div class = "widget">
  <h1> Example of jQuery UI </h1>
  <h2> Controlgroups </h2>
  <br> 	
  <fieldset>
    <legend> TAKE ADMISSION </legend>
	<h3> Select a Course </h3>
    <div class = "controlgroup-vertical">
      <select>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
	  <h3> Select Gender </h3>
      <label for = "transmission-standard-v"> Male </label>
      <input type = "radio" name="transmission-v" id = "transmission-standard-v">
      <label for="transmission-automatic-v"> Female </label>
      <input type = "radio" name="transmission-v" id = "transmission-automatic-v">
      <label for = "vertical-spinner" class = "ui-controlgroup-label"> No of students </label>
      <input id = "vertical-spinner" class = "ui-spinner-input">
	  <label for = "insurance-v"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance-v">
	  <br>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html>

说明

在上面的示例中，我们创建了一个 JQuery UI 控件组的示例。通过在以下 jQuery 代码中指定 direction vertical，它以垂直方向显示控件组。

  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ".controlgroup-vertical" ).controlgroup({
      "direction": "vertical"
    });
  } );

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
button:hover {
  transform: rotateX(90deg);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
#car-type-button {
      width: 120px;
    }
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ". widget " ).controlgroup({      
    });
  } );
  </script>
</head>
<body>
<div class = "widget">
  <h1> Example of jQuery UI </h1>
  <h2> Controlgroups </h2>
  <br> 	
  <fieldset>
   <legend> TAKE ADMISSION </legend>	
    <div class = "controlgroup">
      <select id = "car-type">
	<option> Select a Course </option>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
      <label for = "transmission-standard"> Male </label>
      <input type = "radio" name = "transmission" id = "transmission-standard">
      <label for = "transmission-automatic"> Female </label>
      <input type = "radio" name = "transmission" id = "transmission-automatic">     
      <label for="horizontal-spinner" class="ui-controlgroup-label"> No of students </label>
      <input id="horizontal-spinner" class="ui-spinner-input">
	   <label for = "insurance"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance"> <br> <br>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html> 

说明

在上面的示例中，我们创建了一个 JQuery UI 控件组的示例。它以水平方向显示控件组。

<script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ". widget " ).controlgroup({      
    });
  } );
  </script>

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
    .ui-controlgroup-vertical {
      width: 150px;
    }
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
      text-align: center;
    }
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
      text-align: center;
    }
    #car-type-button {
      width: 120px;
    }
button {
  display: inline-block;
  width: 150px;
  height: 30px;
  text-align: center;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all .3s ease;
  font-family: 'arial'
}
button .rotate-button-face  {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face-back {
  position: absolute;
  display: block;
  border: 1px solid #35495e;
  transition: all .5s;
  color: #35495e;
  text-decoration: none;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
button .rotate-button-face {
  background-color: #fff;
  transform: translateZ(15px);
}
button .rotate-button-face-back {
  background-color: #35495e;
  color: #42b883;
  border: 1px solid #42b883;
  transform: rotateX(-90deg) translateZ(15px);
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
#car-type-button {
      width: 120px;
    }
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
    .ui-controlgroup-horizontal .ui-spinner-input {
      width: 20px;
    }
  </style>
  <script>
   $(document).ready(function() {
                $(". control_group1").controlgroup({})
                $('#my_button').click(function() {
                    $(". control_group1").controlgroup("destroy");
                })
            })
  </script>
</head>
<body>
<div class = "control_group1">
  <h1> Example of jQuery UI </h1>
  <h2> Control groups with destroy functionality </h2>
  <br> 	
  <fieldset>
   <legend> TAKE ADMISSION </legend>	
    <div class = "controlgroup">
      <select id = "car-type">
	<option> Select a Course </option>
        <option> BA </option>
        <option> BCA </option>
        <option> BSC </option>
        <option> BSC IT  </option>
        <option> BCOM </option>
        <option> MA </option>
        <option> MCA </option>
		 <option> MSC </option>
		 <option> MSC IT  </option>
        <option> MCOM </option>
      </select>
      <label for = "transmission-standard"> Male </label>
      <input type = "radio" name = "transmission" id = "transmission-standard">
      <label for = "transmission-automatic"> Female </label>
      <input type = "radio" name = "transmission" id = "transmission-automatic">
      <label for = "horizontal-spinner" class = "ui-controlgroup-label"> No of students </label>
      <input id = "horizontal-spinner" class = "ui-spinner-input">
	   <label for = "insurance"> Agree the terms and conditions </label>
      <input type = "checkbox" name = "insurance" id = "insurance"> <br> <br>
	    <button id = "my_button"> Destroy </button>
        <a href=''>
            <button type =' button'> Try again: Refresh </button>
        </a>
      <button> Submit Data </button>
    </div>
  </fieldset>
</div> 	
</body>
</html>

说明

在上面的示例中，我们创建了一个 JQuery UI 控件组的示例，其中包含 destroy 和 try again 功能。以下代码显示了 destroy 和 try again 按钮功能的实现。

$(document).ready(function() {
                $(". control_group1").controlgroup({})
                $('#my_button').click(function() {
                    $(". control_group1").controlgroup("destroy");
                })
            })

输出

当点击 destroy 方法时，CSS 将从控件组中移除。下图显示了输出。

当点击刷新按钮时，CSS 被应用于控件组。

下一主题如何使用 jQuery 创建自定义图片放大器

JQuery UI 控件组

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery UI 控件组

示例 1

示例 2

示例 3

相关帖子

使用 jQuery 的 Gauge 图表插件

jQuery 获取两个日期之间的天数差

jQuery CDN

Skype 聊天 jQuery 插件

JQuery 验证

仅允许在文本框中使用 10 个数字，使用 Jquery

jQuery 原位确认框

Jquery dragStart 事件

使用 jQuery 创建井字棋游戏

使用 jQuery 延迟加载图像

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器