adminTemplate后台模板插件使用文档

1. github: 直通车

2. 引入css文件：

<link rel="stylesheet" href="css/admin.min.css" />

3. 引入js文件：

<!--依赖于Jquery，需在admin.js之前引入-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/admin.min.js" type="text/javascript" charset="utf-8"></script>

4. 初始化插件：

配置菜单：

var menu = [{
name:"第一个菜单",
img:"img/icons/menu/inbox.png",
key:"one"
},{
name:"第二个菜单",
img:"img/icons/menu/layout.png",
subMenu:[{
name:"子菜单一",
key:"two"
},{
name:"子菜单二",
key:"three"
}]
},{
name:"第三个菜单",
img:"img/icons/menu/brush.png",
subMenu:[{
name:"子菜单三",
key:"four"
},{
name:"子菜单四",
key:"five"
}]
}];

注：菜单为一个json数组，一级菜单可以配置的参数有name(菜单名)、img(菜单附带图标，不设置将会有一个默认图标，所有附带图标见/img/icons/menu)、key/subMenu(subMenu为子菜单，子菜单存在时，此一级菜单的key将无效，即不触发事件，仅仅用于展开子菜单)。子菜单可以配置的参数有：name、key(除此之外都被无视)。key用于菜单事件的识别。

2. 声明菜单事件处理函数：

//菜单事件回调处理中心
function handler(key,text,title,content){
//标题变换
title.text(text);
//根据key值处理相关事件
switch(key){
case "one":{
content.html('点击了第一个菜单，为您提供导航：'+'<a href="http://www.baidu.com">百度</a>');
break;
}
case "two":{
content.text("点击了第二个菜单");
break;
}
default:{
content.text("点击了其它菜单");
}
}

}

注：菜单事件触发允许指定自定义处理函数，将会传入四个参数：key(菜单的key，用于识别触发的菜单项)、text(菜单名)、title(内容区域的标题，为一个JQuery-Dom对象，可以直接调用Jquery元素方法)、content(内容区域，同title)，示例接收菜单事件时，每次使用点击的菜单名更换内容区域的标题，并根据key值做出不同处理。

参数传入：

adminTemplate.init({
menu:menu,
managerName:"QQ946800151",
searchCallback:function(key){
alert("您要搜索的为："+key);
},
menuHandler:handler
});

插件向window注册了一个全局对象adminTemplate，提供一个init(opt)方法，opt为配置参数，当前允许的配置参数及其默认值如下：

//后台管理员链接
managerUrl    :    "javascript:void(0)",
//后台管理员名
managerName :     "管理员",
//欢迎语
sayHello    :    "Hi",
//是否有登出
hasLogout    :    true,
//登出点击跳转的地址
logoutUrl    :    "javascript:void(0)",
//登出的文本
logoutText    :    "Logout",
//是否有搜索框，以下搜索框参数都必须在此值为true时才生效
hasSearch    :    true,
//搜索框占位字符串，hasSearch = true时才生效
searchPlaceHolder    :    "Looking for something?",
//搜索框提交的地址
searchAction        :    "javascript:void(0)",
//搜索框点击回调函数，如果函数被定义则searchAction永远为javascript:void(0)，并在回调时将搜索框内容传入该方法
searchCallback        :    null,
//搜索框name属性，该属性为后台接受的key
searchName            :    "keyword",
//菜单，数组形式，最多支持到二级菜单
menu                :    null,
//一级菜单没有指定图标时使用的默认图标
menuDefaultImg        :    "img/icons/menu/layout.png",
//菜单项点击事件处理中心，传入菜单key值、菜单文本、内容体title、内容体
menuHandler            :    function(key,text,title,content){
title.text(text);
content.text(key);
}

注：上面值得说明的部分参数有：

searchAction和searchCallback，两个参数互斥，searchCallback优先。也即当searchCallback指定了回调函数时，searchAction将不生效，并永远为javascript:void(0)以防止页面跳转。此时点击搜索按钮将触发回调函数并传入搜索框的内容。当searchCallback未定义时，searchAction可生效，搜索框为一个普通的表单，表单仅有一个input，name默认为”keyword”（被action识别），并允许指定。