jquery select框圖片選擇器點擊圖片給表單select框賦值



172 684 229



特效描述:圖片選擇器 點擊圖片 表單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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表