`
wh_xia_jun
  • 浏览: 16014 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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里的方法
分享到:
评论

相关推荐

    jquery accordion 菜单折叠效果

    5. **事件处理**:jQuery UI的Accordion提供了多种事件,如`create`、`activate`和`beforeActivate`,可以根据需要绑定回调函数,以实现更复杂的交互逻辑。 jQuery Accordion的优点包括: - **节省空间**:通过...

    基于JQuery做的Accordion菜单源程

    **基于JQuery的Accordion菜单源码解析** Accordion菜单是一种常见的网页交互元素,它允许用户通过展开和折叠的方式查看和操作菜单项。在HTML页面中,使用JQuery库可以轻松实现这种效果,尤其对于构建可扩展的、易于...

    jquery-bootstrap-accordion下拉菜单u.rar

    本资源"jquery-bootstrap-accordion下拉菜单u.rar"提供了一个美观、易用的下拉菜单解决方案,结合了jQuery和Bootstrap两大热门框架,使得开发者可以轻松地为网站添加功能强大且视觉效果出色的下拉菜单。 Bootstrap...

    jquery UI accordion 菜单折叠

    jQuery UI Accordion是一款非常流行的JavaScript库,用于创建交互式的折叠菜单。这个组件使得网页内容能够以一种有序且节省空间的方式展现,用户可以逐个展开或关闭各个部分,从而提高用户体验。在本文中,我们将...

    多层滑动弹出Accordion手风琴导航菜单效果(jQuery)

    而“多层滑动弹出Accordion手风琴导航菜单”是一种高效的空间利用方式,尤其适用于内容丰富的网站。本文将深入探讨这种jQuery实现的手风琴菜单效果,以及其背后的原理和实现方法。 首先,"Accordion"这个名字来源于...

    jquery accordion tree 菜单栏 框架示例

    jQuery Accordion是一款非常流行的JavaScript插件,用于创建可折叠的面板式布局,常用于构建菜单栏、信息分类或导航结构。在本示例中,我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。 首先,让...

    accordion菜单

    开发者可能会使用`accordion('activate', index)`方法来激活特定的菜单项,或者使用`accordion('option', optionName, value)`来更改accordion的配置,例如设置是否允许多选(multiExpand)、是否自动激活第一个项...

    jQuery菜单插件j-accordion.js.zip

    j-accordion.js 是 jQuery 的一个手风琴效果的插件,可自动对 hovered 条目进行扩展,并收缩其他项。可用做菜单用途。

    jQuery accordion插件:一个可折叠的面板【菜单】特效.rar

    jQuery accordion插件是一种广泛应用于网页开发中的交互式组件,它为用户提供了一种可折叠的面板效果,常用于创建菜单、导航栏或者信息展示区域。在网页设计中,accordion(手风琴)效果允许用户逐个展开或收起内容...

    jquery插件——多级菜单

    2. **jQuery选择器**:jQuery的选择器是其强大之处,能够高效地选取DOM元素。在多级菜单中,我们可能会使用`&gt;`(子元素选择器)、`+`(相邻兄弟选择器)或`~`(后续兄弟选择器)来选取特定的菜单项。 3. **事件绑定...

    jquery.accordion源码

    其中,jQuery UI中的Accordion组件是一种常见的交互元素,它将多个内容区块折叠在一个有限的空间内,用户可以逐个展开查看。本文将深入探讨jQuery Accordion的源码,帮助开发者理解其工作原理,以便于自定义和优化。...

    jquery Accordion 收缩展开的多级导航

    jQuery Accordion是一款非常流行的JavaScript库,它主要用于创建交互式的折叠面板,常用于网站的导航菜单、FAQs或任何需要组织成可展开/折叠内容的场景。这个组件是jQuery UI库的一部分,提供了优雅的动画效果和易用...

    左侧菜单 jquery accordion的应用修改

    JQuery Accordion 是一个流行的jQuery插件,常被用于实现这种可折叠的、交互式的侧边栏菜单。这个应用修改教程将带你深入理解如何使用JQuery Accordion来创建一个支持无限子菜单的左侧导航系统。 首先,让我们了解...

    Accordion 菜单折叠效果控件

    然后,使用jQuery的`.accordion()`方法初始化这个元素,设置相应的选项如是否自动激活第一个面板、是否允许多面板同时展开等。 例如,以下是一个简单的Accordion菜单示例代码: ```html &lt;!DOCTYPE html&gt; ...

    jquery菜单展开插件(jqueryaccordion)

    **jQuery Accordion 插件详解** 在Web开发中,创建交互性强、用户友好的界面是至关重要的。jQuery Accordion插件就是这样的一个工具,它能够帮助开发者轻松地创建可折叠和展开的菜单,使得网站内容组织更加清晰,...

    jQuery accordion menu垂直展开收起的导航菜单.rar

    jQuery accordion menu垂直展开收起的导航菜单,同样是扁平化的Bootstrap的风格,这款菜单同样带有动画展开效果,点击右侧的竖向节点线就可展开菜单项,修改菜单为中文内容即可。本菜单可作成问答式客服网页,标题...

    jquery弹性手风琴(导航菜单)效果

    《jQuery弹性手风琴导航菜单实现详解》 在网页设计中,导航菜单是不可或缺的一部分,它为用户提供清晰的页面结构和便捷的操作路径。而“jQuery弹性手风琴”效果则是导航菜单的一种创新形式,它通过动态展示和隐藏...

    用jquery UI实现的手风琴菜单、折叠菜单

    例如,要设置手风琴菜单默认展开第一个项,可以这样做: ```javascript $("#accordion").accordion({ active: 0 }); ``` 5. **响应式设计**:为了适应不同设备,你可能还需要添加响应式设计,使得菜单在移动设备...

    jquery和CSS3半透明垂直Accordion特效

    **jQuery和CSS3半透明垂直Accordion特效详解** Accordion特效在网页设计中被广泛使用,它是一种可折叠的面板集合,用户可以逐个展开或关闭这些面板以查看或隐藏内容。在本项目中,我们将深入探讨如何利用jQuery库和...

Global site tag (gtag.js) - Google Analytics