jquery 无限级联菜单案例分享
看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了。
对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中。不过,这个只是一个cache至于什么地方生成还不没找到,所以暂时作为一个测试。(知道的同学告诉我哈!十分感谢)
在areaid()的$js中添加
. 代码如下:
function delchild(num)
{
$('#load_$field select').each(function(i,obj){
if(obj.id >num)
$('#'+obj.id).remove();
})
}
对应的,在/load.php中elseif($field == 'areaid' && $value)修改
. 代码如下:
$str =
'<select id="'.$id.'"
onchange="delchild('.$id.');$(\'#'.$value.'\').val(this.value);this.disabled=false;area_load(this.value);"><option
value="1">'.$lang['please_select'].'</option>';
就能去掉"选定地区后不能更改"的效果,并且当没有下级地名时不会删除多余的选择框。
传统的级联菜单呢,个人觉得传输数据相对较大,而且和的关联似乎不好,所以就不贴代码了。
方法二:
. 代码如下:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu li').hover(function(){
$(this).children('ul').show();
$(this).focus().addclass('focusa')
},function(){
$(this).children('ul').hide();
$(this).focus().removeclass('focusa');
});
});
</script>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.menu { height:30px; line-height:30px; }
.menu li { float:left; position:relative;} /*这一级是导航*/
.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }
.menu li a:hover { color:#000; background:url(img/bg1.png); }
.menu li a.more { background:url(img/there.png) no-repeat 130px center; }
.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/
.menu li ul a { width:110px; }
.menu li ul a:hover { background:url(img/bg1.png);}
.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/
</style>
<ul class="menu">
<li><a href="#">菜单一</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="three">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="four">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单三</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单三</a>
<ul class="three">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
</ul>
</li>
</ul>
下一篇: jQuery呼吸轮播图代码实例
推荐阅读
-
jsp jquery实现级联菜单,jquery对select元素的简单操作
-
jQuery实现可收缩展开的级联菜单实例代码_javascript技巧
-
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
-
制作jquery遮罩层效果导航菜单代码分享
-
实例详解AngularJS实现无限级联动菜单
-
jQuery开发中无限级菜单的简单实例
-
jquery 实现二级/三级/多级联动菜单的思路及代码
-
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
-
JQuery异步加载无限下拉框级联功能实现示例
-
jquery 利用show和hidden实现级联菜单示例代码