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

原创 2012年03月26日 22:19:44

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 UI——学习手风琴效果

今天初次体验了一把jQuery UI,深刻体会到了它的强大之处,以下代码是实现手风琴的效果,需要引入相应的js类库,大家可去官网下载UI插件http://jquery.com/,为了方便,我将jque...

jQuery UI Accordion(手风琴)

源代码: "> jquery-accordion/demo/demo.css" />

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...

jQuery插件的使用 --- 手风琴的效果

jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件,代码如下: <% String path = request.getContextP...

jquery插件手风琴的效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 手风琴的效...

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...

精心挑选的12款优秀 jQuery 手风琴效果插件和教程

当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的...

用jquery插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...

jquery插件实现手风琴效果!

>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="....

jquery插件--实现手风琴效果

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)