JQuery第一弹：accordion菜单详解

PS:
1.需要用户有点Jquery核心插件的基础
2.所有讲解都不包含CSS样式，只说动态效果，样式根据自己实际情况修改
一.导入Jquery核心插件
二.导入与accordion菜单相关的UI插件（ui.core.js，ui.accordion.js），
或直接导入jquery-ui-1.7.2.custom.min.js(不建议，会导致页面加载时多出没必要的插件加载)
三.用html标签定义accordion菜单（分静态和动态）：

1.静态菜单：
首先是最外层div，相当于是放accordion菜单的容器,
<div id="accordion">
</div>
然后是里面的每个accordion菜单项,其中每个项分为标题项和内容项,
<div id="accordion">

<div id="accordionTitle">title(这里放标题)</div>
<div id="accordionContent">content(这里放内容)</div>

</div>
这样就做成了只有一个菜单项的accordion菜单，若有多个菜单，重复即可，如:
<div id="accordion">

<div id="accordionTitle1">title(这里放标题)</div>
<div id="accordionContent1">
<p>内容1</p>
<p>内容2</p>
</div>

<div id="accordionTitle2">title(这里放标题)</div>
<div id="accordionContent2">
<p>内容1</p>
<p>内容2</p>
</div>

</div>

2.动态生成菜单
同样首先定义最外层div，相当于是放accordion菜单的容器,
<div id="accordion">
</div>
然后通过异步获取数据，并返回结果，达到动态生成效果，具体步骤如下：
①在script标签中定义异步调用的方法:
<script>
function getAccordionAsync()
{
$.ajax({
//提交的方法
type:"post", 
//要去获取数据的页面，自己根据实际情况而定，可以是asp,jsp,httphandler(一般处理程序)，servlet
url:"doAccordion.aspx", 
//获取数据成功后将得到的数据作为id为accordion的div的内容
success:function(result)
{
$("#accordion").html(result);
}
});
}
</script>
②新建一个页面，用来生成accordion菜单的所有内容，这里以asp页面为例子：
在后台代码的load事件中添加如下类似代码：
 protected void Page_Load(object sender, EventArgs e)
    {
           //这里以常用的菜单形式，即某用户有多个父菜单，每个父菜单下有多个子权限，且只有两级菜单举例
           //获取当前用户
            UserInfo LoginUser = Session["LoginUser"] as UserInfo;
            //获取当前用户所有菜单

            List<RoleRight> roleRights = RoleRightManager.GetRoleRightsByRoleId(LoginUser.Role.Id);
            //要返回的内容
            Literal lt = new Literal();
            //遍历所有菜单
            foreach (RoleRight roleRight in roleRights)
            {
                //获取父级菜单
                if (roleRight.Node.ParentNodeId == 0)
                {
                    string content = "";
                    //设置标题内容
                    string head = roleRight.Node.DisplayName;
                    //获取当前父菜单下的子菜单
                    foreach (RoleRight rr in roleRights)
                    {
                        if (rr.Node.ParentNodeId == roleRight.Node.Id)
                        {
                            //设置子菜单要显示的内容及点击时要跳转到的页面
                            content += "<div class='accrodionContent'><a target='mainFrame' href='" + rr.Node.NodeURL + "'>" + rr.Node.DisplayName + "</a></div>";
                        }
                    }
                    //每遍历出一个父菜单及其下所有子菜单，就追加到lt.Text上，形成一个字符串格式的内容
                    lt.Text += "<div class='accrodionHead'>" + head + "</div><div>" + content + "</div>";
                }
            }
            //最后将拼接好的字符串返回，这里的返回的lt.Text就是上面getAccordionAsync方法中成功后得到的数据result
            Response.Write(lt.Text);

 

四.生成accordion菜单后，在页面首次加载时调用accordion方法，使之能够滑动
有以下几种动态样式：
1.$("#accordion").accordion();默认样式
2.$("#accordion").accordion({
autoHeight: false
});
菜单项是否使用相同高度，false为自动适应内容高度,true为所有菜单高度相同，一般使用false
3.$("#accordion").accordion({
event: "mouseover"
});
鼠标移上时触发滑动效果
以上三个位常用的效果，其他还有一些可以参考demo里的方法