Dari http://docs.jquery.com/UI/Theming/API kita mendapatkan informasi mengenai class-class dalam jQuery UI CSS Framework antara lain
- .ui-widget
Class ini diaplikasikan ke bagian luar dari container - .ui-widget-header
Class ini diaplikasikan ke bagian header dari container - .ui-widget-content
Class ini diaplikasikan ke bagian content dari container - .ui-corner-top
Class diaplikasikan untuk tampilan sudut bagian atas - .ui-corner-bottom
Class diaplikasikan untuk tampilan sudut bagian bawah
Kita akan membuat sebuah file containers.html dengan isi sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Containers</title>
<link rel=”stylesheet” href=”development-bundle/themes/base/jquery.ui.all.css”>
</head>
<body>
<div class=”ui-widget”>
<div class=”ui-widget-header ui-corner-top”>
<h2>Ini di dalam class ui-widget-header ui-corner-top</h2>
</div><!–end of ui-widget-header ui-corner-top–>
<div class=”ui-widget-content ui-corner-bottom”>
<p>Ini di dalam class ui-widget-content ui-corner-bottom</p>
</div><!–end of ui-widget-content ui-corner-bottom–>
</div><!–end of ui-widget–>
</body>
</html>
Hasilnya adalah seperti tampilan di bawah ini
Kita bisa menelusuri class-class yang dipakai di development-bundle/themes/base/jquery.ui.themes.css dan isinya seperti di bawah ini:
/* Component containers
———————————-*/
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
Untuk demonya silahkan klik http://aris.proweb.asia/containers.html .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.