ot;>初一(1)班</a></li>
<li><a href="#">初一(2)班</a></li>
<li><a href="#">初一(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">大明二中</a></li>
</ul>
<script type="text/java script">
$(function () {
$("#menu").menu();
});
</script>
</body>
10.8 微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()
方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
<body>
<div id="divtest">
<div class="title">
选择颜色值</div>
<div class="content">
<span id="spnColor" class="input fl">
<input />
</span>
<span id="spnPrev" class="prev fr"></span>
</div>
</div>
<script type="text/java script">
$(function () {
//定义变量
var intR = 0, intG = 0, intB = 0, strColor;
$("input").spinner({
//初始化插件
max: 10,
min: 0,
//设置微调按钮递增/递减事件
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
},
//设置微调按钮值改变事件
change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
});
});
</script>
</body>
10.9 工具提示插件——tooltip
工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()
方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪,欢迎与我做朋友" />
</div>
</div>
</div>
<script type="text/java script">
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
</body>
十一、工具类函数
11.1 获取浏览器的名称与版本信息
在jQuery中,通过$.browser
对象可以获取浏览器的名称和版本信息,如$.browser.chrome
为true,表示当前为Chrome浏览器,$.browser.mozilla
为true,表示当前为火狐浏览器,还可以通过$.browser.version
方式获取浏览器版本信息。
<body>
<div id="divtest">
<div class="title">
<span class="fl">获取浏览器名称和版本号</span>
</div>
<div class="content"></div>
</div>
<script type="text/java script">
$(function () {
var strTmp = "您的浏览器名称是:";
if ($.browser.chrome) { //谷歌浏览器
strTmp += "Chrome";
}
if ($.brow