jquery插件之手风琴

原创 2012年03月28日 21:14:13

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作

    jquery  ui使用前提:

            第一步:引入类库文件
                    包括:
                        js类库             js库引入要有顺序首先第一个引入的是jquery核心文件(jquery-1.7.1.min.js),然后在引入jquery-ui核心文件(jquery-ui-1.8.18.custom.min.js)
                        css样式类库    jquery-ui-1.8.18.custom.css

            第二步:模拟实现 

手风琴效果实现:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-ui-手风琴效果</title>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->
<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
    $(function (){
            //注册一个
            $("#accordion").accordion({
                    header:"h3",
                    //触发事件
                    event:"mouseover",
                    //面板展开的效果  default:click
                    animated:"bounceslide",
                    //是否填充父元素
                    fillSpace:false,
                    //是否可以拖拽
                    dragable:true,
                    //指定那个先显示
                    active:1,
                    //当任何一个动作发生或者改变的时候触发
                    change:function (){alert("aa");},
                    //自动调整高度
                    autoHeight:true,  //这个autoHeight如果不设置#accordion的高度那么是不会起作用的<div id="accordion" style="width:200px; height:100px; ">,如果设置了高度就会自动按照你指定的高度去显示并且加上滚动条
                    //设置图标
                    icons:{
                            header:"ui-icon ui-icon-arrow-2-e-w",
                            headerSelected:"ui-icon ui-icon-arrowthick-2-n-s"
                        }
                    
                    
            }).sortable({//拖拽,排序
                        //方向,沿那个轴
                        axis:"x,y",
                        handle:"h3",
                        start:function (){
                                //alert("确定走吗?");
                            },
                        stop:function (){
                                //alert("确定开始吗?");
                            }
                    });
                    
                    
            //绑定事件  ,要加上那个动作,比如排序上的停止动作,就是sortstop
            $("#accordion").bind("sortstop",function(){ alert("hello"); });        
        });    
</script>
</head>

<body>
    <h2 class="demoHeaders">Accordion</h2>
        <div id="accordion" style="width:400px; height:100px; ">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lor Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>
</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery之手风琴

秋意渐,剑风凉,池边萧萧木。                     相思楚,乡关暮,夜深谁与渡。                                                ...
  • cxd1008
  • cxd1008
  • 2017年02月04日 10:11
  • 62

EasyUI之手风琴Accordion

1、实例背景     EasyUI实现手风琴Accordion,并获取Accordion中的标题2、实现实例 EasyUI之手风琴Accordion ...
  • you23hai45
  • you23hai45
  • 2016年10月26日 00:04
  • 976

jQuery UI之手风琴

1、实现源码 手风琴 .accordion{ background: fuchsia; } $(function(){ $("#...
  • you23hai45
  • you23hai45
  • 2016年04月06日 21:17
  • 3677

jQuery学习之手风琴效果

js代码: $(function() { //获取所有li遍历 $(".li_list").each(func...
  • sinat_37605922
  • sinat_37605922
  • 2017年08月17日 23:25
  • 86

家庭财务管理系统实战2-easyui界面主框架搭建以及Accordion手风琴菜单实现

先贴个效果图: 用easyui-layout布局主框架,index.jsp内容如下:
  • u012071890
  • u012071890
  • 2013年11月14日 13:40
  • 5616

css3过渡属性之手风琴效果

过渡模块手风琴效果 *{ margin: 0;padding: 0; } ul{ width: 800px; height: 300px; ...
  • u014175342
  • u014175342
  • 2017年02月24日 15:33
  • 127

vuejs组件开发之手风琴菜单组件实例

小图标是引入font-awesome字体图标库绘制的。效果如下图所示: index ...
  • CodingNoob
  • CodingNoob
  • 2017年05月16日 00:04
  • 2537

Axure之手风琴菜单效果实现

先说思路: 1、使用的控件:动态面板(利用动态面板的pull below功能),中继器(位于动态面板之内,两列数据,一列为ID一列为二级菜单名称,使用过滤器提取ID以及一级菜单名称相同的数据即可获得...
  • u013816144
  • u013816144
  • 2016年07月05日 22:27
  • 2862

jquery实现折叠式(手拉风琴)菜单

先贴个效果图,目前测试过的浏览器:IE8及以上,chrome,Firefox,360运行通过 dom结构: ...
  • sui_s
  • sui_s
  • 2016年01月27日 11:01
  • 551

EasyUI布局,窗口,口风琴,文件上传等

一.右击鼠标事件 1.使用以下事件可以触发一个右击事件,基于表格内部 事件名 参数 描述 onRowContextMenu e, rowIndex, rowData ...
  • linFeng_csdn
  • linFeng_csdn
  • 2017年07月04日 09:06
  • 240
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之手风琴
举报原因:
原因补充:

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