//EXTUI 控件核心库
(function ($) {
$.extUI = {};
$.extUI.controls = {};
//组件类
window.Compent = $.extUI.Compent = function (controlname,options) {
Compent.preRender();
Compent.render();
Compent.rended();
if ($.extUI.controls[controlname])
{
$.extUI.controls[controlname]["preRender"].call(this,options);
$.extUI.controls[controlname]["render"].call(this,options);
$.extUI.controls[controlname]["rended"].call(this,options);
}
};
$.extend($.extUI.Compent, {
preRender: function () {
},
render: function () {
},
rended: function () {
}
});
})(jQuery);
(function ($) {
$.fn.extend({
accordion: function (options) {
//调用组件组件基类进行初始化
$.extUI.Compent.call(this, "accordion",options);
}
});
//
$.extUI.controls.accordion = function (options) {
$.extUI.controls.accordion.preRender();
$.extUI.controls.accordion.render(options);
$.extUI.controls.accordion.rended();
}
$.extend($.extUI.controls.accordion, {
render: function (options) {
//当前accord面板元素
var rootaccordion = this;
if (!$(rootaccordion).hasClass("l-accordion-panel"))
$(rootaccordion).addClass("l-accordion-panel");
var selectedindex = 0;
if ($("> div[1selected=true]", rootaccordion).length > 0)
selectedindex = $("> div[1select=true]", rootaccordion).index();
$(">div", rootaccordion).each(function (index, item) {
var header = $('<div class="l-accordion-header"><div class="l-accordion-toggle"></div><div class="l-accordion-header-inner"></div></div>');
//添加头部样式
if (index == selectedindex)
$(".l-accordion-toggle", header).addClass("l-accordion-toggle-open");
else
$(".l-accordion-toggle", header).addClass("l-accordion-toggle-close");
$(item).before(header);
if ($(item).attr("title")) {
$(".l-accordion-header-inner", header).html($(item).attr("title"));
$(item).attr("title", "");
}
//没有定义内容样式则加入
if (!$(item).hasClass("l-accordion-content"))
$(item).addClass("l-accordion-content");
// $("[class*=l-accordion-toggle-close]", header).each(function(){
//
// $(this).next(".l-accordion-content").hide();
//
// })
if ($("[class*=l-accordion-toggle-close]", header).length>0)
$(item).hide();
});//end each
if(options){
if(options.height){
rootaccordion.height(options.height);
}
}
$(".l-accordion-header",rootaccordion).hover(function ()
{
$(this).addClass("l-accordion-header-over");
}, function ()
{
$(this).removeClass("l-accordion-header-over");
});
$(".l-accordion-toggle",rootaccordion).hover(function(){
if($(this).hasClass("l-accordion-toggle-open"))
$(this).addClass("l-accordion-toggle-open-over");
if($(this).hasClass("l-accordion-toggle-close"))
$(this).addClass("l-accordion-toggle-close-over");
},function(){
if($(this).hasClass("l-accordion-toggle-open"))
$(this).removeClass("l-accordion-toggle-open-over");
if($(this).hasClass("l-accordion-toggle-close"))
$(this).removeClass("l-accordion-toggle-close-over");
});
//点击菜单
$(">.l-accordion-header",rootaccordion).click(function(){
var tiggerbtn=$(".l-accordion-toggle:first",this);
//
if(tiggerbtn.hasClass("l-accordion-toggle-open"))
{
tiggerbtn.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
.removeClass("l-accordion-toggle-open");
tiggerbtn.addClass("l-accordion-toggle-close");
$(this).next(".l-accordion-content").hide();
}
else{
tiggerbtn.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
.removeClass("l-accordion-toggle-close");
tiggerbtn.addClass("l-accordion-toggle-open");
$(this).next(".l-accordion-content").show().siblings(".l-accordion-content:visible").hide();
}
});
},
preRender: function () {
},
rended: function () {
}
});
})(jQuery);
$(function(){
$("[type=extui-accordion]").accordion();
});
自己动手写 accordion 抽屉控件
最新推荐文章于 2019-07-11 17:42:30 发布