Jquery EasyUI系列教程3

2019-03-28 21:31|来源: 网络

jquery easyui中的accordion一般用来做分组,如菜单的分组、表单的分组等。(easyui 1.2.6)

初始化的两种方式:

方式一:

      <div id="aa" class="easyui-accordion" border="false" style="width:700px;height:300px;">

              <div title="first Title" border="false">

                content first

              </div>

              <div title="second Title" border="true">

                content content

              </div>

      </div>

方式二:

      html代码:<div id="aa" border="false"></div>

      script代码:$("#aa").accordion({width:700,height:300});

  说明:如果使用方式二进行组件的初始化,那么accordion的属性是怎样应用的呢?首先说明的是属性有jquery easyui本身对accordion的默认配置($.fn.accordion.defaults)A,其次是在div标签中的属性B,最后是在script中配置的属性C;优先级顺序是C->B->A,优先级高的属性优先被应用,优先级低的则会被覆盖。

属性介绍(属性既可以作为标签的属性配置,也可以作为json对象属性配置):

    width:"auto":设置accordion的宽度,默认值为auto

    height:"auto":设置accordion的高度,默认值为auto

    fit:false:是否自动填充父容器,默认值为false,

    border:true:是否显示边框,默认值为true,即显示边框。此属性和上边的fit属性都依赖于panel,即accordion是依赖于panel实现的,可以理解为继承了panel。

    animate:true:再点击accordion时,是否应用动画效果,默认为使用。

事件介绍:

    onSelect:在单击选择某一个面版的时候触发此事件。

    onAdd:添加面板的时候触发此事件。

    onBeforeRemove:在删除某个面版之前的时候,触发此事件。

    onRemove:删除面板触发此事件。

方法介绍:

  1、 options:获取当前accordion的配置属性值;

                  var opts = $("#accordionId").accordion("options");

                  opts.accordion属性:opts.width、opts.height,.......

   2、panels:获取所有的accordion面板;

                 var panels =  $("#accordionId").accordion("panels");

                 返回的是panel数组,数组中个每个元素都可以作为单个panel对待,而且可以应用panel中的属性、方法和事件。例如:panels[1].panel('options');获取panel的属性。

   3、resize:改变accordion的大小;

           持续完善中。。。。。。

   4、getSelected:获取被选中的面版;

   5、getPanel:获取某个面板;

   6、select:选择某个accordion面板

   7、add:添加一个面板;

   8、remove:删除某一个面板;

accordion方法的使用方式和用jquery初始化accordion组件的方式类似,不同之处就是第一个参数如果为object对象,则是初始化accordion组件或者修改已有的accordion属性,如果为字符串,则是调用accordion的方法。

From:http://bozch.iteye.com/blog/1517146

相关问答

更多

给 jquery easyui 的 easyui-textbox 添加onblur事件

这样不行的,你实际界面上看到的空间已经不是你现在定义的那个input了,所以你的onblur不会触发。 你看一下easyui的textbox,有一个dataoption属性,里面会有类似onblur的属性,为这个属性赋值就ok了

jQuery2.x放弃IE6、7、8,那么easyui1.3.3也放弃了?..

你可以用jquery 1.X 替换easyui 1.3.3 自带的jquery 2.x,可以正常使用

jquery UI和jquery easyui什么区别?

基本上现在流行的ui都是从jquery ui衍变过来的,包括easyui,bootstrap等等,所以说jquery ui是这些ui的基础,easyui是jqury ui的进化 据我所知,webform是支持easyui的

请问jquery easyUi 怎么更改样式?

easyui的css文件夹下面有一个theme文件夹,里面就是装了不同风格的样式表,每个组件都有单独一个文件,也有一个全部合起来的easyui.css,找到panel.css后就复制几个,然后再单独修改

jquery和jquery easyui的区别

基本上现在流行的ui都是从jquery ui衍变过来的,包括easyui,bootstrap等等,所以说jquery ui是这些ui的基础,easyui是jqury ui的进化 据我所知,webform是支持easyui的

jquery easyui如何使用?

首先得会jQuery, 因为jQuery easyui是基于jQuery的UI库而且,基本的语法还是jQuery,在会jQuery的情况下,只需要下载jQuery easyui官方包下来,查看demo和API照着做就行了,我一开始也是现拷贝他demo的代码来做一些小应用,不知道的属性和方法查一下API,小应用写完之后就应用熟悉了。 一句话,主要还是jQuery语法。

jquery easyui的easyui-validatebox的问题

$("#name").val("") 每次打开必须清空上次的历史。

求JQuery EASYUI 和C# WEB开发教程

我公司也在用JQuery EASYUI+asp.netMVC开发ERP系统 它的数据格式都是json格式,是一种轻量级的数据交换语言! 而且他的控件都是基于JQuery的jar包 我这里有一个简单的整合的文档教程,至于怎么取开发,我建议你去多了解一下什么是json和ajax!因为数据展示与提交,会需要到,其他的你可以上EASYUI官网,上面教你怎么使用控件,很简单的!希望对你有帮助

CakePHP 2.x - jQuery EasyUI - 如何在CakePHP 2.x中放置jQuery EasyUI?(CakePHP 2.x - jQuery EasyUI - how to put jQuery EasyUI in CakePHP 2.x?)

在CakePHP中,javascript文件存储在app / webroot / js /中。 然后,您可以通过调用将它们包含在布局中 echo $html->script('jquery-1.7.2.min.js'); 然后,您可以在视图或其他外部js文件中编写javascript代码。 In CakePHP javascript files are stored in app/webroot/js/. You then can include them in the layout by ...

从jquery easyUi treegrid搜索(searching from jquery easyUi treegrid)

不确定如果你还在寻找,但这是一个使用HTML,Jquery / jeasyui / Ajax和Java的解决方案: HTML: <html> <form> <input id="searchFilter" name="searchFilter" class="required" /> <a href="#" onclick="doSearch()">Search</a> </form> <%-- the treegrid (a table) to contain the results --%> ...