手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 无限级联菜单案例分享
jquery 无限级联菜单案例分享
摘要:看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了。对于地区级联菜单的生成一般是在/data/cache_model...

看到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="http://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>

<li><a href="#">菜单一</a>

<ul>

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

<li><a href="#">菜单四</a></li>

<li><a href="#">菜单五</a>

<ul>

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

<li><a href="#">菜单四</a></li>

<li><a href="#">菜单五</a>

<ul>

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

<li><a href="#">菜单四</a></li>

<li><a href="#">菜单五</a>

<ul>

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

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a>

<ul>

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a>

<ul>

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

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

</ul>

</li>

</ul>

【jquery 无限级联菜单案例分享】相关文章:

jQuery zTree加载树形菜单功能

基于jQuery实现的无刷新表格分页实例

jquery实现点击label的同时触发文本框点击事件的方法

下拉菜单的简易制作

Jquery中基本选择器用法实例详解

jQuery的基本概念与高级编程

7个有用的jQuery代码片段分享

javascript实现控制的多级下拉菜单

jquery插件validation实现验证身份证号等

实现无刷新联动例子汇总

精品推荐
分类导航