Jquery UI学习笔记（5）

最新推荐文章于 2024-12-04 11:31:58 发布

原创最新推荐文章于 2024-12-04 11:31:58 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #button #jquery ui #特效 #界面

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JqueryUI库来美化HTML页面中的按钮、单选按钮和复选按钮，并展示了如何添加图标增强视觉效果。

使用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"});
			});