Amas的开源Jquery插件【PopNav】
这是啥? 额。。。我叫它多级联动横向弹出可关闭导航。。我了个去。。我自己都晕。。
好吧。。。隆重推出寡人的发布的第二套Jquery开源插件——PopNav(额。我知道名字苦了点)。
如何运用?——你猜。猜对了告诉你。。
好吧,不开玩笑。
==== 首先是html中的调用代码 ====
<script src="js/jquery.1.7.2.min.js"></script> //版本可高不可低 <script src="js/jquery.popnav.js"></script>
==== 必须加载的样式支持 ====
<link href="css/popnav.css" rel="stylesheet" type="text/css" />
==== Dom标准 ====
<div id="popnav"> <div class="titile">模块标题</div> <div class="box"> <ul class="list"> <li class="list-li"> <p class="list-p"><a href="###">一级分类</a></p> <div class="popbox"> <div class="clear-broder"></div> <div class="listbox"> <dl class="dl-content-list yx"> <dt class="dt-content-list">二级分类</dt> <dd class="dd-content-list"><strong>CET </strong>|<a href="###">链接</a><a href="###">链接</a></dd> </dl> <dl class="dl-content-list"> <dt class="dt-content-list">二级分类</dt> <dd class="dd-content-list"><strong>PETS</strong>|<a href="###">链接</a><a href="###">链接</a></dd> </dl> </div> <div class="news-list"> <h2 class="title-news-list">推荐标题</h2> <ul class="ul-news-list"> <li class="li-news-list"><a href="###">链接</a></li> <li class="li-news-list"><a href="###">链接</a></li> </ul> <a class="close" title="关闭">关闭</a> </div> </div> </li> <li class="list-li"> <p class="list-p"><a href="###">一级分类</a></p> <div class="popbox"> <div class="clear-broder"></div> <div class="listbox"> <dl class="dl-content-list yx"> <dt class="dt-content-list">二级分类</dt> <dd class="dd-content-list"><strong>CET </strong>|<a href="###">链接</a><a href="###">链接</a></dd> </dl> <dl class="dl-content-list"> <dt class="dt-content-list">二级分类</dt> <dd class="dd-content-list"><strong>PETS</strong>|<a href="###">链接</a><a href="###">链接</a></dd> </dl> </div> <div class="news-list"> <h2 class="title-news-list">推荐标题</h2> <ul class="ul-news-list"> <li class="li-news-list"><a href="###">链接</a></li> <li class="li-news-list"><a href="###">链接</a></li> </ul> <a class="close" title="关闭">关闭</a> </div> </div> </li> </ul> </div> </div>
==== 把以下代码放到#popnav同级的下面 ====
<script type="text/javascript"> $("#popnav").popnav({_event:0}); </script>
参数:{ _event: 0(0为鼠标经过显示)、1(1为鼠标点击显示)、2及以上同0效果 }
Over,搞开源的不容易。啥也不图,只是为了大家服务,给新手一些遍历。。真的。。
这年代太缺雷锋了,如果我们中国多出几个Jquery这样的js库,尽管可能很烂(如某搜索引擎的那个tar。。。),但我们也会支持的,不是么?
我的插件,请善用。如自己能写,请尽量不使用它。它随便利,但毕竟是死的。那天改了需求你还得来求我不是?
转载必须注明出处,否则绝对砸你家窗户。
好了。。。下载Demo
兴趣,是最好的老师。