hhframe_后天堂框架

Ajax()
Alert()
Console()
localdata()
hhRegex()
hhArr()
hhObj()
hhStr()
hhPanel()
hhFolder()
hhFolderEditor()

我们封装了一些常用的模块插件。

Ajax

说明：Ajax 是我们对 jquery ajax 深度封装的网络数据请求插件。

版本：1.4.0

开发：2018-05-02

作者：立树（Eric）

编码：application/x-www-form-urlencoded; charset=UTF-8

返回值：json（暂时不支持修改）

特点：

1. 参数灵活：传递灵活、简明，具体见下面的参数说明（单参数、多参数）

2. 调试方便：控制台信息打印功能默认开启，无论请求成功或失败，控制台都会打印相应信息

3. 幽灵模式：不显示加载提示（偷偷的进村，打枪的不要）

4. 一时语塞，不知所措 ( ╹◡╹ )

依赖：

jQuery（第三方，底层支持）
hhPanel（后天堂插件，提示框）
Console（后天堂插件，打印插件）

此插件有两种调用模式：单参数、多参数，基本上能够应对大部分的使用场景。

单参数：

用法：Ajax(JSON);

说明：当插件的第一个参数是 Object 类型的时候，即单参数模式（即使传多个也不会生效）。

url：

类型：
字符串
默认：
无
描述：
必填，请求地址。

data：

类型：
JSON 对象 / url 地址查询字符串（"site=houheaven&author=Eric"）
默认：
无
描述：
选填，POST 数据。
插件的贴心担当，此参数不为空时，请求的类型是 POST，反之则是 GET，所以就不用单独设置请求的类型了，少写一个参数，贴不贴心。

loader：

类型：
布尔值
默认：
true
描述：
选填，是否显示加载提示框。
加载提示框暂时不支持修改，默认为模态（显示的时候不能对页面进行操作）。

console：

类型：
布尔值
默认：
true
描述：
选填，是否开启控制台打印调试。

timeout：

类型：
数字
默认：
30（单位：秒）
描述：
选填，超时时间。

success：

类型：
回调函数
默认：
略
描述：
选填，Ajax 请求成功之后执行，未设置且 state:false 时，会短暂出现一个 msg 的提示。
返回值：
success(ret)
格式：{ "state": Boolean, "data": JSON / String / Other, "msg": String }

failed：

类型：
回调函数
默认：
略
描述：
选填，Ajax 请求失败（发生错误）之后执行，默认弹出一个提示“网络异常，是否重新加载？”的对话框。
返回值：
failed(ret)
格式：{ "status": Number, "statusText": String, "readyState": Number, "responseText": String }

// 单参数 示例代码
Ajax({
	url: "proc.php",
	data: {
		name: "立树",
		job: "前端程序猿、WebApp开发者"
	},
	success: function(ret){
		alert("Ajax 终于请求成功了，你看返回状态："+ret.state);
	},
	failed: function(err){
		alert("最后难逃没网的命运");
	}
});

多参数：

用法：Ajax(url,data,success,failed);

说明：这 4 个参数（地址、数据、成功回调、错误回调）在使用时比较灵活，比如第二个参数是数据格式（JSON 对象或者 URL 查询字符串），网络请求将会是 POST 的形式，否则就是 GET。

url：

类型：
字符串
默认：
无
描述：
必填，请求地址。

data：

类型：
JSON 对象 / url 地址查询字符串（"site=houheaven&author=Eric"）
默认：
无
描述：
选填，POST 数据（具体说明参见单参数的 data）。

success：

类型：
回调函数
默认：
略
描述：
选填，Ajax 请求成功之后执行，未设置且 state:false 时，会短暂出现一个 msg 的提示。
返回值：
success(ret)
格式：{ "state": Boolean, "data": JSON / String / Other, "msg": String }

failed：

类型：
回调函数
默认：
略
描述：
选填，Ajax 请求失败（发生错误）之后执行，默认弹出一个提示“网络异常，是否重新加载？”的对话框。
返回值：
failed(ret)
格式：{ "status": Number, "statusText": String, "readyState": Number, "responseText": String }

多参数的使用场景（6 种）

url	data	success	failed	请求类型
有值	空	空	空	GET
有值	有值	空	空	POST
有值	有值	有值	空	POST
有值	有值	有值	有值	POST
有值	空	有值	空	GET
有值	空	有值	有值	GET

技术贴：

1. 四种常见的 POST 提交数据方式

示例代码：

// 多参数 示例代码
url = "proc.php";
data = {
	name: "立树",
	job: "前端程序猿、WebApp开发者"
};
Ajax(url,data,function(ret){
	alert("这次是真的可以了，你再看下返回状态："+ret.state);
});

Alert

说明：Alert，弹窗调试插件。

版本：1.1.0

开发：2017-07-21

作者：立树（Eric）

参数：

用法：Alert( param1 [,param2] … [,paramx] )。

说明：参数可以是 1 个，也可以是多个，多参数适用于一次打印多个对象、数组等。

param：

类型：
混合类型（数组、对象、数字、布尔值、字符串）
默认：
无
描述：
必填，弹窗展示的内容。

示例代码：

// 字符串
Alert("哈哈哈");              // "哈哈哈"

// 等效字符串
Alert("哈哈哈"+"呵呵呵");      // "哈哈哈呵呵呵"
Alert("哈哈哈","呵呵呵");      // "哈哈哈呵呵呵"

// 单个数组
Alert([1,2,3]);                                       // [1,2,3]
Alert(["哈哈","吼吼","怕不是个傻子吧"]);                  // ["哈哈","吼吼","怕不是个傻子吧"]
// 多个数组（"\n"：换行显示）
Alert([1,2,3],"\n",["哈哈","吼吼","怕不是个傻子吧"]);     // 一行显示一个数组，便于查看数组内容（"\n"）

// 单个对象
Alert({plugin:"Alert.js",author:"立树"});            // {"plugin":"Alert.js","author":"立树"}
// 多个对象（说到对象，我还没有对象！！）
Alert({plugin:"Alert.js"},"\n",{author:"立树"});     // 一行显示一个对象，便于查看对象内容（"\n"）

// 特殊对象（会打印对象类型）
Alert(window);               // [object Window]

Console

说明：Console，控制台调试插件。

版本：1.1.2

开发：2018-01-24

作者：立树（Eric）

参数：

用法：Console( param1 [,param2] … [,paramx] )。

说明：参数可以是 1 个，也可以是多个，多参数适用于一次打印多个对象、数组等。

param：

类型：
混合类型（数组、对象、数字、布尔值、字符串）
默认：
无
描述：
必填，控制台打印的内容。

示例代码：

// 字符串
Console("哈哈哈");              // "哈哈哈"

// 等效字符串
Console("哈哈哈"+"呵呵呵");      // "哈哈哈呵呵呵"
Console("哈哈哈","呵呵呵");      // "哈哈哈呵呵呵"

// 单个数组
Console([1,2,3]);                                       // [1,2,3]
Console(["哈哈","吼吼","怕不是个傻子吧"]);                  // ["哈哈","吼吼","怕不是个傻子吧"]
// 多个数组（"\n"：换行显示）
Console([1,2,3],"\n",["哈哈","吼吼","怕不是个傻子吧"]);     // 一行显示一个数组，便于查看数组内容（"\n"）

// 单个对象
Console({plugin:"Console.js",author:"立树"});            // {"plugin":"Console.js","author":"立树"}
// 多个对象（说到对象，我还没有对象！！）
Console({plugin:"Console.js"},"\n",{author:"立树"});     // 一行显示一个对象，便于查看对象内容（"\n"）

// 特殊对象（会打印比较详细的数据）
Console(window);
// =============================
// Param No.1
// Param Type  : [object Window]
// Constructor : function Window() { [native code] }
// Content Details :
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
// =============================
// [object Window]

localdata

说明：localdata，HTML5 本地存储插件。

版本：1.2.0

开发：2018-01-05

作者：立树（Eric）

功能：

设置缓存

可以存储字符串、数字、布尔值、数组、对象等（详解）。
读取缓存

读取已保存的缓存（详解）。
删除缓存

删除已保存的缓存（详解）。
更新缓存

更新已保存的缓存（详解）。
清空缓存

删除所有的缓存（详解）。

设置缓存：

用法：localdata.set(key,val)。

key：

类型：
字符串
默认：
无
描述：
必填，要存储的数据的键名。

val：

类型：
混合类型（字符串、数字、布尔值、数组、对象）
默认：
无
描述：
必填，要存储的数据。

// 字符串
localdata.set("name","立树");

// 数字
localdata.set("age",25);

// 布尔值
localdata.set("single",true);

// 数组
localdata.set("favor",["电影","音乐","摄影","编程","美食","旅行"]);

// 对象
localdata.set("infos",{job:"前端工程师"});

读取缓存：

用法：localdata.get(key)。

key：

类型：
字符串
默认：
无
描述：
必填，要读取的数据的键名。

// 示例代码
localdata.get("name");        // 字符串，"立树"
localdata.get("age");         // 字符串，"25"
localdata.get("single");      // 字符串，"true"
localdata.get("favor");       // 数组，["电影","音乐","摄影","编程","美食","旅行"]
localdata.get("infos");       // 对象，{"job":"前端工程师"}
localdata.get("other");       // 读取不到，返回 undefined

删除缓存：

用法：localdata.del(key)。

key：

类型：
字符串
默认：
无
描述：
必填，要删除的数据的键名。

// 设置缓存
localdata.set("name","立树");
Console(localdata.get("name"));     // 控制台打印 "立树"
// 删除缓存
localdata.del("name");
Console(localdata.get("name"));     // 控制台打印 undefined

更新缓存：

用法：localdata.update(key,val)。

key：

类型：
字符串
默认：
无
描述：
必填，要更新的数据的键名。

val：

类型：
混合类型（字符串、数字、布尔值、数组、对象）
默认：
无
描述：
必填，要更新的数据。

// 设置缓存
localdata.set("infos",{job:"设计师"});
Console(localdata.get("infos"));                // 控制台打印 {job:"设计师"}
// 更新缓存
localdata.update("infos",{job:"前端工程师"});
Console(localdata.get("infos"));                // 控制台打印 {job:"前端工程师"}

清空缓存：

用法：localdata.clear()。

参数：无

// 设置缓存
localdata.set("name","立树");
localdata.set("infos",{job:"前端工程师"});
Console(localdata.get("name"));      // 控制台打印 "立树"
Console(localdata.get("infos"));     // 控制台打印 {"job":"前端工程师"}
// 清空缓存
localdata.clear();
Console(localdata.get("name"));      // 控制台打印 undefined
Console(localdata.get("infos"));     // 控制台打印 undefined

hhRegex

说明：正则表达式验证插件。

版本：1.4.1

开发：2018-07-04

作者：立树（Eric）

功能：

邮箱验证

用于验证各类邮箱账号（详解）。
手机号验证

用于验证移动、联通、电信三大运营商的手机号（详解）。
身份证验证

用于验证 15位、18位身份证号，日期范围：1900-今天（详解）。
车牌号验证

用于验证普通车牌号、新能源车牌号、特殊车牌号等（详解）。

邮箱验证

用法：hhRegex.isEmail(str);

返回值：布尔值

str：

类型：
字符串
默认：
无
描述：
必填，邮箱账号。

// 示例代码
var email1 = "houheaven";          // 随意字符串
alert(hhRegex.isEmail(email1));    // false

var email2 = "1000@gmail";         // 无效邮箱
alert(hhRegex.isEmail(email2));    // false

var email3 = "10000@gmail.com";    // 有效邮箱
alert(hhRegex.isEmail(email3));    // true

手机号验证

用法：hhRegex.isPhone(str);

返回值：布尔值

str：

类型：
字符串
默认：
无
描述：
必填，手机号码。

// 示例代码
var phone1 = "houheaven";          // 随意字符串
alert(hhRegex.isPhone(phone1));    // false

var phone2 = "10010102030";        // 无效号码
alert(hhRegex.isPhone(phone2));    // false

var phone3 = "15050050010";        // 有效号码
alert(hhRegex.isPhone(phone3));    // true

身份证验证

用法：hhRegex.isSfz(str);

返回值：布尔值

str：

类型：
字符串
默认：
无
描述：
必填，身份证号码（15位、18位）。

// 示例代码
var sfz1 = "houheaven";         // 随意字符串
alert(hhRegex.isSfz(sfz1));     // false

var sfz2 = "110110201801241234";    // 无效身份证
alert(hhRegex.isSfz(sfz2));         // false

// 为了隐私安全和避免不必要的麻烦，有效身份证不做演示

车牌号验证

用法：hhRegex.isCar(str);

返回值：布尔值

str：

类型：
字符串
默认：
无
描述：
必填，车牌号。

// 示例代码
var car1 = "houheaven";         // 随意字符串
alert(hhRegex.isCar(car1));     // false

var car2 = "琼B66666";          // 模拟车牌号
alert(hhRegex.isCar(car2));     // true

hhArr

说明：数组操作插件。

版本：1.2.0

开发：2018-01-26

作者：立树（Eric）

功能：

数组排序

对一维数组可以进行升序、降序两种操作（详解）。
数组打乱

将数组内容进行随机打乱（详解）。

数组排序

用法：hhArr.sort( arr, key, type );

说明一：此排序会改变原数组，无返回值。

说明二：如果数组不是一维对象数组，第二个参数可以是排序类型。

arr：

类型：
数组
默认：
无
描述：
必填，要排序的数组（仅支持一维数组）。

key：

类型：
字符串
默认：
无
描述：
选填，对一维对象数组进行排序，key 是对象中的键名。

type：

类型：
字符串
默认：
"desc"
取值：
"desc" - 降序，"asc" - 升序。
描述：
选填，排序类型。

// 字符串型数组
var arr = ["bb","AA","z","a"];
hhArr.sort(arr);
Console(arr);              // 默认降序，["z","bb","a","AA"]

// 数字型数组
var arr = [1024,"799",111,66,3];
hhArr.sort(arr,"desc");
Console(arr);              // 降序，[1024,"799",111,66,3]
hhArr.sort(arr,"asc");
Console(arr);              // 升序，[3,66,111,"799",1024]

// 对象型数组
var arr = [
	{idx:3,str:"a"},
	{idx:1,str:"b"},
	{idx:2,str:"c"}
];

// 按 idx 的值进行排序
hhArr.sort(arr,"idx","asc");
Console(arr);
//[
//	{"idx":1,"str":"b"},
//	{"idx":2,"str":"c"},
//	{"idx":3,"str":"a"}
//]

// 按 str 的值进行排序
hhArr.sort(arr,"str","asc");
Console(arr); 
//[
//	{"idx":3,"str":"a"},
//	{"idx":1,"str":"b"},
//	{"idx":2,"str":"c"}
//]

数组打乱

用法：hhArr.shuffle(arr);

说明一：此打乱会改变原数组，无返回值。

说明二：至今不知道这个功能有什么用。。

arr：

类型：
数组
默认：
无
描述：
必填，要打乱内容的数组。

// 示例代码
var arr = [1024,"799",111,66,3];

// 打乱数组顺序
hhArr.shuffle(arr);
Console(arr);              // [3,1024,"799",111,66]

// 打乱数组顺序
hhArr.shuffle(arr);
Console(arr);              // [66,"799",3,111,1024]

hhObj

说明：对象操作插件。

版本：1.2.0

开发：2018-01-30

作者：立树（Eric）

功能：

获取对象属性与方法的个数

只能获取对象的第一级属性与方法，多级不做处理（详解）。

获取对象属性与方法的个数

用法：hhObj.getSize(obj);

说明：此功能不会改变原数组。

返回值：对象一级属性与方法的个数。

obj：

类型：
对象
默认：
无
描述：
必填，要操作的对象。

// 空对象
var obj = {};
Console(hhObj.getSize(obj));       // 0

// 普通对象
var obj = {
	name: "立树",
	detail: {
		age: 25,
		favor: ["电影","音乐","摄影","编程","美食","旅行"]
	},
	greet: function(){
		alert("嘿，小婊砸。");
	}
};
Console(hhObj.getSize(obj));       // 3

hhStr

说明：字符串操作插件。

版本：1.1.0

开发：2018-03-19

作者：立树（Eric）

功能：

获取浏览器地址的参数

传入参数名即可获取当前浏览器地址中对应的值（详解）。
获取指定地址的参数

传入参数名即可获取指定地址中对应的值（详解）。

获取浏览器地址的参数

用法：hhStr.getQueryValue(key);

说明：如果获取的参数值被 encodeURIComponent 编码过，插件会将其解码后返回。

返回值：参数名不存在时，返回 null。

key：

类型：
字符串
默认：
无
描述：
必填，要获取的参数名。

// 模拟的浏览器地址
url = "http://boo.com/foo.php?name=Eric&job=developer";
// 获取姓名和职业
Console(hhStr.getQueryValue("name"));       // Eric
Console(hhStr.getQueryValue("job"));        // developer

获取指定地址的参数

用法：hhStr.getUrlValue(url,key);

说明：如果获取的参数值被 encodeURIComponent 编码过，插件会将其解码后返回。

返回值：参数名不存在时，返回 null。

url：

类型：
字符串
默认：
无
描述：
必填，要操作的有效地址。

key：

类型：
字符串
默认：
无
描述：
必填，要获取的参数名。

// 模拟的浏览器地址
url = "http://boo.com/foo.php?name=%E7%AB%8B%E6%A0%91&job=developer";
// 获取姓名和职业
Console(hhStr.getQueryValue("name"));       // 立树
Console(hhStr.getQueryValue("job"));        // developer

hhPanel

说明：hhPanel，面板插件。

版本：3.3.0

开发：2018-09-26

作者：立树（Eric）

演示：查看效果

依赖：

smartScroll.js（第三方，插件弹窗防止页面滚动，by 张鑫旭）
jQuery（第三方，底层支持）
Ajax（后天堂插件，网络数据请求）

功能：

信息弹窗

显示一个展示信息的弹窗（详解）。
确认弹窗

显示一个确认信息的弹窗（详解）。
输入弹窗

显示一个输入信息的弹窗（详解）。
消息弹窗

显示一个展示信息的弹窗，一段时间后会自动关闭（详解）。
加载提示框

提供了几种比较精致百搭的加载提示框，目前应用在 Ajax 插件中（详解）。
进度条提示框

显示一个 1-100 进度的提示框（详解）。
微信提示面板

主要应用于微信，提供了一款分享提示和一款下载提示（详解）。
二维码展示面板

一款简洁百搭的二维码展示面板（详解）。
分享面板

APP 特有功能，提供了微信、新浪微博、QQ 等分享方式（详解）。
上拉菜单面板

移动端特有功能，仿 APP 的 actionSheet 功能，提供三种风格（详解）。
级联树面板

主要是处理级联数据（比如，省市区三级数据选择、医院科室多级选择等），不限级数（详解）。
地址面板

一组提供了选择、添加、修改等功能的地址面板（详解）。
远程页面面板

粗暴的传入一个远程地址，直接就可以打开浏览（详解）。
模态框

类似于 bootstrap 模态框功能（详解）。
关闭面板

可以关闭单个面板，也可以关闭一组相同类型的面板（详解）。
关闭全部面板

可以一次性当前所有的面板（详解）。

信息弹窗

两种调用模式。

简单模式：hhPanel.alert(content,fnYes)

复杂模式：hhPanel.alert(object)

简单模式

用法：hhPanel.alert(content,fnYes)

content：

类型：
混合类型（字符串、数组、数字等）
默认：
空
描述：
必填，信息内容。

fnYes：

类型：
回调函数
默认：
无
描述：
选填，点击确定按钮后的回调函数。
返回值：
function(elm,opt)
elm：jQuery 元素
opt：面板参数

// 字符串
hhPanel.alert("Hello hhPanel!");
// 数组
hhPanel.alert(["邪不压正","我不是药神","头号玩家","生存家族","迷雾"]);

复杂模式

用法：hhPanel.alert(object)

具体参数如下。

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个信息弹窗的话，需要进行设置。

title：

类型：
混合类型（字符串、布尔值）
默认：
信息提示
描述：
选填，标题，为 false 时不显示标题。

content：

类型：
混合类型（字符串、数组、对象、数字等）
默认：
空
描述：
必填，信息内容。

btns：

类型：
数组
默认：
["确定"]
描述：
选填，确定按钮文字，只能是数组，并且数组长度为 1。

anim：

类型：
字符串
默认：
bounce
描述：
选填，显示与关闭弹窗的动画特效。
取值：
见"动画特效"

area：

类型：
数组
默认：
["300px","auto"]
描述：
选填，面板大小，只能是数组，并且数组长度为 2，前者为宽度，后者为高度。
宽度支持类型：数字（视为px）、像素（px）、百分比（%）。
高度支持类型：数字（视为px）、像素（px）、百分比（%）、自适应（"auto"）。

skin：

类型：
字符串
默认：
空
描述：
选填，样式类名（用于修改弹窗样式）。

shade：

类型：
浮点数
默认：
0.5
取值：
0-1
描述：
选填，遮罩透明度。

yesClose：

类型：
布尔值
默认：
true
描述：
选填，点击确定按钮时，是否自动关闭面板（通常用于异步请求，需要手动关闭）。

yes：

类型：
回调函数
默认：
无
描述：
选填，点击确定按钮后的回调函数。
返回值：
function(elm,opt)
elm：jQuery 元素
opt：面板参数

// 示例代码
hhPanel.alert({
	title: "新消息",
	content: "我心向水，君心向山。",
	area: ["250px","200px"],
	btns: ["关闭"],
	shade: 0.2,
	anim: "slideUp"
});

确认弹窗

两种调用模式。

简单模式：hhPanel.confirm(content,fnYes)

复杂模式：hhPanel.confirm(object)

简单模式

用法：hhPanel.confirm(content,fnYes)

详情：见信息弹窗（hhPanel.alert）- 简单模式

复杂模式

用法：hhPanel.confirm(object)

具体参数如下（部分参数已略，详见信息弹窗（hhPanel.alert）- 复杂模式）。

id：略。

title：略。

content：略。

btns：

类型：
数组
默认：
["取消","确定"]
描述：
选填，面板按钮，只能是数组，并且数组长度为 2。

anim：略。

area：略。

skin：略。

shade：略。

yesClose：略。

yes：略。

cancel：

类型：
回调函数
默认：
无
描述：
选填，点击取消按钮后的回调函数。

// 示例代码
hhPanel.confirm({
	title: "新消息",
	content: "你要是觉得我丑，那你就发个 3 元红包给我，但是呢，我觉得，我可能一个都收不到，呕吼。",
	btns: ["承认你帅","立刻打赏！"]
});

输入弹窗

两种调用模式。

简单模式：hhPanel.prompt(fnYes)

复杂模式：hhPanel.prompt(object)

简单模式

用法：hhPanel.prompt(fnYes)

fnYes：

类型：
回调函数
默认：
无
描述：
选填，点击取消按钮后的回调函数。
返回值：
function(val,val_html,elm,opt)
val：输入内容
val_html：输入内容的标签形式（formType=textarea 时有效）
elm：jQuery 元素
opt：面板参数

// 示例代码
hhPanel.prompt(function(val){
	alert(val);
});

复杂模式

用法：hhPanel.prompt(object)

具体参数如下（部分参数已略，详见信息弹窗（hhPanel.alert）- 复杂模式）。

id：略。

title：略。

formType：

类型：
字符串
默认：
text
取值：
text（输入框）、textarea（文本框）、password（密码框）、number（数字框）
描述：
选填，输入框的类型。

maxlength：

类型：
数字
默认：
10000
描述：
选填，输入框的输入内容长度限制。

value：

类型：
混合类型（数字、字符串）
默认：
空
描述：
选填，输入框的初始化内容。

descp：

类型：
字符串
默认：
空
描述：
选填，面板的描述。

placeholder：

类型：
字符串
默认：
空
描述：
选填，输入框的提示文字。

btns：略。

anim：略。

area：略。

skin：略。

shade：略。

yesClose：略。

yes：略（与此方法简单模式的相同）。

cancel：略。

// 示例代码
hhPanel.prompt({
	formType: "textarea",
	descp: "无缘无故的卖个萌~",
	placeholder: "随便写点什么吧",
	yes: function(val,html){
		alert(val);
		console.log(html);
	}
});

消息弹窗

两种调用模式。

简单模式：hhPanel.msg(content,fnEnd)

复杂模式：hhPanel.msg(object)

简单模式

用法：hhPanel.msg(content,fnEnd)

content：略。

fnEnd：

类型：
回调函数
默认：
无
描述：
选填，消息弹窗关闭后的回调函数。
返回值：
function(elm,opt)
elm：jQuery 元素
opt：面板参数

// 示例代码
hhPanel.msg("我喜欢你，你有意见？");
hhPanel.msg("反抗是不可能反抗的，只有偷偷略略略这个样子。",function(elm,opt){
	console.log("内心：略略略");
});

复杂模式

用法：hhPanel.msg(object)

具体参数如下（部分参数已略，详见信息弹窗（hhPanel.alert）- 复杂模式）。

content：略。

anim：略。

skin：略。

time：

类型：
数字
默认：
1500（单位：毫秒）
描述：
选填，自动关闭的时间。

end：略（与此方法简单模式的相同）。

// 示例代码
hhPanel.msg({
	content: "你制杖吗？",
	anim: "shake",
	time: 3000,
	end: function(){
		console.log("怕不是个傻子吧。");
	}
});

加载提示框

用法：hhPanel.loader(param,title);

param：可以是 Number（预设样式）、String（关闭提示）、Object（自定义模式）

title：修改提示标题

param	类型	风格	效果	默认	提示文字
1	Number	白色	切换魔方	无遮罩	无
2	Number	白色	切换魔方	有黑色遮罩	无
3	Number	黑色	旋转花纹	无遮罩	正在加载中
4	Number	黑色	波动音律	无遮罩	正在加载中
hide	String	关闭当前显示的加载提示框
JSON	Object	见下方详解

// 显示
hhPanel.loader(3);
// 关闭
hhPanel.loader("hide");

param 为 JSON 时候的具体参数。

style：

类型：
数字
默认：
1
取值：
1，2，3，4
描述：
必填，样式。

shade：

类型：
浮点数
默认：
0
取值：
0-1
描述：
选填，遮罩透明度。

title：

类型：
字符串
默认：
"正在加载中"
描述：
选填，提示标题（style 为 3、4 时有效）。

anim_show：

类型：
字符串
默认：
bounce
描述：
选填，显示的动画特效。
取值：
见"动画特效"

anim_hide：

类型：
字符串
默认：
bounce
描述：
选填，关闭的动画特效。
取值：
见"动画特效"

// 示例代码
hhPanel.loader({
	style: 3,
	title: "欧吼~",
	shade: 0.5,
	anim_show: "slideUp",
	anim_hide: "slideUp"
});

进度条提示框

两种调用模式。

简单模式：hhPanel.progress(percent,descp)

复杂模式：hhPanel.progress(object)

简单模式

用法：hhPanel.progress(percent,descp)

percent：

类型：
数字
默认：
0
取值：
0-100
描述：
必填，进度值。

descp：

类型：
字符串
默认：
"请稍后"
描述：
选填，提示文字。

// 示例代码
hhPanel.progress(5);
hhPanel.progress(50,"正在下载");

复杂模式

用法：hhPanel.progress(object)

具体参数如下。

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个进度条提示框的话，需要进行设置。

percent：

类型：
数字
默认：
0
取值：
0-100
描述：
必填，进度值。

unit：

类型：
字符串
默认：
%
描述：
选填，进度值的单位。

descp：

类型：
字符串
默认：
"请稍后"
描述：
选填，提示文字。

shade：

类型：
浮点数
默认：
0
取值：
0-1
描述：
选填，遮罩透明度。

anim：

类型：
字符串
默认：
bounce
描述：
选填，显示与关闭弹窗的动画特效。
取值：
见"动画特效"

// 示例代码
hhPanel.progress({
	percent: 25,
	unit: "",
	descp: "正在下载",
	shade: 0.2,
	anim: "slideUp"
});

微信提示面板

用法：hhPanel.wxhelp(param);

param	类型	默认效果	功能说明
"share"	String	页面虚化程度（blur）：5 遮罩透明度（shade）：0.7 动画特效（anim）：slideUp 提示图片宽度（width）：250px 提示图片右边距（right）：10px 提示图片上边距（top）：20px	打开一个分享提示
"download"	String	页面虚化程度（blur）：5 遮罩透明度（shade）：0.7 动画特效（anim）：slideUp 提示图片宽度（width）：85% 提示图片右边距（right）：7% 提示图片上边距（top）：20px	打开一个下载提示
JSON	Object	见下方详解	打开一个自定义提示

param 为 JSON 时候的具体参数。

img：

类型：
字符串
默认：
无
描述：
必填，提示图片，支持本地路径、网络路径（http）。

shade：

类型：
浮点数
默认：
0.3
取值：
0-1
描述：
选填，黑色遮罩的透明度。

anim：

类型：
字符串
默认：
slideUp
描述：
选填，显示与关闭的动画特效。
取值：
见"动画特效"

width：

类型：
字符串
默认：
250px
描述：
选填，提示图片的宽度。
取值：
像素值（比如 "100px"）、百分比（比如 "50%"）

right：

类型：
字符串
默认：
10px
描述：
选填，提示图片与设备右侧的距离。
取值：
像素值（比如 "100px"）、百分比（比如 "50%"）

top：

类型：
字符串
默认：
20px
描述：
选填，提示图片与设备上侧的距离。
取值：
像素值（比如 "100px"）、百分比（比如 "50%"）

// 分享提示（预定义模式）
hhPanel.wxhelp("share");
// 下载提示（预定义模式）
hhPanel.wxhelp("download");
// 自定义模式
hhPanel.wxhelp({
	img: "http://qnworks.houheaven.com/avatar_06.gif",
	shade: 0.5,
	blur: 10,
	anim: "slideDown",
	width: "50%",
	right: "40px",
	top: "60px"
});

二维码展示面板

说明：这个功能简单实用，就是展示一个二维码。

用法：hhPanel.qrcode(JSON);

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个二维码面板的话，需要进行设置。

img：

类型：
字符串
默认：
无
描述：
必填，二维码图片地址，支持本地路径、网络路径（http）。

descp：

类型：
字符串
默认：
"二维码"
描述：
选填，提示文字。

shade：

类型：
浮点数
默认：
0.3
取值：
0-1
描述：
选填，黑色遮罩的透明度。

blur：

类型：
数字
默认：
0
取值：
0-100
描述：
选填，页面虚化程度。

anim：

类型：
字符串
默认：
slideUp
描述：
选填，显示与关闭的动画特效。
取值：
见"动画特效"

// 示例代码
hhPanel.qrcode({
	img: "plugin/hhPanel/image/wx_qrcode.jpg",
	descp: "大爷儿，来玩啊",
	anim: "slideUp",
	shade: 0.4,
	blur: 5
});

分享面板

用法：hhPanel.share(JSON);

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个分享面板的话，需要进行设置。

title：

类型：
字符串
默认：
"分享到"
描述：
选填，面板标题。

list：

类型：
数组
默认：
[]
取值：
wxfriend（微信好友）、wxzone（微信朋友圈）、wxfavor（微信收藏）、qqfriend（QQ 好友）、weibo（新浪微博）
描述：
必填，要分享的平台。

shade：

类型：
浮点数
默认：
0.4
取值：
0-1
描述：
选填，黑色遮罩的透明度。

blur：

类型：
数字
默认：
0
取值：
0-100
描述：
选填，页面虚化程度。

success：

类型：
函数
默认：
无
描述：
选填，用户选择分享平台后的回调函数。
返回值：
success(ret)
格式：{ "id": String, "name": String }

// 示例代码
hhPanel.share({
	title: "请选择分享平台",
	list: ["wxfriend","wxzone","wxfavor"],
	shade: 0.2,
	blur: 5,
	success: function(ret)
	{
		// 选择 "微信好友"
		Console(ret.id);      // wxfriend
		Console(ret.name);    // 微信好友
	}
});

上拉菜单面板

用法：hhPanel.actionSheet(JSON);

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个上拉菜单面板的话，需要进行设置。

title：

类型：
字符串
默认：
""
描述：
选填，面板标题。

dangers：

类型：
字符串、字符串数组（["xxx"]）、对象数组（[{label:"xxx"}]）
默认：
[]
描述：
选填，危险选项菜单（比如“删除”操作），文字为红色。

buttons：

类型：
字符串、字符串数组（["xxx"]）、对象数组（[{label:"xxx"}]）
默认：
[]
描述：
必填，普通选项菜单，文字为蓝色。

itemkey：

类型：
对象
默认：
{id: "id",label: "label"}
描述：
选填，菜单（危险选项菜单、普通选项菜单）选项为对象时，可以指定对象 key（键名）。

cancel：

类型：
字符串
默认：
"取消"
描述：
选填，取消按钮的标题。

display：

类型：
字符串
默认：
default
取值：
default（默认样式）、modal（模态居中样式）、bottom（底部无边距样式）
描述：
选填，面板样式。

shade：

类型：
浮点数
默认：
0.4
取值：
0-1
描述：
选填，黑色遮罩的透明度。

success：

类型：
函数
默认：
无
描述：
选填，用户选择菜单后的回调函数。
返回值：
success(ret1,ret2)
ret1（插件数据）：{"id":ID,"label":String,"index":Number}
ret2（原始数据）：String / Object

// 基础调用
hhPanel.actionSheet({
	buttons: ["转发","点赞","评论","编辑"],
	success: function(ret1,ret2)
	{
		// 选择"评论"
		Console(ret1);      // {"id":"","label":"评论","index":2}
		Console(ret2);      // 评论
	}
});

// 高级调用
hhPanel.actionSheet({
	title: "请选择",
	dangers: "删除",
	buttons: [{label:"转发"},{label:"点赞"},{label:"评论"},{label:"编辑"}],
	display: "modal",
	anim: "bounce",
	success: function(ret1,ret2)
	{
		// 选择"点赞"
		Console(ret1);      // {"id":"","label":"点赞","index":2}
		Console(ret2);      // 点赞
	}
});

// 高级调用
hhPanel.actionSheet({
	title: "请选择",
	dangers: "删除",
	buttons: [
		{uid:"hh101",name:"立树"},
		{uid:"hh102",name:"东城"},
		{uid:"hh103",name:"余愔"}
	],
	itemkey: {id:"uid",label:"name"},
	success: function(ret1,ret2)
	{
		// 选择"东城"
		Console(ret1);      // {"id":"hh102","label":"东城","index":2}
		Console(ret2);      // {"uid":"hh102","name":"东城"}
	}
});

级联树面板

嘚瑟：这个功能可把自己牛批坏了，我先叉会腰。

说明：这个功能主要用于有联动关系的结构数据（省市区的三级地址联动、医院科室部门医生的四级联动等）。

特点：

不限制数据级数（深度）
不限制请求接口的参数，参数配置灵活
数据缓存，当请求过的数据被再次调用时将直接读取缓存，节省了带宽，提升了访问速度和用户体验

思路说明（以省市区三级联动为例）。

核心问题一：参数值不固定

省列表：第一级数据，通常没有参数，直接获取。

市列表：第二级数据，获取市列表时，肯定需要省的 ID，参数名称（key）可以看做是固定的（比如 province_id），但是参数值（val）是变化的。

区列表：第三级数据，获取区列表时，肯定需要市的 ID，参数名称（key）可以看做是固定的（比如 city_id），但是参数值（val）是变化的。

由上可知，这些固定值（province_id、city_id）没有什么问题，关键是如何固定这些变化的参数值，所以，我们引用了魔法变量（灵感来源于七牛），在请求地址中使用 {{id}} 来代表其值，然后在数据请求之前将其替换为具体的值。

然后，我们将省市区三个接口存放在一个一维数组中，传给插件。
核心问题二：接口返回数据解析

项目不同、开发者不同，所以请求接口最终返回的 JSON 数据格式也有可能是不同的。

但是有一点是可以确定的，开发者一定知道数据格式，因此他只需要把数据中的键名和键值告诉插件就行了，然后省下的功能就甩给插件处理吧（告诉我谁是最贴心的人）。

然后，我们将三组对应的键值对存放在一个一维数组中，传给插件。
核心问题三：数据回填

这个也没什么好说的，只需要将三个值（省市区）存放在一个一维数组中，传给插件。

综上，如果上面的思路你实在看不懂，那也没关系，看下面的参数说明和演示代码，能用就行了。

用法：hhPanel.tree(JSON);

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个级联树面板的话，需要进行设置。

title：

类型：
字符串
默认：
"数据面板"
描述：
选填，面板标题。

urls：

类型：
数组
默认：
无
描述：
必填，级联数据的请求地址列表（详见示例代码）。
数组的长度决定了级联数据的层级。
魔法变量为 {{id}}，不可修改（比如，proc/get_city.php?province_id={{id}}）。

rets：

类型：
数组
默认：
无
描述：
必填，接口返回值的键值对列表（详见示例代码）。
数组的长度必须与 urls 保持一致。
格式：
{id:"provinceid",text:"province"}
id、text 为插件预设值，不可修改。
provinceid：字符串，指代的是 ID 的键名。
province：字符串，指代的是中文展示的键名。

vals：

类型：
数组
默认：
无
描述：
选填，具体的键值列表，用于数据回填（详见示例代码）。
数组的长度必须与 urls 保持一致。

shade：

类型：
浮点数
默认：
0.3
描述：
选填，黑色遮罩的透明度。
取值：
0-1

blur：

类型：
数字
默认：
0
描述：
选填，页面虚化程度。
取值：
0-100

success：

类型：
函数
默认：
无
描述：
选填，用户选择好级联数据的回调函数。
返回值：
success(ret)
格式：{ "items": Array, "ids": Array, "texts": Array, "result": String }

示例代码：

下面是获取省市区三个接口的返回数据（以“上海市 - 市辖区 - 徐汇区”为例）。

// 获取省级列表（get_province.php）
{
    "state": true,
    "data": [
        {"provinceid":"110000","province":"北京市"},
        {"provinceid":"320000","province":"江苏省"},
        {"provinceid":"310000","province":"上海市"},
        // 略
    ],
    "msg": "success"
}

// 获取市级列表（get_city.php）
{
    "state": true,
    "data": [
        {"cityid":"310100","city":"市辖区","provinceid":"310000"},
        {"cityid":"310200","city":"县","provinceid":"310000"}
    ],
    "msg": "success"
}

// 获取区县列表（get_area.php）
{
    "state": true,
    "data": [
        {"areaid":"310104","area":"徐汇区","cityid":"310100"},
        {"areaid":"310106","area":"静安区","cityid":"310100"},
        {"areaid":"310115","area":"浦东新区","cityid":"310100"},
        // 略
    ],
    "msg": "success"
}

下面是选择地址的调用代码。

// 选择地址
hhPanel.tree({
	id: "choose",
	title: "选择地址",
	urls: [
		"proc/get_province.php",          // 获取省级列表
		"proc/get_city.php?pid={{id}}",   // 获取市级列表
		"proc/get_area.php?cid={{id}}"    // 获取区县列表
	],
	rets: [
		{id:"provinceid",text:"province"},  // provinceid、province 参照 get_province.php
		{id:"cityid",text:"city"},          // cityid、city 参照 get_city.php
		{id:"areaid",text:"area"}           // areaid、area 参照 get_area.php
	],
	success: function(ret){
		// 选择成功
	}
});

// 回调成功的返回值
{
    "items": [
        {"id":310000,"text":"上海市"},
        {"id":310100,"text":"市辖区"},
        {"id":310104,"text":"徐汇区"}
    ],
    "ids": [310000,310100,310104],
    "texts": ["上海市","市辖区","徐汇区"],
    "result": "上海市市辖区徐汇区"
}

下面是修改地址的调用代码。

// 选择地址
hhPanel.tree({
	id: "edit",
	title: "修改地址",
	urls: [
		"proc/get_province.php",
		"proc/get_city.php?pid={{id}}",
		"proc/get_area.php?cid={{id}}"
	],
	rets: [
		{id:"provinceid",text:"province"},
		{id:"cityid",text:"city"},
		{id:"areaid",text:"area"}
	],
	vals: [310000,310100,310104],     // 省市区的值，面板打开时，自动被选中
	success: function(ret){
		// 选择成功
	}
});

PS：省市区三级数据选择只是一个小小的例子，替换参数之后，插件可以应用各种场景。

地址面板

地址面板，是继“级联树面板”后开发的又一强大功能。

跨终端：地址面板为移动端开发，同时对 PC 做了适配（550x350）
多功能：集成了地址列表、添加、修改等功能，并且各功能可独立使用

地址数据格式问题。

与“级联树面板”自定义的数据格式不同，地址面板数据预先定义好了一套数据格式，若想使用此功能，开发者必须严格遵从。

// 地址数据格式（以下为虚拟数据）
{
	"id": 1000,                                      // 地址 ID
	"name": "Eric",                                  // 收件人姓名
	"phone": "1506007xxxx",                          // 收件人手机号
	"province_id": "310000",                         // 省 ID
	"province": "上海市",                             // 省名称
	"city_id": "310100",                             // 市 ID
	"city": "市辖区",                                 // 市名称
	"area_id": "310115",                             // 区 ID
	"area": "浦东新区",                                // 区名称
	"detail": "金茂大厦999层",                         // 具体地址
	"address": "上海市市辖区浦东新区金茂大厦999层",       // 全部地址信息
	"postalcode": "",                                // 邮政编码
	"is_default": 0,                                 // 是否是默认地址（0-否，1-是）
	"is_delete": 0,                                  // 是否已被删除（0-否，1-是）
	"created": "2018-07-26 17:33:02"                 // 创建时间
}

三种功能模式：选择地址、添加地址、修改地址。

选择地址

用法：hhPanel.addr(object)

具体参数如下。

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个地址面板的话，需要进行设置。

mode：

类型：
字符串
描述：
必填，面板模式，当其处于“选择地址”时，mode 必须为 "list"。

title：

类型：
字符串
默认：
收货地址
描述：
选填，面板标题。

list_url：

类型：
字符串
默认：
空
描述：
必填，地址的列表接口。

add_url：

类型：
字符串
默认：
空
描述：
必填，地址的添加接口。

edit_url：

类型：
字符串
默认：
空
描述：
必填，地址的修改接口。

tree：

类型：
对象
默认：
空对象
描述：
必填，级联树面板参数（详见 hhPanel.tree）。
地址列表中，地址添加、修改时，会对省市区进行操作，因此会调用级联树面板。

blur：

类型：
数字
默认：
0
取值：
0-100
描述：
选填，页面虚化程度。

shade：

类型：
浮点数
默认：
0.3
取值：
0-1
描述：
选填，遮罩透明度。

shadeClose：

类型：
布尔值
默认：
true
描述：
选填，点击遮罩后是否关闭面板。

success：

类型：
回调函数
默认：
无
描述：
选填，用户选择地址后的回调函数。
返回值：
function(addr)
addr：选择的地址数据（JSON）。

// 地址列表
hhPanel.addr({
	id: "list",
	mode: "list",
	title: "我的地址",
	list_url: "addr_list.php?uid=10001",
	add_url: "addr_add.php?uid=10001",
	edit_url: "addr_edit.php?uid=10001",
	tree: {
		urls: [
			"get_province.php",
			"get_city.php?pid={{id}}",
			"get_area.php?cid={{id}}"
		],
		rets: [
			{id:"provinceid",text:"province"},
			{id:"cityid",text:"city"},
			{id:"areaid",text:"area"}
		]
	},
	success: function(addr){
		// 选择地址成功后的操作
	}
});

添加地址

用法：hhPanel.addr(object)

具体参数如下（部分参数已略，详见“选择地址”）。

id：略。

mode：

类型：
字符串
描述：
必填，面板模式，当其处于“添加地址”时，mode 必须为 "add"。

title：略。

add_url：略。

tree：略。

blur：略。

shade：略。

shadeClose：略。

success：

类型：
回调函数
默认：
无
描述：
选填，用户添加地址后的回调函数。
返回值：
function(addr)
addr：添加的地址数据（JSON）。

// 添加地址
hhPanel.addr({
	mode: "add",
	title: "添加地址",
	add_url: "addr_add.php?uid=10001",
	tree: {
		urls: [
			"get_province.php",
			"get_city.php?pid={{id}}",
			"get_area.php?cid={{id}}"
		],
		rets: [
			{id:"provinceid",text:"province"},
			{id:"cityid",text:"city"},
			{id:"areaid",text:"area"}
		]
	},
	success: function(addr){
		// 选择地址成功后的操作
	}
});

修改地址

用法：hhPanel.addr(object)

具体参数如下（部分参数已略，详见“选择地址”）。

id：略。

mode：

类型：
字符串
描述：
必填，面板模式，当其处于“修改地址”时，mode 必须为 "edit"。

title：略。

edit_url：略。

tree：略。

addr：

类型：
对象
默认：
空对象
描述：
必填，要修改的地址数据（请注意数据格式）。

blur：略。

shade：略。

shadeClose：略。

success：

类型：
回调函数
默认：
无
描述：
选填，用户修改地址后的回调函数。
返回值：
function(addr)
addr：修改的地址数据（JSON）。

// 修改地址
hhPanel.addr({
	mode: "edit",
	edit_url: "addr_edit.php?uid=10001",
	tree: {
		urls: [
			"get_province.php",
			"get_city.php?pid={{id}}",
			"get_area.php?cid={{id}}"
		],
		rets: [
			{id:"provinceid",text:"province"},
			{id:"cityid",text:"city"},
			{id:"areaid",text:"area"}
		],
		vals: [310000,310100,310104]
	},
	addr: {
		"id":5000,
		"name":"立树",
		"phone":"150500xxxxx",
		"province_id":"310000",
		"province":"上海市",
		"city_id":"310100",
		"city":"市辖区",
		"area_id":"310104",
		"area":"徐汇区",
		"detail":"徐家汇23333号",
		"address":"上海市市辖区徐汇区徐家汇23333号",
		"postalcode":"666666",
		"is_default":0,
		"is_delete":0,
		"created":"2018-04-29 22:30:04"
	},
	success: function(addr){
		// 选择地址成功后的操作
	}
});

远程页面面板

两种调用模式。

简单模式：hhPanel.page(url)

复杂模式：hhPanel.page(object)

简单模式

用法：hhPanel.page(url)

url：

类型：
字符串
默认：
空
描述：
必填，远程页面的地址。

// 本地页面
hhPanel.page("music/index.html");
// 远程页面
hhPanel.page("http://www.houheaven.com");

复杂模式

用法：hhPanel.page(object)

具体参数如下。

id：

类型：
字符串
默认：
default
描述：
选填，面板标识，如果一个页面使用多个远程页面面板的话，需要进行设置。

title：

类型：
混合（字符串、布尔值）
默认：
false
描述：
选填，面板标题，设置后会显示一个带有关闭按钮的面板头部，为 false 时不显示。

url：

类型：
字符串
默认：
空
描述：
必填，远程页面的地址。

area：

类型：
数组
默认：
["80%","80%"]
描述：
选填，面板大小，只能是数组，并且数组长度为 2，前者为宽度，后者为高度。
宽度支持类型：数字（视为px）、像素（px）、百分比（%）。
高度支持类型：数字（视为px）、像素（px）、百分比（%）。

display：

类型：
字符串
默认：
"center"
取值：
center（居中）、bottom（居下）
描述：
选填，面板显示位置（与 area 配合使用）。

shade：

类型：
浮点数
默认：
0.4
取值：
0-1
描述：
选填，遮罩透明度。

shadeClose：

类型：
布尔值
默认：
true
描述：
选填，点击遮罩后是否关闭面板。

destroyOnClose：

类型：
布尔值
默认：
true
描述：
选填，关闭面板后是否删除面板 DOM。

anim：

类型：
字符串
默认：
slideUp
描述：
选填，显示与关闭弹窗的动画特效。
取值：
见"动画特效"

// 全屏显示
hhPanel.page({
	id: "page1",
	title: "houheaven",
	url: "http://www.houheaven.com",
	area: ["100%","100%"],
	destroyOnClose: false
});
// 底部显示
hhPanel.page({
	id: "page2",
	title: "搜索还是谷歌好！",
	url: "http://baidu.com",
	shade: 0.5,
	area: ["100%","75%"],
	display: "bottom",
	destroyOnClose: false
});

模态框

此功能类似于 bootstrap modal，需要在页面中提前写好指定格式的 html 标签（以下面代码为例）。

首先，".hhModal" 是最外层容器，是必须的，而且必须是类名（class）。

其次，".hhModalHeader"（及内部）、 ".hhModalContent" 是预设样式，而任何加了 hhModalClose 类名之后，都会被绑定一个点击关闭模态框的事件。



  
    正经演示
    
  
  
    
    什么都不要说了，这次充多少？
    当前时间戳：0

用法：hhPanel.modal(object)

具体参数如下。

elm：

类型：
字符串
默认：
空
描述：
必填，要显示的模态框的标签，只能是类名（class）、唯一标识（id）。

shade：

类型：
浮点数
默认：
0.4
取值：
0-1
描述：
选填，遮罩透明度。

shadeClose：

类型：
布尔值
默认：
true
描述：
选填，点击遮罩后是否关闭面板。

anim：

类型：
字符串
默认：
slideUp
描述：
选填，显示与关闭弹窗的动画特效。
取值：
见"动画特效"

init：

类型：
回调函数
默认：
无
描述：
选填，初始化成功的回调函数，模态框第一次初始化时触发。
返回值：
function(ret){}

success：

类型：
回调函数
默认：
无
描述：
选填，调用成功的回调函数，每次显示模态框都会触发。
返回值：
function(ret){}

// JS 调用
hhPanel.modal({
	elm: ".demo",
	init: function(ret){
		Console(ret);
	},
	success: function(ret){
		$(ret.elm).find(".time").text(Date.now());
	}
});

关闭面板

用法：hhPanel.close([type]);

type：

类型：
字符串
默认：
无
取值：
hhAlert（信息弹窗）、hhConfirm（确认弹窗）、hhPrompt（输入弹窗）、hhMsg（消息弹窗）
hhLoader（加载弹窗）、hhProgress（进度条）、hhQrcode（二维码）、hhShare（分享）、hhWxHelp（微信引导）
hhActionSheet（上拉菜单）、hhTree（级联树）、hhAddr（地址）、hhPage（远程页面）
描述：
选填，面板类型。
值为空时，关闭最上方的面板。
不为空时，则关闭此类型的所有面板。

// 关闭单个面板
hhPanel.close();

// 关闭全部消息弹窗
hhPanel.close("hhMsg");

关闭全部面板

说明：一次性当前所有的面板。

用法：hhPanel.closeAll();

// 关闭全部面板
hhPanel.closeAll();

hhFolder

说明：项目文件插件（文件存储由七牛提供技术支持）。

版本：2.0.0

作者：立树（Eric）

演示：查看效果

特点：

1. 稳健快速：整个插件使用 Vue 进行开发，数据处理干净快速

2. 文件分类：使用者能够快速定位查找文件，点击分类也会切换文件上传类型，上传文件更加便捷

3. 文件缓存：同一分类内不同页码切换时，文件会被缓存下来，加快访问速度，节省服务器带宽

4. 智能参数：插件对“文件筛选器（filter）”、“缩略图”参数进行了智能计算，提升开发效率

5. 响应布局：针对分辨率 1200 像素上下的屏幕做了适配，能够保证最佳的浏览效果

6. 体验友好：内置多组动画、键盘 Esc 关闭、全新的文件图标等

依赖：

jQuery（第三方，底层支持）
vue（第三方，底层支持）
laypage（第三方，分页插件）
Ajax（1.2.0+）（后天堂插件，数据请求）
hhFile（后天堂插件，文件信息处理）

参数：

用法：hhFolder(JSON);

id：

类型：
字符串
默认：
"default"
描述：
选填，面板标识。
当一个页面中存在多处调用，如果插件功能不同（比如第一个只能选择图片、第二个只能选择文档），那么就需要单独设置，不然无法实现想要的功能。
可以简单的理解为，此次要打开的文件面板 ID 与上次不同，面板内容会刷新，相同则再次打开上次的文件面板。

title：

类型：
字符串
默认：
"文件库"
描述：
选填，面板标题。

shade：

类型：
浮点数
默认：
0.4
取值：
0-1
描述：
选填，面板遮罩的透明度。

anim：

类型：
字符串
默认：
"slideDown"
描述：
选填，面板的显示与关闭动画。
取值：
见"动画特效"

upload：

类型：
布尔值
默认：
true
描述：
选填，面板是否开启上传文件功能。
true：选择文件、上传文件。
true：只能选择文件。

max：

类型：
数字
默认：
10
描述：
选填，面板一次最多可以选择的文件数量。
此参数与文件上传时是否可以选择多个文件相绑定，当 max=1 时，上传文件时只能选择一张，max>1 时，可以选择多张。
而且，max 还会影响文件选择的回调函数的返回值，具体见 success。
技巧一：
限制选择单个文件，比如用户上传头像，max 设置为 1 即可。
技巧二：
限制选择指定个数的文件，比如让用户最多上传 10 个证书，这时候 max 相当于动态的，用户第一次打开面板时，max 为 10，然后选择了 3 个文件，当用户再次打开时，程序应该先判断已选择的文件个数，然后用总数（10）减去已选择的文件个数（3），然后 max 设置为 7，以此类推，直至全部选择完毕，然后把隐藏掉面板打开的入口，至此，整个业务逻辑就完整了。

max_size：

类型：
字符串
默认：
"10mb"
描述：
选填，文件上传时，单个文件的大小限制。
取值：
文件大小+单位（kb、mb、gb 等）。

filter：

类型：
字符串
默认：
"*"
描述：
选填，文件上传的类型筛选器（文件上传时，允许用户选择、上传哪些类型的文件）。
取值：
见下方详解。

prefix：

类型：
字符串
默认：
无
描述：
选填，文件前缀。
无前缀，http://www.xxxx.com/hello.jpg。
有前缀，http://www.xxxx.com/foo/hello.jpg。

thumb_w：

类型：
数字
默认：
150
描述：
选填，图片上传后缩略图的宽度（仅上传图片时有效）。

thumb_h：

类型：
数字
默认：
150
描述：
选填，图片上传后缩略图的高度（仅上传图片时有效）。

success：

类型：
回调函数
默认：
略
描述：
必填，用户选择文件后，点击“确认”按钮时的回调函数。
返回值：
success(ret)
max = 1，ret 为单个文件对象。
max > 1，ret 为文件对象列表（数组）。

文件筛选器

因为插件的文件是上传到七牛云，所以上传功能使用的是七牛官方封装过的 plupload 插件。

但是 plupload 的文件筛选器（filter）的原生参数是具体的文件类型，这种方式有时会限制使用，所以我们对其进行了优化。

我们根据使用场景，对所用到的文件类型抽象出 7 种大的分类，这 7 种文件分类是属于增加的功能，与原本的 plupload 筛选功能不冲突。

分类名称	说明	具体文件类型
all	全部文件	*
image	图片文件	jpg、jpeg、gif、png、bmp
office	文档文件	doc、docx、xls、xlsx、ppt、pptx、pdf、txt
audio	音频文件	mp3
video	视频文件	mp4、rmvb、rm、avi、mkv
pack	压缩文件	rar、zip、7z、iso、jar、gzip
other	其他文件	psd

filter 参数设置具体的分类后，plupload 将只允许用户上传此分类对应的具体文件类型，不在其中的文件将无法上传。

下面介绍几种用法。

原生用法

即直接传允许上传的具体文件类型。

赋值："png,doc,pdf,rar"。

效果：只允许上传 png、doc、pdf、rar 类型的文件。
上传所有类型的文件

赋值："all" 或是 "*"。
只允许上传图片

赋值："image"。

效果：只允许上传 jpg、jpeg、gif、png、bmp 类型的文件。
我要上传图片、音频、视频三种类型的文件

赋值："image,audio,video"。

效果：只允许上传 jpg、jpeg、gif、png、bmp、mp3、mp4、rmvb、rm、avi、mkv 类型的文件。
我要上传 mp4、gif、所有的压缩文件

赋值："pack,mp4,gif"。

效果：只允许上传 mp4、gif、rar、zip、7z、iso、jar、gzip 类型的文件。
有的文件不能上传怎么解决

因为分类只添加了常用的文件类型，这种情况肯定是有的。

临时方案：允许上传所有的文件，然后上传。

彻底方案：偷偷的告诉插件作者——立树大人，然后升级插件（不是在开玩笑，添加新的文件类型，是要做图标的）。

文件接口地址配置：

接口地址需在框架的全局配置中进行设置（config.qiniu、config.folder）。

插件预先定义的接口接收参数与接口返回数据格式，需要开发者遵从，否则插件无法正常运行。

具体配置接口：

bucket_url（七牛存储空间地址）
token_url（七牛令牌生成地址）
flash_url（插件 flash 地址，用于PC浏览器低版本，注意路径）

cate_list_url（分组列表）
file_add_url（上传文件）
file_list_url（文件列表）

hhFolderEditor

说明：项目文件管理插件，支持文件与分组的管理（增加、删除、修改）。

存储：文件存储由七牛提供技术支持。

版本：1.0.0

作者：立树（Eric）

特点：

1. 稳健快速：整个插件使用 Vue 进行开发，数据处理干净快速

2. 访问快速：分组初始化时加载该组所有文件，分页切换时，加快访问速度

3. 图片预览：图片文件点击后可以查看大图（fancybox）

4. 体验友好：两组皮肤样式、全新的文件图标等

依赖：

jQuery（第三方，底层支持）
vue（第三方，底层支持）
layer（第三方，提示插件）
laypage（第三方，分页插件）
fancybox（第三方，图片预览插件）
Ajax（1.2.0+）（后天堂插件，数据请求）
hhFile（后天堂插件，文件信息处理）

参数：

用法：hhFolderEditor(JSON);

elm：

类型：
字符串
默认：
空
描述：
必填，要渲染的标签（比如，".editor"、"#folder" 等）。

title：

类型：
字符串
默认：
"文件管理"
描述：
选填，面板标题。

skin：

类型：
字符串
默认：
"default"
取值：
"default"（拟物化）、"flat"（扁平化）
描述：
选填，插件样式。

height：

类型：
数字
默认：
484
描述：
选填，插件高度。
为了最佳的视觉体验（一屏显示），推荐开发者在调用时传入插件可用的高度。
假如页面只显示此插件，且页面上下边距为20，那么插件可用高度：$(window).height()-20*2。

max_size：

类型：
字符串
默认：
"10mb"
描述：
选填，文件上传时，单个文件的大小限制。
取值：
文件大小+单位（kb、mb、gb 等）。

prefix：

类型：
字符串
默认：
无
描述：
选填，文件前缀。
无前缀，http://www.xxxx.com/hello.jpg。
有前缀，http://www.xxxx.com/foo/hello.jpg。

文件接口地址配置：

接口地址需在框架的全局配置中进行设置（config.qiniu、config.folder）。

插件预先定义的接口接收参数与接口返回数据格式，需要开发者遵从，否则插件无法正常运行。

具体配置接口：

bucket_url（七牛存储空间地址）
token_url（七牛令牌生成地址）
flash_url（插件 flash 地址，用于PC浏览器低版本，注意路径）

cate_add_url（创建分组）
cate_del_url（删除分组）
cate_edit_url（修改分组名称）
cate_list_url（分组列表）
file_add_url（上传文件）
file_del_url（删除文件）
file_edit_url（修改文件分组）
file_list_url（文件列表）

后天堂框架：hhframe

Ajax

特点：

依赖：

单参数：

多参数：

示例代码：

Alert

参数：

示例代码：

Console

参数：

示例代码：

localdata

功能：

设置缓存：

读取缓存：

删除缓存：

更新缓存：

清空缓存：

hhRegex

功能：

邮箱验证

手机号验证

身份证验证

车牌号验证

hhArr

功能：

数组排序

数组打乱

hhObj

功能：

获取对象属性与方法的个数

hhStr

功能：

获取浏览器地址的参数

获取指定地址的参数

hhPanel

依赖：

功能：

信息弹窗

简单模式

复杂模式

确认弹窗

简单模式

复杂模式

输入弹窗

简单模式

复杂模式

消息弹窗

简单模式

复杂模式

加载提示框

进度条提示框

简单模式

复杂模式

微信提示面板

二维码展示面板

分享面板

上拉菜单面板

级联树面板

示例代码：

地址面板

选择地址

添加地址

修改地址

远程页面面板

简单模式

复杂模式

模态框

关闭面板

关闭全部面板

hhFolder

特点：

依赖：

参数：

文件筛选器

文件接口地址配置：

hhFolderEditor

特点：