需求:

(1)实现手风琴面板控件,支持静态HTML与JSON方式创建控件

(2)支持远程加载数据

(3)支持面板激活、远程加载事件注册

(4)支持动态添加、删除项目

实现图例

客户代码

 <div>
<div style="padding-left:100px; padding-bottom:12px; float:left">
<div id="accordionContainer" style="width:300px;height:600px">
<div title="静态html" closable="true">
<p>项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1</p>
<div id="text">
<h3>无题</h3>
<p>月落湖面两清影,</p>
<p>岸柳丝丝弄轻盈。</p>
<p>此番凉意写不出,</p>
<p>难画秋月一片晴。</p>
</div>
</div>
<div title="iframe加载" isiframe="true" url="/innerpage.html" iconcls="icon-edit" closable="false">
111
</div>
<div title="远程HTML加载" datatype="html" url="/content.html" iconcls="icon-save" closable="true">
32333
</div>
</div>
</div>
</div>
<script type="text/javascript">
var accordion;
$(function () {
accordion = $("#accordionContainer").accordion({
items: [{
title: '远程加载JSON数据',
closable: false,
iconcls: 'icon-print',
actived: true,// 激活状态
url: 'testServer/jsonQuestTest.ashx?flag=tree',//如果不配置采用公用 $.fn.tabs.defaults里的配置
dataType: 'json'// //如果不配置采用公用 $.fn.tabs.defaults里的配置
},{
title: '文本测试',
closable: false,
iconcls: 'icon-back',
actived: false,// 激活状态
content: '<a>我是测试内容.....................</a>'// 可以是文本,可以是$("#id")对象
}],
onLoadSuccess: function (title, context) {
console.log(title + "加载完成");
if (title == "远程加载JSON数据") {
$("<ul id='tree'></ul>").appendTo(context.target).tree({
onClick: function (data) {
console.log(JSON.stringify(data));
alert("click");
},
animate: true,
isPlain: false,
checkbox: true,
textField: 'text1',
idField: 'id1',
data: context.data,
lazy: true,
url: 'testServer/jsonQuestTest.ashx?flag=tree',
onLoadSuccess: function (data) {
console.log("服务器数据返回:" + JSON.stringify(data));
}
});
}
},
activedHandler: function (tilte,context) {
console.log("actived=" + tilte);
},
closedHandler: function (title) {
console.log("closed=" + title);
}
});
});
function addaccordion() {
accordion.accordion("addAccordion", {
title: '动态添加tab',
closable: true,
iconcls: 'icon-back',
actived: false,// 激活状态
url: 'testServer/jsonQuestTest.ashx',//如果不配置采用公用 $.fn.tabs.defaults里的配置
dataType: 'json',// //如果不配置采用公用 $.fn.tabs.defaults里的配置
onLoadSuccess: function (title, context) {
context.target.html(title+"loadsucc;我自己注册的事件 "+JSON.stringify(context.data));
}
});
}
function getAccordion() {
var res = accordion.accordion("getActived");
alert(res.titleObj.attr("title"));
}
</script>

组件代码

 /**************************************************************
*作者:hjwen
*电邮:hjwen88@126.com
*版本:1.0
*版权许可:中国通用开源许可协议V1.0
*说明:myui组件accordion组件
***************************************************************/
(function ($) {
/******
*渲染目标:renderHtml为构建html结构的函数,init初始化会调用
*******/
var itemTitleContainer, itemContentContainer, itemCount;
var contentHeight = 0;
function renderHtml(target) {
createAccordions(target);
};
/**********私有方法开始********************/
function createAccordions(target) {
var opts = target.data("settings");
var items = opts.items;
$.each(items, function (i, item) {
if (item.exist == null) {
item.exist = $("<div></div>").appendTo(target);
}
createAccordion(item, i);
});
itemContentContainer.animate({ height: contentHeight + "px" },300);
itemTitleContainer.css("border-bottom", "1px solid #99BBE8");
}
function createAccordion(item, index) {
var onePanel = item.exist;
if (onePanel != null) {
var panelOpt = {
title: item.title,
iconCls: item.iconcls,
collapseable: false, //可收缩
closeable: item.closable,
expandable: false,//可展开
maximizable: false//可最大化
};
if (typeof item.url != 'undefined' && item.url != '' && item.url != null) {
panelOpt.remoteRequest = {
dataType: item.dataType,
url: item.url,
load: function () { },
loaded: function (result) {
if (typeof item.onLoadSuccess == 'function')
item.onLoadSuccess(item.title, { data: result, target: item.exist });
}
};
}
if (item.closable) {
panelOpt.onClosed=function (txt) {
contentHeight = contentHeight + 30;
itemCount--;
itemContentContainer.height(contentHeight + "px");
if (typeof item.closedHandler == 'function') {
item.closedHandler(txt);
}
}
}
var panel = onePanel.panel(panelOpt);
var tmpObj = panel.panel("getPanelObjs");
tmpObj.contentObj.css({ "height": "0" }).parent("div").css("height", "auto");
if (item.content != null) {
if (typeof item.content == 'object') {
item.content.appendTo(tmpObj.contentObj);
} else {
tmpObj.contentObj.html(item.content);
}
}
if (index < itemCount - 1) {
tmpObj.contentObj.css("border-bottom", "none");
}
tmpObj.titleObj.css({ "background": "#E0ECFF", "border-bottom": "none" }).attr("title",item.title).attr("for",index).bind({
click: function () {
itemContentContainer.animate({ height: 0 }, 300);
itemTitleContainer.css("border-bottom", "none");
itemTitleContainer = $(this).css("border-bottom", "1px solid #99BBE8");
itemContentContainer = $(this).next().animate({ height: contentHeight + "px" }, 300);
if (typeof item.activedHandler == 'function') {
item.activedHandler(itemTitleContainer.children(".panel-tilte").children("h2").text(), itemContentContainer);
}
},
mouseenter: function () {
$(this).css({
'cursor': 'pointer',
'background': '#E8F0FC'
});
},
mouseleave: function () {
$(this).css({
"background": "#E0ECFF"
});
}
});
if (index == 0) {
itemTitleContainer = tmpObj.titleObj;
itemContentContainer = tmpObj.contentObj;
}
if (item.actived) {
itemTitleContainer = tmpObj.titleObj;
itemContentContainer = tmpObj.contentObj;
}
}
};
/**********私有方法结束*******************/
/*****************************************************************************
*对外的函数统一封装到methods中
*调用方式:$.pluginInstance.pluginName("methodName",params)
******************************************************************************/
var methods = {
init: function (options) {
var $this = $(this);
var settings
if (typeof options == 'undefined')
settings = $.fn.accordion.defaults;
else
settings = $.extend({}, $.fn.accordion.defaults, options);
var newItemArr = [];
var existItems = $this.children("div");//已经存在的item项
if (existItems.length > 0) {
$.each(existItems, function (i, it) {
var $it = $(it);
var opt = {
title: $it.attr("title"),
content: $it.attr("content") == undefined ? null : $("#" + $it.attr("content")),
closable: $it.attr("closable") == "true" ? true : false,
iconcls: $it.attr("iconcls") == undefined ? "" : $it.attr("iconcls"),
actived: $it.attr("actived") == "true" ? true : false,// 激活状态
isiframe: $it.attr("isiframe") == "true" ? true : false,//如果不配置采用公用 $.fn.accordion.defaults里的配置
url: $it.attr("url") == undefined ? "" : $it.attr("url"),//如果不配置采用公用 $.fn.accordion.defaults里的配置
dataType: $it.attr("dataType") == undefined ? "json" : $it.attr("dataType"), //如果不配置采用公用 $.fn.accordion.defaults里的配置
exist: $it, //
onLoadSuccess: settings.onLoadSuccess,//fn(title,resdata)
activedHandler: settings.activedHandler,//fn(title,context)
closedHandler: settings.closedHandler //fn(title) tab被关闭时触发
};
if (opt.isiframe)
opt.dataType = 'iframe';
newItemArr.push(opt);
});
}
//合并每一个accordion项的默认设置
$.each(settings.items, function (i, item) {
var newIt = $.extend({}, $.fn.accordion.itemdefaults, item);
newIt.exist = null;
if (typeof newIt.onLoadSuccess != 'function')
newIt.onLoadSuccess = settings.onLoadSuccess;//fn(title,resdata)
if (typeof newIt.activedHandler != 'function')
newIt.activedHandler = settings.activedHandler;//fn(title,context)
if (typeof newIt.closedHandler != 'function')
newIt.closedHandler = settings.closedHandler; //fn(title) tab被关闭时触发
newItemArr.push(newIt);
});
settings.items = newItemArr;
itemCount = settings.items.length;
//设置每一项的高度
contentHeight = $this.height() - 30 * newItemArr.length;
//创建ui布局
$this.data('settings', settings);
renderHtml($this);
if ($.myui.isDebug) {
$.myui.log("jQuery.accordion init finish......");
}
return $this;
},
destroy: function (options) {
var $this = $(this);
$this.removeData('settings');
return $this.remove();
},
/***
*opt={
title: 'Accordion标题',
closable: false,
iconcls: '',
actived: false,// 激活状态
isiframe: false,//如果不配置采用公用 $.fn.accordion.defaults里的配置
url: '',//如果不配置采用公用 $.fn.accordion.defaults里的配置
content: '',//内容默认为空,如果该属性有值,则优先默认采用这个,即使设置url也不会去远程加载数据,content可以是html对象,也可以是文本
dataType: 'json'// //如果不配置采用公用 $.fn.accordion.defaults里的配置
}
***/
addAccordion: function (opts) {
var newOpt = $.extend({}, $.fn.accordion.itemdefaults, opts);
newOpt.actived = true;
var $this = $(this);
//修改最后一个的border-bottom", "none"
$this.children().last().children(".panel-body").css("border-bottom", "none");
newOpt.exist = $("<div></div>").appendTo($this);
contentHeight = contentHeight - 30;
if (itemContentContainer!=null)
itemContentContainer.animate({ height: 0 }, 300).css("border-bottom", "none");
if (itemTitleContainer!=null)
itemTitleContainer.css("border-bottom", "none");
createAccordion(newOpt, itemCount + 1);
itemContentContainer.animate({ height: contentHeight + "px" },300);
itemTitleContainer.css("border-bottom", "1px solid #99BBE8");
return $this;
},
getActived: function () {
return { titleObj: itemTitleContainer, contentObj: itemContentContainer };
}
};
/********************
*组件的构造函数
*********************/
$.fn.accordion = function () {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof (method) == 'object' || !method) {
if ($.myui.isDebug) {
$.myui.log("jQuery.accordion init.....");
}
method = methods.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.accordion');
return this;
}
return method.apply(this, arguments);
};
/********************
*组件的默认配置值
*options={
items: [], //accordion项配置,对应$.fn.accordion.itemdefaults
isiframe: false,// 是否嵌入iframe,嵌入iframe 需要与url配合使用,即采用url加载远程页面时【dataType=html】才起作用
url: '',
dataType: 'json',// json/html 远程加载时的数据格式
onLoadSuccess: null,//fn(title,resdata)
activedHandler: null,//fn(title,context)
closedHandler: null //fn(title) accordion被关闭时触发
}
*********************/
$.fn.accordion.defaults = {
items: [], //accordion项配置,对应$.fn.accordion.itemdefaults
isiframe: false,// 是否嵌入iframe,嵌入iframe 需要与url配合使用,即采用url加载远程页面时【dataType=html】才起作用
url: '',
dataType: 'json',// json/html 远程加载时的数据格式
onLoadSuccess: null,//fn(title,resdata)
activedHandler: null,//fn(title,context)
closedHandler: null //fn(title) accordion被关闭时触发
};
/***
*每一个accordion项目的默认配置
****/
$.fn.accordion.itemdefaults = {
title: 'accordion标题',
closable: false,//是否可以删除
iconcls: '',
actived: false,// 激活状态
isiframe: false,//如果不配置采用公用 $.fn.accordion.defaults里的配置
url: '',//如果不配置采用公用 $.fn.accordion.defaults里的配置
content: null,//内容默认为空,如果该属性有值,则优先默认采用这个,即使设置url也不会去远程加载数据,content可以是html对象,也可以是文本
dataType: 'json'// //如果不配置采用公用 $.fn.accordion.defaults里的配置
}
})(jQuery);

我的开源框架之Accordion控件的更多相关文章

  1. 开源框架之TAB控件

    我的开源框架之TAB控件   需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...

  2. 我的开源框架之TAB控件

    需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持reload tab内容[如果是远程加 ...

  3. Android开源的精美日历控件,热插拔设计的万能自定义UI

    Android开源的精美日历控件,热插拔设计的万能自定义UI UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的 ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  5. [转]几个开源的.net界面控件

    转自原文 几个不错的开源的.net界面控件,介绍几个自己觉得不错的几个开源的.net界面控件. DockPanel Suite:开发类似VS.net的界面,#Develop就是使用的这个控件. 网址: ...

  6. 精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能)

    原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...

  7. 几个不错的开源的.net界面控件

    转自原文 几个不错的开源的.net界面控件 (转) 几个不错的开源的.net界面控件 - zt 介绍几个自己觉得不错的几个开源的.net界面控件,不知道是否有人介绍过. DockPanel Suite ...

  8. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  9. 推荐几款开源的js日期控件

    做为一个正规的网站,经常需要一些日期或时间的筛选,所以我们今天就推荐二十多款javascript的js日期/时间筛选插件.个个经典,绝对有你需要的. My97DatePicker ,国人开发的一款js ...

随机推荐

  1. jQuery读取json文件,实现省市区/县(国标)三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  2. .net 既可以输入又可以选择的dropdownlist

    第一.<script src="../../../Common/Scripts/combox.js" type="text/javascript"> ...

  3. ajax 调用后台接口示例

    $(function(){ var _del_time_list = $("select[name='del_time_list']"); var _del_table_name ...

  4. visual studio 中GIT的用法

    http://msdn.microsoft.com/zh-cn/library/vstudio/hh850445    Git 使用最新版:Git-1.8.4-preview20130916http: ...

  5. jsp验证码 (通过单击验证码或超链接换验证码)

    #code.jsp <%@ page language="java" import="java.util.*" import="java.awt ...

  6. 用特殊字体来实现矢量ICON

    用特殊字体来实现矢量ICON tips:其实每个icon都是一个unicode字符,所以,可以通过改变font-size实现icon的矢量放大:可以通过改变color实现多色系.

  7. Linux配置FTP服务器

    基于CentOS-6.5 1.先查看是否已安装:rpm -qa vsftpd 或 rpm -ql vsftpd 2.安装:yum install vsftpd -y 3.设置开机启动: chkconf ...

  8. Hive 10、Hive的UDF、UDAF、UDTF

    Hive自定义函数包括三种UDF.UDAF.UDTF UDF(User-Defined-Function) 一进一出 UDAF(User- Defined Aggregation Funcation) ...

  9. vmware虚拟机迁移系统到其它磁盘(xjl456852原创)

    有时我们将vmware安装的系统放在了磁盘空间比较小的盘里,后来磁盘空间不够用了,我们需要将文件移动到其它磁盘.腾出这个磁盘的空间. 我安装的系统有10个,总占空间大小170多GB.需要从D盘迁移到G ...

  10. pyqt 右击+指定位置点击例子学习

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' import sys from PyQt4.QtCore impor ...