Jquery UI学习笔记（5）

使用Jquery UI，可以给HTML页面中的界面焕然一新，这里所涉及的是按钮的设计。

<span id="button1">Button1</span>
	

<span id="button2">Button2</span>
	
	<script type="text/javascript">
		$("#button1,#button2").button({
			icons:"ui-icon-calendar",
			text:false,//指定是否显示按钮文字
			label:"我们是按钮",//按钮上显示的文字
			disabled:true,//按钮是否激活
		});
	</script>

这里是单选按钮:

<div class="sexsex">

	性别:<input type="radio" name="sex" id="male"><label for="male">男</label>
	<input type="radio" name="sex" id="female"><label for="female">女</label>

</div>

$("input").button();
$(".sexsex").buttonset();//让效果更好看一点

复选按钮:

同上，checkbox,如果要显示效果好点，同样可以外面加一个<div></div>

还可以在按钮上显示图标:

<span id="volume">Volume</span>		
	
	<script>
		$("#volume").button({
				icons:{secondary:"ui-icon-volume-off"}
		}).click(function(event){
			var volume=$(this).button("option","icons").secondary=="ui-icon-volume-off"?false:true;
			if(volume) 
				$(this).button("option","icons",{secondary:"ui-icon-volume-off"});
			else 
				$(this).button("option","icons",{secondary:"ui-icon-volume-on"});
			});
	</script>