利用jQuery实现下拉框美化插件



14 53 18



特效描述:利用jQuery实现 下拉框 美化插件,利用jQuery实现下拉框美化插件

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/select-mania.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-green.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-orange.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-red.css" rel="stylesheet" type="text/css">
<link href="css/themes/select-mania-theme-square.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/select-mania.js"></script>

3. HTML代码

<div class="container">
	<h1>jQuery select-mania 插件示例演示</h1>
	<h2>Square+Red Theme</h2>
	<select class="demo-1">
	<option value="sx">初中数学</option>
	<option value="yw">初中语文</option>
	<option value="yy">初中英语</option>
	<option value="wl">初中物理</option>
</select>
	<h2>Darkblue + Large</h2>
	<select class="demo-2">
	<option value="sx">初中数学</option>
	<option value="yw">初中语文</option>
	<option value="yy">初中英语</option>
	<option value="wl">初中物理</option>
</select>
	<h2>Orange + Medium</h2>
	<select class="demo-3">
	<option value="sx">初中数学</option>
	<option value="yw">初中语文</option>
	<option value="yy">初中英语</option>
	<option value="wl">初中物理</option>
</select>
	<h2>Green + No Controls</h2>
	<select class="demo-4">
	<option value="sx">初中数学</option>
	<option value="yw">初中语文</option>
	<option value="yy">初中英语</option>
	<option value="wl">初中物理</option>
</select>
	<h2>带图标的optgroup</h2>
	<select class="demo-5">
	<optgroup data-icon="fa fa-user" label="Group">
		<option value="1" data-icon="fa fa-weixin">微信</option>
		<option value="2" data-icon="fa fa-weibo">微博</option>
		<option value="4" data-icon="fa fa-qq">QQ</option>
		<option value="5" data-icon="fa fa-facebook">Facebook</option>
		<option value="6" data-icon="fa fa-github">github</option>
		</optgroup>
</select>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="js/select-mania.js"></script> 
<script type="text/javascript">
$('.demo-1').selectMania({
	size: 'small', 
	themes: ['square','red'], 
	placeholder: 'Please select me!',
	removable: true,
			search: true,
});
$('.demo-2').selectMania({
	size: 'large', 
	themes: ['darkblue'], 
	placeholder: 'Please select me!',
	removable: true,
			search: true
});
$('.demo-3').selectMania({
	themes: ['orange'], 
	placeholder: 'Please select me!',
	removable: true,
			search: true
});
$('.demo-4').selectMania({
	themes: ['green'], 
	placeholder: 'Please select me!'
});
$('.demo-5').selectMania({
	size: 'small', 
	themes: ['square','blue'], 
	placeholder: 'Please select me!',
	removable: true,
	search: true,
});
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 下拉框 select下拉菜单 select美化 select美化框 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到