Yoho-Documents / Share · Files

编写目的： 基于这次CRM项目选用bootstrap作为前台框架。但是使用原生态的bootstrap需要在页面上写N多的div，table等标签。 这个就需要对bootstrap的样式，风格有很深的了解的人才能去使用。基于这样的一个背景，我这里对bootstrap的一些常用框架做了jquery风格的插件封装 现在市面上关于bootstrap的插件很多，但是没有一家对bootstrap插件做一个完整的封装。

插件优点：

• 完全采用jquery风格插件的方式统一封装。
• 使用简单，完全面向对象的设计。
• 插件文档齐全。

该文档基于插件的三大要素（属性，事件，方法）来详细描述每个插件的使用方法

枚举定义

1、面板样式

• panel-primary
• panel-success
• panel-info
• panel-warning
• panel-danger

2、警告框类型

• success
• info
• warning
• danger

---

1、显示一个导航菜单（accordion）

显示一个导航菜单

使用举例

    $("#leftMenu").accordion({
        panelClass : "panel-primary",
        idField : "menuId",
        pidField : "parentMenuId",
        textField : "menuName",
        ajaxParam : {
            dataType : "json",
            url: "/SysMenuController/getSysMenuList.do",
            type: "POST"
        },
        onClickMenu : function(item, parent) {
            $("#body").load("/crm" + item.menuUrl);
        },
        loadFilter : function(data) {
            if (!data || data.code != 200) {
                return null;
            }
            return data.data;
        }
    });

该插件可供选择的属性（option）有：

属性名称	属性类型	可否为空	默认值	备注
panelClass	string	是	"panel-default"	面板样式（可选值见枚举定义1）
rootPid	int	否	0	最外层节点的pid值
idField	string	是	"id"	对象中id的属性名称
pidField	string	是	"pid"	对象中pid的属性名称
textField	string	是	"text"	对象中显示在菜单中的名称的属性
ajaxParam	object	是	{}	从后端获取数据的ajax的对象
dataList	array	是	[]	需要显示的的对象数组（ajaxParam和dataList不需要同时使用，如果同时有值，则以ajaxParm为准）
loadFilter	function	是	null	从后端获取值后做特殊处理（该函数接受一个参数data，即为从后端ajax返回的值）

该插件可供选择的事件（event）有：

事件名称	参数	备注
onLoadSuccess	data	菜单加载完成之后执行（参数data即为ajax或直接传入的dataList）
onClickMenu	item,parent	点击菜单的时候执行

该插件暂未提供可供选择的方法（method）：

---

2、显示一个警告框（alerts）

显示一个导航菜单

使用举例

    $("#div").alerts({
        content : "内容",
        showOnCreate : false
    });

该插件可供选择的属性（option）有：

属性名称	属性类型	可否为空	默认值	备注
content	string	是	""	提示框显示内容
showOnCreate	boolean	是	true	是否在创建完就显示
type	string	是	"info"	显示框类型（取值见枚举定义2）

该插件可供选择的事件（event）有：

事件名称	参数	备注
onBeforeShow	none	显示之前执行（当该函数返回false时，则会阻止显示）
onAfterShow	none	显示之后执行
onBeforeHide	none	隐藏之前执行（当该函数返回false时，则会阻止隐藏）
onAfterHide	none	隐藏之后执行

该插件暂未提供可供选择的方法（method）：

方法名称	参数	备注
hide	speed	隐藏提示框，参数为jquery的hide参数
show	speed	显示提示框，参数为jquery的hide参数