jQuery-UI 適用方法(概要)
【参照方法】
参照するのはスタイルシートとJavaScriptファイル
①スタイルシート
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.css">
②JavaScriptファイル
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
※Google等が公開しているスタイルシート、JavaScriptファイルを参照する場合
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
【適用方法】
通常のhtml部品とは別に、
<script type="text/javascript">
$(function(){
$('button').button();
});
</script>
とhtml部品に対するjQueryを書く
以下、主なhtml部品、jQueryの適用結果、その適用方法
↓
<button id="myButton">button</button>
<script type="text/javascript">
$(function(){
$('#myButton').button({
icons: {
secondary: 'ui-icon-triangle-1-e'
}
});
});
</script>
↓
<script type="text/javascript">
$(function(){
$('#price').spinner({
max: 10000,
min: 100,
step: 10
});
});
</script>
↓
←クリックするとカレンダー表示
<input type="text" id="date" size="10" />
<!–1国際化対応のライブラリをインポート–>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript">
$(function() {
// 2日本語を有効化
$.datepicker.setDefaults($.datepicker.regional['ja']);
// 3日付選択ボックスを生成
$('#date').datepicker({
dateFormat: 'yy/mm/dd'
});
});
</script>
↓
<script type="text/javascript">
$(function(){
$('.chkgroup').buttonset();
});
</script>
↓
<script type="text/javascript">
$(function(){
$('.rdogroup').buttonset();
});
</script>
