imovies
当前位置:首 页>> 百 宝 箱 >>jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

Selectyze : SKIN YOUR OWN SELECT LISTS WITH JQUERY & CSS
  折腾网页的筒子们,基本都知道表单里有几个顽固分子,Select下拉选择框、Radio单选按钮、Checkbox复选框,这三个东东无法用样式表来直接定义它们的样式,比如下拉框弹出列表的高度,下拉框的皮肤,单选按钮和复选框的皮肤。现在可以通过jQuery再加上CSS来美化他们了。本文仅仅介绍的是美化Select下拉选择框,Radio和Checkbox也有相关的jQuery插件可以搞定,且听下回分解。 jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框 插件特点:
  通过Selectyze插件把Select元素隐藏,在其下新构建一个DIV元素,这个DIV里面包含a和ul元素用来模拟Select元素的行为。
  OK,下载这个jQuery插件Selectyze先,压缩包里包含有样例,插件本身带有5种风格可以供你选择,如果不满意,还可以自己弄一套自己的样式,仅仅需要你有点CSS的知识。
插件使用:
  首当其冲当然是加载插件和样式表文件了,代码如下:
<link rel="stylesheet" type="text/css" href="Selectyze.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Selectyze.jquery.min.js"></script>
  接着就是在你的Select下拉列表框的代码里,给定一个ID或者Class,这样插件可以通过ID或者Class来美化你的下拉框。
			<select name="style5" class="selectyze5">
            	<!-- 下面这个作为下拉列表框里默认显示内容 -->
				<option>点击选择列表内容</option>
                <!-- 下面这个optgroup标签可以用来给列表内容分组 -->
				<optgroup label="《虞美人》李煜">
					<option value="春花秋月何时了">春花秋月何时了</option>
					<option value="往事知多少">往事知多少</option>
					<option value="小楼昨夜又东风">小楼昨夜又东风</option>
					<option value="故国不堪回首月明中">故国不堪回首月明中</option>
					<option value="雕阑玉砌应犹在">雕阑玉砌应犹在</option>
                    <option value="只是朱颜改">只是朱颜改</option>
                    <option value="问君能有几多愁">问君能有几多愁</option>
                    <option value="恰是一江春水向东流">恰是一江春水向东流</option>
				</optgroup>
			</select>
  最后Selectyze粉墨登场,下拉框美不美就看它了,调用代码如下:
	<script type="text/javascript">
		$(document).ready(function(){
			$('.selectyze1').Selectyze({
				theme : 'skype',		//下拉框的风格
				effectOpen:'fade',		//下拉框弹出时的效果
				effectClose:'slide'		//下拉框收回时的效果
			});
		});
	</script>
插件选项:
theme			默认值 : 'css3' 风格:css3,firefox,grey,mac,skype
effectOpen		默认值 : 'slide' 下拉框打开时的效果
effectClose		默认值 : 'slide' 下拉框收起时的效果

浏览器兼容性:
MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox
Opera
Apple Safari
Google Chrome
jQuery_Selectyze_v1.1.rar
47.25KB
微信支付宝

标 签:CSSjQueryHTMLSelectyze下拉列表框Select

评 论0 引 用0 浏 览7523

上一篇[MOVIESHOW] A Very Long Engagement 爱在战火纷飞时

下一篇“双面” 劳动节

说点什么:

正文内容:

 

图片博文

中国电信正月十五

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。