jquery select框图片选择器点击图片给表单select框赋值



164 653 218



特效描述:图片选择器 点击图片 表单select框赋值,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/examples.css">
<link rel="stylesheet" type="text/css" href="css/image-picker.css">

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/image-picker.min.js" type="text/javascript"></script>

3. HTML代码

<div id="container">
	<h1>图像选取器</h1>
	<p class='lead'>image-picker是一个简单的jQuery插件,将select元素进入一个更加用户友好的图形界面。</p>
	<h2>演示一</h2>
	<div class="picker">
		<select class='image-picker'>
			<option data-img-src='img/01.jpg' value='1'>  Page 1  </option>
			<option data-img-src='img/02.jpg' value='2'>  Page 2  </option>
			<option data-img-src='img/03.jpg' value='3'>  Page 3  </option>
			<option data-img-src='img/04.jpg' value='4'>  Page 4  </option>
			<option data-img-src='img/05.jpg' value='5'>  Page 5  </option>
			<option data-img-src='img/06.jpg' value='6'>  Page 6  </option>
			<option data-img-src='img/07.jpg' value='7'>  Page 7  </option>
			<option data-img-src='img/08.jpg' value='8'>  Page 8  </option>
			<option data-img-src='img/09.jpg' value='9'>  Page 9  </option>
			<option data-img-src='img/10.png' value='10'> Page 10 </option>
			<option data-img-src='img/11.png' value='11'> Page 11 </option>
			<option data-img-src='img/12.png' value='12'> Page 12 </option>
		</select>
	</div>
	<h2>演示二</h2>
	<div class="picker">
		<select class="image-picker">
			<option value=''></option>
			<option data-img-src='img/1.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/2.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/3.jpg' value='3'>Cute Kitten 3</option>
		</select>
	</div>
	<h2>演示三</h2>
	<div class="picker">
		<select multiple="multiple" class="image-picker">
			<option data-img-src='img/4.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/5.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/6.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/7.jpg' value='4'>Cute Kitten 4</option>
		</select>
	</div>
	<h2>演示四</h2>
	<div class="picker">
		<select class="image-picker" data-limit="2" multiple="multiple" >
			<option data-img-src='img/4.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/5.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/6.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/7.jpg' value='4'>Cute Kitten 4</option>
		</select>
	</div>
	<h2>演示五</h2>
	<div class="picker">
		<select class="image-picker limit_callback" data-limit="2" multiple="multiple">
			<option data-img-src='img/4.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/5.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/6.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/7.jpg' value='4'>Cute Kitten 4</option>
		</select>
	</div>
	<h2>演示六</h2>
	<div class="picker">
		<select class="image-picker show-labels">
			<option data-img-src='img/4.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/5.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/6.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/7.jpg' value='4'>Cute Kitten 4</option>
		</select>
	</div>
	<h2>演示七</h2>
	<div class="picker">
		<select class="image-picker show-labels">
			<option data-img-src='img/4.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/5.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/6.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/7.jpg' value='4'>Cute Kitten 4</option>
		</select>
	</div>
	<h2>演示八</h2>
	<div class="picker">
		<select class="image-picker">
			<option data-img-src='img/8.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/9.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/10.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/11.jpg' value='4'>Cute Kitten 4</option>
			<option data-img-src='img/12.jpg' value='5'>Cute Kitten 5</option>
		</select>
	</div>
	<h2>演示九</h2>
	<div class="picker">
		<select class="image-picker masonry">
			<option data-img-src='img/20.jpg' value='1'>Cute Kitten 1</option>
			<option data-img-src='img/13.jpg' value='2'>Cute Kitten 2</option>
			<option data-img-src='img/14.jpg' value='3'>Cute Kitten 3</option>
			<option data-img-src='img/15.jpg' value='4'>Cute Kitten 4</option>
			<option data-img-src='img/16.jpg' value='5'>Cute Kitten 5</option>
			<option data-img-src='img/17.jpg' value='6'>Cute Kitten 6</option>
		</select>
	</div>
</div>
<!--必要文件-->  
<!--瀑布流布局插件-->
<!--图片选择器插件-->
<script type="text/javascript">
$(document).ready(function(){
	$("select.image-picker").imagepicker({
		hide_select:false
	});
	$("select.image-picker.show-labels").imagepicker({
		hide_select:false, 
		show_label:true
	});
	$("select.image-picker.limit_callback").imagepicker({
		limit_reached:function(){
			alert('We are full!')
		},hide_select:false
	});
	//瀑布流布局
	var container = $("select.image-picker.masonry").next("ul.thumbnails");
	container.imagesLoaded(function(){ 
		container.masonry({ 
			itemSelector:"li"
		}); 
	});
});
</script>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 选项卡自动切换 value赋值

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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