jQuery-UI 適用方法(概要)

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>

前の記事

jQuery-UI テーマ選択

次の記事

jQuery-UI ボタン