*~~~~~向日葵、的眼里只有【太阳】

欢迎、可爱的亲们。 嘿嘿~~~

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

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插件实现的手风琴效果也就出来了!

阅读更多
个人分类: jQuery
上一篇oracle 控制用户权限
下一篇JqueryUI datepicker(日历)插件--实例选择日期
想对作者说点什么? 我来说一句

-

1970年01月01日 0B 下载

没有更多推荐了,返回首页

关闭
关闭