`
zhyt710
  • 浏览: 203320 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

做一个伸缩式菜单顺便讲jquery插件开发方式

jQuery百度Yahoo编程Google 
阅读更多

其实我一直奇怪为什么jquery的书籍还能卖出去。当两年前我发现jquery时，在网上随便搜索几篇文章，然后在把它的文档下下来一看，呵呵，差不多一切就在这里。不用特意去买任何书籍。

 

易用且功能强大，jquery真的让人爱不释手。

 

最近工作做一个功能。受制于原来某人的设计以及编程限制，总是想办法跳过去，不去理会原有的东西。此话不多讲。只是在想问题的过程中想到的伸缩式菜单。回家就随便试一试。

 

于是就有了如下，用jquery开发的jquery插件式伸缩菜单。其实超级简单。

<html>
<head>
<title>这只是一个测试</title>
<script src="jquery-1.3.2.min.js"></script>
<style>
.orger {
	position: relative;
	background-color: yellow;
	height: 77px;
	width: 200px;
	border: 1px solid blue;
	overflow: hidden;
}
.newer {
    position: relative;
	background-color: yellow;
	height: 190px;
	width: 200px;
	border: 1px solid blue;
	overflow: auto;
}
</style>

</head>

<body>

<div style="position: absolute; top: 10px; left: 500px;">
<div style="background-color: blue; color: white; text-align: center;"> 菜单 </div>
<div id="theMenu">
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
</div>

</div>

<div style="height: 100px;">
</div>

<div style="">
<iframe id="detail" name="detail" src="http://www.google.cn" style="width: 100%; height: 100%"></iframe>
</div>

</body>

<script>

jQuery.fn.extend({
  expendMenu: function() {
    return this.each(function() { 
        $(this).attr("class", "orger");
        //对鼠标进出进行事件响应
		$(this).mouseover(function() {
			$(this).attr("class", "newer");
		});
		$(this).mouseout(function() {
			$(this).attr("class", "orger");
		});
		//对菜单链接点击进行响应
		$(this).find("a").click(function() {
			$(this).parent().attr("class", "orger");
		});
	});
  },
});

$("#theMenu").expendMenu();

</script>

</html>
 

可以发现，开发一个jquery插件的过程是如此简单。jQuery.fn.extend() 中加入你想要的功能

 

分享到：
| 也谈HashMap
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics