JQuery dropdown

webook_java

浏览: 58986 次
性别:
来自: 成都

最近访客更多访客>>

newmcz

fengzy001

xiaomabobo

TopLongMan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head>
		<title>Drop box</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<style>
			  div.dropdown{height:23px;background:none;margin:0;width:200px;}
			 .dropdown{outline:none;}
			 .dropdown h4{display:block;margin:0;height:23px;font:12px/23px Arial,Helvetica,sans-serif; text-decoration:underline;color: #666;}
			 .dropdown h4 span{background: url(images/ico_select.gif) no-repeat 100% 50%;padding-right: 20px;cursor:pointer}
			 .dropdown ul{position:absolute;background:url(images/bg_country_a.gif) no-repeat 0 0; _background-attachment:fixed;width:170px;padding-top:10px;display:none;margin:0;padding:0;height:150px; }
			 .dropdown ul li{width:145px;margin:0;margin-left:2px;} 
			 .dropdown ul li{background:#FFF;height:19px;display:block;cursor:pointer;font:400 11px/19px Arial,Helvetica,sans-serif;margin:0 0 6px 3px; background:none;}
			 .dropdown ul li.over{background:#efefef}
			 .dropdown ul li img {margin-right:4px;}
		</style>
		
	</head>
<body>
	<div id="div_currency" class="dropdown" hidefocus="true" tabindex="1">
		<h4><span>Change Currency</span></h4>
		<ul style="display: none; " class="options">
			<li class=""> Current Currency</li> 
			<li class=""><img src="images/GBP.gif">GBP 53.45 ~ 71.94 </li>
			<li class=""><img src="images/EUR.gif">EUR 64.79 ~ 87.20 </li>
			<li class=""><img src="images/CAD.gif">CAD 85.85 ~ 115.54 </li>
			<li class=""><img src="images/AUD.gif">AUD 96.38 ~ 129.71 </li> 
		</ul>
	</div>
	
	<div id="book" class="dropdown" hidefocus="true" tabindex="1">
		<h4><span>Change Currency1</span></h4>
		<ul style="display: none; " class="options">			
			<li class=""><img src="images/EUR.gif">EUR 64.79 ~ 87.20 </li>
			<li class=""><img src="images/GBP.gif">GBP 53.45 ~ 71.94 </li>			
			<li class=""><img src="images/CAD.gif">CAD 85.85 ~ 115.54 </li>
			<li class=""><img src="images/AUD.gif">AUD 96.38 ~ 129.71 </li> 
		</ul>
	</div>
	
	<script type="text/javascript">
		(function($){
			$.fn.extend({
				dropdown: function() {
					return this.each(function(i,obj){
						var obj= $(this);
						$("h4 span",obj).click(function(){
							$(".options",obj).show();
						});
						obj.bind("blur",function(){
							$(".options",obj).hide();
						});
						$("li",obj).click(function(){
							$("h4 span",obj).html($(this).html());
							$(".options",obj).hide();
						})						
					});
				}
			});
		})(jQuery);
		$(document).ready(function(){ 
			$(".dropdown").dropdown();
			 
		});
	</script>
</body>
</html>

images.rar (3 KB)
下载次数: 2

分享到：

JQuery 轮播效果 | log4j

2014-08-28 15:47
浏览 830
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery dropdown

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery dropdown

评论

发表评论

相关推荐

最近访客更多访客>>