论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

jQuery插件实现无限级别下拉菜单源码

文章类别:Javascript | 发表日期:2010-3-27 14:16:30

21视频教程网3月27日整理

这是一个我自己做的jQuery无限级下拉菜单的插件,先在放上来大家共享,同时谢谢留下宝贵意见。

已知不足:在横向空间不足时,没有增加菜单弹出方向智能判断



插件说明:
1、组件依附于jQuery 1.3.x版本
2、下拉菜单完全由ul,li,span系列元素模拟而成,完美兼容IE6~8,FF,Chrome,Opera
3、列表内数据通过Json数组进行赋值,样式如下:

代码:
var colObj = {"Items":[
    {"name":"菜单项目标题","topid":"0","colid":"1","value":"菜单项目标题1","fun":function(){}},
                  ...
  ]}

参数说明:
其中topid为菜单上级菜单id,0为顶级
colid为菜单id,0为顶级
value为最终post时传送的结果(以hidden形式的input进行传递,input的name就是所依附dom的id值)
fun为回调函数
4、最后进行实例:

代码:
$("#divid").mlnColsel(colObj,{
    title:"栏目下拉菜单",     //默认状态下select选中项的名称
    value:"-1",                    //默认状态下select选中项的值
    width:100                     //此值暂时无效
  });

5、表单提交后,后台以普通resquest方式接收即可(asp为例)

代码:
dim selects=request.form("divid")

使用过程用有任何疑问可以到

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058