jQuery-UI ボタン

jQuery-uiボタン ノーマル



<button id="myButton1">Button</button>
<script type="text/javascript">
  $(function(){
    $('#myButton1').button();
  });
</script>

jQuery-uiボタン 画像付き(左側)



<button id="myButton2">
Button</button>
<script type="text/javascript">
  $(function(){
    $('#myButton2').button({
      icons: {
        primary: 'ui-icon-home'
      }
    });
  });
</script>

jQuery-uiボタン 画像付き(右側)



<button id="myButton3">Button</button>
<script type="text/javascript">
  $(function(){
    $('#myButton3').button({
      icons: {
        secondary: 'ui-icon-triangle-1-e'
      }
    });
  });
</script>

jQuery-uiボタン 画像付き(両側)



<button id="myButton4">Button</button>
<script type="text/javascript">
  $(function(){
    $('#myButton4').button({
      icons: {
        primary: 'ui-icon-home',
        secondary: 'ui-icon-triangle-1-e'
      }
    });
  });
</script>

jQuery-uiボタン 画像のみ



<button id="myButton5">Button</button>
<script type="text/javascript">
  $(function(){
    $('#myButton5').button({
      icons: {
        primary: 'ui-icon-home'
      },
      text: false
    });
  });
</script>

jQuery-uiボタン ツールバー風






<div style="padding: 10px;">
  <button id="home">Home</button>
  <button id="config">Config</button>
  <button id="delete">Delete</button>
  <button id="contact">Contact</button>
  <button id="help">Help</button>
</div>
<script type="text/javascript">
  $(function(){
    $('#home').button({icons: {primary: 'ui-icon-home'},text: false});
    $('#config').button({icons: {primary: 'ui-icon-wrench'},text: false});
    $('#delete').button({icons: {primary: 'ui-icon-trash'},text: false});
    $('#contact').button({icons: {primary: 'ui-icon-mail-closed'},text: false});
    $('#help').button({icons: {primary: 'ui-icon-search'},text: false});
  });
</script>

指定する画像名称はjQuery-uiのテーマページで調べられる
jQueryUiIcon

jQuery-UI

次の記事

jQuery-UI スピナー