2014-08-28 19:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > jQuery UI Controlgroup - Default Functionality< / title >
< link rel = "stylesheet" href = "../../themes/base/all.css" >
< link rel = "stylesheet" href = "../demos.css" >
< style >
.ui-controlgroup-vertical {
2014-08-23 03:39:35 +00:00
width: 150px;
2014-08-28 19:16:51 +00:00
}
2015-08-12 15:24:30 +00:00
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
2014-08-28 19:16:51 +00:00
text-align: center;
}
2015-08-12 15:24:30 +00:00
#car-type-button {
width: 120px;
}
.ui-controlgroup-horizontal .ui-spinner {
width: 50px;
}
2014-08-28 19:16:51 +00:00
< / style >
2015-08-09 15:48:43 +00:00
< script src = "../../external/requirejs/require.js" > < / script >
2015-08-10 14:08:51 +00:00
< script src = "../bootstrap.js" data-modules = "button checkboxradio selectmenu spinner" >
2015-08-09 15:48:43 +00:00
$( ".controlgroup" ).controlgroup()
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
< / script >
2014-08-28 19:16:51 +00:00
< / head >
< body >
< div class = "widget" >
< h1 > Controlgroup< / h1 >
< fieldset >
< legend > Rental Car< / legend >
< div class = "controlgroup" >
2015-08-12 15:24:30 +00:00
< select id = "car-type" >
2014-08-28 19:16:51 +00:00
< 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" >
2015-08-12 15:24:30 +00:00
< label for = "horizontal-spinner" class = "ui-controlgroup-label" > # of cars< / label >
< input id = "horizontal-spinner" class = "ui-spinner-input" >
2014-08-28 19:16:51 +00:00
< button > Book Now!< / button >
< / div >
< / fieldset >
< br / >
< fieldset >
< legend > Rental Car< / legend >
2014-08-23 03:39:35 +00:00
< div class = "controlgroup-vertical" >
2014-08-28 19:16:51 +00:00
< 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" >
2015-08-12 15:24:30 +00:00
< label for = "vertical-spinner" class = "ui-controlgroup-label" > # of cars< / label >
< input id = "vertical-spinner" class = "ui-spinner-input" >
2014-08-28 19:16:51 +00:00
< button > Book Now!< / button >
< / div >
< / fieldset >
< / div >
2014-08-23 03:39:35 +00:00
< div class = "demo-description" >
< p > 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.< / p >
< / div >
2014-08-28 19:16:51 +00:00
< / body >
< / html >
