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

[ 作者:笑傲江湖 发布于:2012年-4月-30日 13:23 星期一  分类:百 宝 箱 ]

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

微信支付宝

标签: CSS jQuery HTML Selectyze 下拉列表框 Select

评论0 引用0 浏览5580

说点什么:

正文内容:

 




图片博文
Happy Birthday