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" >
< script src = "../../external/jquery/jquery.js" > < / script >
< script src = "../../ui/core.js" > < / script >
< script src = "../../ui/widget.js" > < / script >
< script src = "../../ui/button.js" > < / script >
< script src = "../../ui/checkboxradio.js" > < / script >
< script src = "../../ui/menu.js" > < / script >
< script src = "../../ui/position.js" > < / script >
< script src = "../../ui/selectmenu.js" > < / script >
< script src = "../../ui/controlgroup.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< script >
$(function() {
2014-08-23 03:39:35 +00:00
$( ".controlgroup" ).controlgroup()
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
2014-08-28 19:16:51 +00:00
});
< / script >
< style >
.ui-controlgroup-vertical {
2014-08-23 03:39:35 +00:00
width: 150px;
2014-08-28 19:16:51 +00:00
}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
text-align: center;
}
< / style >
< / head >
< body >
< div class = "widget" >
< h1 > Controlgroup< / h1 >
< fieldset >
< legend > Rental Car< / legend >
< div class = "controlgroup" >
< 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" > 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" >
< 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" >
< 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 >
