关闭

Jquery UI插件---手风琴效果

标签: jqueryuidivheadercssfunction
2158人阅读 评论(1) 收藏 举报
分类:

Jquery UI插件---手风琴效果

今天我们学习了JqueryUI插件,感觉这个确实是个很好用的制作页面的工具。做出来的页面简单大方,很漂亮。

下面,我就主要来介绍一下我们今天学习的jquery UI插件的一种手风琴的效果。用它可以制作后台的一种手风琴式的菜单,比较不错哦!

那么,下面我们来看一下这个手风琴的效果:如下图所示:

怎么样,。还不错吧。

那么下面让我们来具体的学习一下实现它的代码。

1、  首先我们需要将我们所需要的jquery的版本的是1.8的,我们要将所需的CSS文件和JS文件导入到项目中,如下图:

 

2、  下面我们要新建一个JSP的页面。accordion.jsp

首先我们要引入JS文件和CSS文件。

如下代码:

<!-- 引入相应的jqueryUI的类库文件 -->

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

3、  下面我们要把显示的页面效果写出来:代码如下:

<body>

    <div>

    <div>

        <h1>模仿手风琴的效果</h1>

       <div id="accordion">

               <h2><a href="#">First</a></h2>

               <div>欢迎进入第一个界面内容</div>

               <h2><a href="#">Second</a></h2>

               <div>欢迎进入第一个界面内容</div>

               <h2><a href="#">Thirst</a></h2>

               <div>欢迎进入第一个界面内容</div>

       </div>

    </div>

  </body>


4、 最后我们要将实现效果的jquery的代码写出来,来实现手风琴的效果:

代码如下:代码的一些注释也写在代码中,这里就不做过多的解释了。

<script type="text/javascript">

    //页面加载完毕触发匿名函数

    $(document).ready(function(){

       $("#accordion").accordion({

              

              header:"h2",//header设置头标题标签必须是h2,如果改变则没有这个效果

              animated:"slide",//代表是否有动画效果, false代表没有动画,默认值是:slide.

              event:"mouseover", //event事件处理方式click点击事件 mouseover代表鼠标移动过的事件处理

              autoHeigth:true,

              icon:{

                  header:"ui-accordion-header",

                  headerSelect:"ui-accordion-header"

                  },//设置小图标

              active:1 //设置默认展开主题 1代表的是第二个,默认是0

              //获取手风琴中的options的值

       });

       var activeVal =$("#accordion").accordion("option","active");

       //设置值

       var activeVal =$("#accordion").accordion("option","active",2);

       alter(activeVal);

    });

 </script>


5、 测试,得到显示的效果。

相信你做完这些,我们用jqueryUI插件实现的手风琴效果也就出来了!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:163792次
    • 积分:2965
    • 等级:
    • 排名:第11896名
    • 原创:139篇
    • 转载:5篇
    • 译文:0篇
    • 评论:24条
    最新评论