JQuery dropdown

最新推荐文章于 2022-03-15 11:53:17 发布

iteye_20832

最新推荐文章于 2022-03-15 11:53:17 发布

阅读量308

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/iteye_20832/article/details/82603633

版权

<!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>

iteye_20832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery dropdown

[code="java"] Drop box div.dropdown{height:23px;background:none;margin:0;width:200px;} .dropdown{outline:none;} .dropdown h4{display:block;margin:0;height:23px;fo...
复制链接

扫一扫