Resources demos style css jquery ui

Want to learn more about the tabs widget? Check out the API documentation.

Interactions

Widgets

Effects

Utilities

Books

Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

Controlgroup

Groups multiple buttons and other widgets into one visual set.

Examples

A controlgroup featuring various form controls. The first features a horizontal toolbar like orientation, the second is in a space saving vertical orientation for usages like mobile devices and panels.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>jQuery UI Controlgroup - Default Functionality title>
 link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 link rel="stylesheet" href="/resources/demos/style.css">
 style> 
 .ui-controlgroup-vertical 
 width: 150px;
 >
 .ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
 .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label 
 text-align: center;
 >
 #car-type-button 
 width: 120px;
 >
 .ui-controlgroup-horizontal .ui-spinner-input 
 width: 20px;
 >
 style>
 script src="https://code.jquery.com/jquery-3.6.0.js"> script>
 script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"> script>
 script> 
 $( function( ) 
 $( ".controlgroup" ).controlgroup()
 $( ".controlgroup-vertical" ).controlgroup(
 "direction": "vertical"
 >);
 > );
 script>
 head>
body>
div class="widget">
 h1>Controlgroup h1>
 fieldset>
 legend>Rental Car legend>
 div class="controlgroup">
 select id="car-type">
 option>Compact car option>
 option>Midsize car option>
 option>Full size car option>
 option>SUV option>
 option>Luxury option>
 option>Truck option>
 option>Van option>
 select>
 label for="transmission-standard">Standard label>
 input type="radio" name="transmission" id="transmission-standard">
 label for="transmission-automatic">Automatic label>
 input type="radio" name="transmission" id="transmission-automatic">
 label for="insurance">Insurance label>
 input type="checkbox" name="insurance" id="insurance">
 label for="horizontal-spinner" class="ui-controlgroup-label"># of cars label>
 input id="horizontal-spinner" class="ui-spinner-input">
 button>Book Now! button>
 div>
 fieldset>
 br>
 fieldset>
 legend>Rental Car legend>
 div class="controlgroup-vertical">
 select>
 option>Compact car option>
 option>Midsize car option>
 option>Full size car option>
 option>SUV option>
 option>Luxury option>
 option>Truck option>
 option>Van option>
 select>
 label for="transmission-standard-v">Standard label>
 input type="radio" name="transmission-v" id="transmission-standard-v">
 label for="transmission-automatic-v">Automatic label>
 input type="radio" name="transmission-v" id="transmission-automatic-v">
 label for="insurance-v">Insurance label>
 input type="checkbox" name="insurance" id="insurance-v">
 label for="vertical-spinner" class="ui-controlgroup-label"># of cars label>
 input id="vertical-spinner" class="ui-spinner-input">
 button id="book">Book Now! button>
 div>
 fieldset>
 div>
 
 body>
 html>

html>
html lang="en">
head>
 meta charset="utf-8">
 meta name="viewport" content="width=device-width, initial-scale=1">
 title>jQuery UI Dialog - Default functionality title>
 link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 link rel="stylesheet" href="/resources/demos/style.css">
 script src="https://code.jquery.com/jquery-3.6.0.js"> script>
 script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"> script>
 script> 
 $( function( ) 
 $( "#dialog" ).dialog();
 > );
 script>
 head>
body>
 
div id="dialog" title="Basic dialog">
 p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. p>
 div>
 
 body>
 html>

html>
html lang="en">
head>
 meta charset="utf-8">
 meta name="viewport" content="width=device-width, initial-scale=1">
 title>jQuery UI Effects - addClass demo title>
 link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 link rel="stylesheet" href="/resources/demos/style.css">
 style> 
 .toggler < width: 500px; height: 200px; position: relative; >
 #button < padding: .5em 1em; text-decoration: none; >
 #effect < width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; >
 .newClass < text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; >
 style>
 script src="https://code.jquery.com/jquery-3.6.0.js"> script>
 script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"> script>
 script> 
 $( function( ) 
 $( "#button" ).on( "click", function( ) 
 $( "#effect" ).addClass( "newClass", 1000, callback );
 >);
 
 function callback( ) 
 setTimeout(function( ) 
 $( "#effect" ).removeClass( "newClass" );
 >, 1500 );
 >
 > );
 script>
 head>
body>
 
div class="toggler">
 div id="effect" class="ui-corner-all">
 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
 div>
 div>
 
button id="button" class="ui-state-default ui-corner-all">Run Effect button>
 
 body>
 html>