hhframe_后天堂框架

Ajax
Alert
Console
localdata
hhRegex
hhArr
hhObj
hhStr
hhPanel
hhQrcodeScan
Gpush
imgupload

DC（DCloud）自带的模块不是很好用，所以我们封装了这些模块插件。

Ajax

Ajax 是我们对 DCloud XMLHttpRequest 深度封装的网络数据请求插件。

特点：

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

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

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

配置：

var config = { host: "http://www.domain.com/api/" };

这一坨是什么鬼？？？！！！！

是这样的，Ajax 是 hhframe 框架的一部分，config 是 hhframe 的全局配置，这个 host 只是其中一项，因为在一个项目中，Ajax 所请求的接口基本上都是一个域名，而且很大程度上也会有一部分相同的前缀（比如上面的 /api/），所以将这部分写入全局配置有两个好处：

1. 修改一处，全局生效，这在开发环境和生产环境切换时非常便捷。

2. 节省代码，每次调用插件时，只需要填写具体的接口名称即可，用的多了会有点卵用。

依赖：

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

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

单参数：

用法：Ajax(JSON);

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

url：

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

data：

类型：
JSON 对象 / url 地址查询字符串（"site=houheaven&author=Eric"）
默认：
无
描述：
选填，POST 数据。
插件的贴心担当，此参数不为空时，请求的类型是 POST，反之则是 GET，所以就不用单独设置请求的类型了，少写一个参数，贴不贴心。还有一点，插件的 Content-Type 默认是 "application/x-www-form-urlencoded;charset=utf-8"，就算传的参数是 JSON 对象，插件在最后发送的时候也会将其转换成 url 地址查询的字符串形式。

loader：

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

loaderAbort：

类型：
布尔值
默认：
true
描述：
选填，加载提示框能否被关闭（关闭时会自动取消 Ajax 请求）。
这个参数与“安卓的返回键”、“苹果的侧滑返回”进行了绑定。
在安卓机上，当其为 true 时，用户按下返回键后，加载提示框会被关闭，同时取消 Ajax 请求，反之，页面无响应。
在苹果机上，当其为 true 时，用户侧滑关闭页面后，加载提示框会被关闭，同时取消 Ajax 请求，反之，页面无响应。

console：

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

success：

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

failed：

类型：
回调函数
默认：
略
描述：
选填，Ajax 请求失败（发生错误）之后执行，默认弹出一个提示“网络异常，是否重新加载？”的对话框。
返回值：
failed(ret)
格式：{ "code": Number, "descp": 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，此参数不为空时，请求的类型是 POST，反之则是 GET，所以就不用单独设置请求的类型了，少写一个参数，贴不贴心。还有一点，插件的 Content-Type 默认是 "application/x-www-form-urlencoded;charset=utf-8"，就算传的参数是 JSON 对象，插件在最后发送的时候也会将其转换成 url 地址查询的字符串形式。

success：

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

failed：

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

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

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

技术贴：

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

2. XMLHttpRequest 发送 post 请求，php 接收不到数据的解决方案

3. Ajax 发送 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();

hhQrcodeScan

说明：扫码插件（二维码/条形码）。

版本：1.0.0

作者：立树（Eric）

参数：

用法：hhQrcodeScan( success )

success：

类型：
回调函数
默认：
无
描述：
必填

返回值：

type：

类型：
字符串
范围：
Qrcode（二维码）、EAN13（13位条形码）、EAN8（8位条形码）
说明：
扫码类型。

descp：

类型：
字符串
说明：
扫码类型的说明（对应 type 括号内容）。

data：

类型：
混合类型（字符串、数字、数组、对象、布尔等）
说明：
扫码数据。

// 示例代码
hhQrcodeScan(function(ret){
	Console(ret.type);     // Qrcode
	Console(ret.descp);    // 二维码
	Console(ret.data);     // www.houheaven.com
});

Gpush

Gpush（Getui Push）："个推推送插件"。

个推推送真的很不错，普通推送就不谈了，它的亮点在于它能够发送“透传推送”，用户 APP 不在线也能收到信息，苹果完全没问题，可惜的是部分安卓手机无法实现此效果（手机厂商为了省电之类的原因，用户关闭 APP 后，个推后台接收进程也被关闭了）。

但是个推也仅仅是不错，因为他们官方文档堪称简陋（苹果 APN 透传推送参数完全忽略），在开发这个插件的过程中，使用了五台设备（苹果 6、锤子 T2、小米 3、雷电模拟器、海马玩模拟器）反复推送测试，爬坑无数，心酸无比。

个推的特点：

1. 功能强大：支持普通推送、透传推送、链接推送、下载推送。

2. 透传推送免费：用过 AC 的极光推送模块，他们的透传推送是要收费的，DC 没用过极光。

三种推送模式：

这三种模式的名词都是我们内部交流时使用的，为了更好的了解本插件，先解释下。

外推（外部推送）

简单的说，就是我们能够看到的推送。

比如，通知栏的推送列表，比如，苹果的临时横幅，我都称之为“外推”。
内推（内部推送）

这种推送是隐藏性质的，它们不会出现在手机的通知栏或横幅，它们适用于这种场景：

①. APP 在前台时，收到推送时，会出现一个对话框来询问用户是否跳转。

②. 完全不提示用户，比如，用户账号在其他手机登录，APP 接收到推送时，强制用户退出。
智推（智能推送）

APP 在前台时，发送内推。

APP 在后台或者关闭时，发送外推。

依赖：

个推推送自身就需要前端与后台的高度配合，此插件也是如此。

我们定义了特定的推送消息数据格式，此插件与后台进行对接时需要这套数据格式，不然无法正常运行。

参数：

插件的唯一参数是一个回调函数。

收到推送事件（Receive）、推送点击事件（Click）已被内置在插件中，当这两个事件被触发时，插件会先已处理好推送逻辑，然后将推送的数据进行格式化，然后会触发这个回调函数，并将格式化的消息返回，以供开发者处理业务逻辑。

格式化的推送消息：

title 消息标题
descp 消息内容
event 事件名称（开发者根据此参数决定执行业务逻辑）
data 推送数据（服务器返回的业务数据）

示例代码：

// 个推推送
Gpush(function(notice){
	switch(notice.event)
	{
		case "warning":
			// 弹出警告内容
			alert(notice.descp);
			break;
		case "logout":
			// 执行强制用户退出的程序
			UserLogout();
			break;
	}
});

imgupload

七牛图片上传。

七牛是一个异常彪悍、异常好用的平台，以至于从上世纪80年代我就开始用了（开个玩笑）。

插件特点：

智能裁剪：下方有详解。
多图上传：借助 DC 的 uploader 功能，插件能够实现一次选择多张图片上传，减少用户操作。
令牌失效处理：令牌失效后，插件会自动处理更新令牌，正在上传的图片也不会被中断，达到无缝衔接。
多种上传模式：图片来源（摄像头、相册）菜单选择、相册直接选择、不选择直接上传指定图片等。

智能裁剪：

这是插件的核心功能之一。

图片裁剪是七牛平台提供的一个重要功能，本身就已经很强大了。

在七牛图片裁剪的原生能力基础上，又做了算法优化，能保证缩略图与设置预期相符。

我们主要用的是 imageView2/1/ 这种裁剪模式，因为它比较符合项目需求，但是这个裁剪功能有个小缺点，它只能在大尺寸图片上裁剪，才能得到小尺寸的缩略图。

先看这组数据：

大尺寸图片裁剪

原图效果	原图尺寸	裁剪尺寸	缩略图尺寸	缩略图比例	最终效果
横图	1000x750	500x500	500x500	1：1	正常
竖图	600x800	500x500	500x500	1：1	正常
正方形图	750x750	500x500	500x500	1：1	正常

这组数据的意思是，将不同尺寸的大图裁剪成 500x500 的正方形缩略图。

虽然我们的规划是好的，但是用户选的图片往往是难以把控的，如果他选择的图片尺寸不足 500x500 呢？

再看这组数据：

小尺寸图片裁剪

原图效果	原图尺寸	裁剪尺寸	缩略图尺寸	缩略图比例	最终效果
横图	600x400	500x500	500x400	5：4	异常
横图	400x300	500x500	400x300	4：3	异常
竖图	150x250	500x500	150x250	3：5	异常
正方形图	100x100	500x500	100x100	1：1	正常

当图片的尺寸小于（或者部分小于）裁剪尺寸时，缩略图比例紊乱，这时候就无法达到我们的预期了。

我们裁剪图片获取缩略图的目的是什么，大部分的需求是要获取一张跟缩略图尺寸比例相同的，或者一组比例相同的图片，便于页面布局。

所以，我们认为，保证缩略图图片比例的重要性 要远高于 保证缩略图最终尺寸的重要性。

所以，我们做了大量的实验，涵盖了各种尺寸、各种情况，最终在插件内部嵌入了图片裁剪算法，来解决这个问题。

下面是经过裁剪算法得到的数据：

图片智能裁剪

原图效果	原图尺寸	裁剪尺寸	缩略图尺寸	缩略图比例	最终效果
横图	1000x750	500x500	500x500	1：1	正常
竖图	600x800	500x500	500x500	1：1	正常
正方形图	750x750	500x500	500x500	1：1	正常
横图	600x400	500x500	400x400	1：1	正常
横图	400x300	500x500	300x300	1：1	正常
竖图	150x250	500x500	150x150	1：1	正常
正方形图	100x100	500x500	100x100	1：1	正常

参数：

用法：imgupload(JSON);

source：

类型：
字符串
默认：
无
描述：
选填，图片来源。
"camera"：APP 直接打开摄像头，拍摄后上传。
"album"：APP 直接打开本地相册，用户选择图片后上传。
空值或其他，APP 会弹出图片来源提示菜单（摄像头、本地相册），供用户选择。

file：

类型：
字符串
默认：
空
描述：
选填，图片路径。
设置有效的图片路径后，插件会将其直接上传，此时 source 参数会失效。

prefix：

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

thumb_w：

类型：
数字
默认：
200
描述：
选填，图片上传后缩略图的宽度。

thumb_h：

类型：
数字
默认：
200
描述：
选填，图片上传后缩略图的高度。

multi：

类型：
布尔值
默认：
false
描述：
选填，是否开启多张图片上传。

multi_num：

类型：
数字
默认：
9
描述：
选填，一次最多选择的图片数量，当 multi = ture 时有效。

qn_token：

类型：
字符串
默认：
全局配置（config）中的 qn_token
描述：
选填，七牛图片上传令牌的获取地址。
插件初始化时，会取全局配置（config）中的 qn_token 作为默认值，如果设置了此参数，将会覆盖掉默认值。
返回格式：{"uptoken":"xxxxxx","expire":"3600000"}。

qn_server：

类型：
字符串
默认：
全局配置（config）中的 qn_server
描述：
选填，七牛存储空间地址，用来显示图片。
插件初始化时，会取全局配置（config）中的 qn_server 作为默认值，如果设置了此参数，将会覆盖掉默认值。
比如，将 hello.jpg 上传到七牛空间（bucket），图片地址是 http://www.xxxx.com/hello.jpg，那么，qn_server 就要设置为 "http://www.xxxx.com/"。

success：

类型：
回调函数
默认：
无
描述：
选填，当单张图片上传完成之后就会触发（单图触发一次，多图触发多次）。
返回值：
success(image,thumb,infos)
image：原图地址
thumb：缩略图地址
infos：原图信息（图片名称、大小、宽度、高度、Mime 类型）

complete：

类型：
回调函数
默认：
无
描述：
选填，当所有图片上传完成之后才会触发（单图、多图都会触发）。
返回值：
complete(array)
单图：[{image:"原图地址",thumb:"缩略图地址",infos:"原图信息"}]
多图：[{image:"原图地址",thumb:"缩略图地址",infos:"原图信息"},{image:"原图地址",thumb:"缩略图地址",infos:"原图信息"}]

示例代码

// 默认模式，从摄像头、相册上传单张图片，获取 200x200 尺寸的缩略图
imgupload({
	success: function(img,thumb){
		console.log(img);    // http://www.xxx.com/hello.jpg
		console.log(thumb);  // http://www.xxx.com/hello.jpg?imageView2/1/w/200/h/200
	}
});

// 从相册上传单张图片，获取有前缀的 500x250 尺寸的缩略图
imgupload({
	source: "album",
	prefix: "avatar/",
	thumb_w: 500,
	thumb_h: 250,
	success: function(img,thumb){
		console.log(img);    // http://www.xxx.com/avatar/hello.jpg
		console.log(thumb);  // http://www.xxx.com/avatar/hello.jpg?imageView2/1/w/500/h/250
	}
});

// 从相册上传多张图片，全部图片上传完毕后统一处理
imgupload({
	source: "album",
	multi: true,
	success: function(img,thumb){
		console.log(img);    // http://www.xxx.com/hello.jpg
		console.log(thumb);  // http://www.xxx.com/hello.jpg?imageView2/1/w/200/h/200
	},
	complete: function(imgs){
		// 全部图片上传完毕，统一处理
	}
});

后天堂框架：hhframe

Ajax

特点：

配置：

依赖：

单参数：

多参数：

示例代码：

Alert

参数：

示例代码：

Console

参数：

示例代码：

localdata

功能：

设置缓存：

读取缓存：

删除缓存：

更新缓存：

清空缓存：

hhRegex

功能：

邮箱验证

手机号验证

身份证验证

车牌号验证

hhArr

功能：

数组排序

数组打乱

hhObj

功能：

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

hhStr

功能：

获取浏览器地址的参数

获取指定地址的参数

hhPanel

依赖：

功能：

信息弹窗

简单模式

复杂模式

确认弹窗

简单模式

复杂模式

输入弹窗

简单模式

复杂模式

消息弹窗

简单模式

复杂模式

加载提示框

进度条提示框

简单模式

复杂模式

微信提示面板

二维码展示面板

分享面板

上拉菜单面板

级联树面板

示例代码：

地址面板

选择地址

添加地址

修改地址

远程页面面板

简单模式

复杂模式

模态框

关闭面板

关闭全部面板

hhQrcodeScan

参数：

返回值：

Gpush

个推的特点：

三种推送模式：

依赖：