jQuery-UI ボタン

jQuery-uiボタン ノーマル
Button


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

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


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

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


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

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


<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


<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のテーマページで調べられる