Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
js.htm20KB
<#def title = "全局定义"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。"/>
<#def prevUrl = "../css/block.htm"/>
<#def nextUrl = "static.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "js", "js")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局JS定义", "全局定义")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">全局定义：</p>
<p class="z-color-333" style="text-indent:38px;">
凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。
</p>
</div>
<#-- 全局属性定义 -->
<div class="tutorial title">全局属性定义</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="30%">属性</td>
<td width="25%">值</td>
<td width="*">说明</td>
</tr>
<tr>
<td class="z-samp">Z.v</td>
<td class="z-samp">1.2.2</td>
<td>ZhiqimJS的基线版本号</td>
</tr>
<tr>
<td class="z-samp">Z.u</td>
<td class="z-samp">undefinded</td>
<td>undefinded的简写，如if (abc == Z.u)来判断是不是未定义</td>
</tr>
<tr>
<td class="z-samp">Z.d</td>
<td class="z-samp">document</td>
<td>document的简写</td>
</tr>
<tr>
<td class="z-samp">Z.n</td>
<td class="z-samp">navigator</td>
<td>navigator的简写</td>
</tr>
<tr>
<td class="z-samp">Z.l</td>
<td class="z-samp">location</td>
<td>location的简写</td>
</tr>
<tr>
<td class="z-samp">Z.ua</td>
<td class="z-samp">userAgent.toLowerCase()</td>
<td>userAgent的小写简写</td>
</tr>
</table>
<#-- 全局函数定义 -->
<div class="tutorial title">全局函数定义</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="30%">函数</td>
<td width="25%">说明</td>
<td width="15%">参数</td>
<td width="*">参数说明</td>
</tr>
<tr>
<td class="z-samp">Z.eval(expression)</td>
<td>执行表达式语句</td>
<td class="z-samp">expression</td>
<td>表达式字符串，如：var abc = "abc";</td>
</tr>
<tr>
<td rowspan="2" class="z-samp">Z.alert(text, callback)</td>
<td rowspan="2">弹出警告对话框</td>
<td class="z-samp">text</td>
<td>警告文本，链接暂不支持</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数，点击确定后回调</td>
</tr>
<tr>
<td rowspan="3" class="z-samp">Z.confirm(text, callback, param)</td>
<td rowspan="3">弹出询问对话框</td>
<td class="z-samp">text</td>
<td>询问文本，链接暂不支持</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数，点击确定后回调，点击取消不处理</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">param</td>
<td>设置参数，支持参数有{height: 50}</td>
</tr>
<tr>
<td rowspan="4" class="z-samp">Z.prompt(text, value, callback, param)</td>
<td rowspan="4">弹出修改对话框</td>
<td class="z-samp">text</td>
<td> 修改说明，链接暂不支持</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">value</td>
<td>修改的值</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数，点击确定后回调</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">param</td>
<td>设置参数</td>
</tr>
<tr>
<td rowspan="2" class="z-samp">Z.bind(f, $this)</td>
<td rowspan="2">返回一个新的函数，使得原函数this指向$this对象下执行</td>
<td class="z-samp">f</td>
<td>原函数</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">$this</td>
<td>指向$this对象</td>
</tr>
<tr>
<td rowspan="2" class="z-samp">Z.each(object, callback)</td>
<td rowspan="2">减化循环处理,默认this绑定到item上</td>
<td class="z-samp">object</td>
<td>对象</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数</td>
</tr>
<tr>
<td rowspan="3" class="z-samp">Z.eachof($this, object, callback)</td>
<td rowspan="3">减化循环处理，支持对字符串,数字,类数组和纯对象处理，=true表示中途退出循环，默认this绑定到传入的$this上，如果未传则绑定到item上<br>另外支持除$this,object,callback之外的参数也会出现在回调函数中</td>
<td class="z-samp">$this</td>
<td>回调函数指针</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">object</td>
<td>循环处理对象</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数</td>
</tr>
<tr>
<td class="z-samp">Z.clone(obj)</td>
<td>克隆一个新值</td>
<td class="z-samp">obj</td>
<td>对象</td>
</tr>
<tr>
<td class="z-samp">Z.onload(f)</td>
<td>初始化后加载</td>
<td class="z-samp">f</td>
<td>对象</td>
</tr>
<tr>
<td rowspan="2" class="z-samp">Z.random(length, type)</td>
<td rowspan="2">随机生成一定长度的字符或数字</td>
<td class="z-samp">length </td>
<td>长度</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">type</td>
<td>类型表名生成的随机字符串是字母数字(0或undefinde),数字(1),字母(2),大写字母(3),小写字母(4),大写字母和数字(5),小写字母和数字(6)</td>
</tr>
<tr>
<td rowspan="5" class="z-samp">Z.timer(speed, times, $this, process, complete)</td>
<td rowspan="5">定时任务</td>
<td class="z-samp">speed</td>
<td>速度，单位毫秒，如50</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">times</td>
<td>执行次数，-1表示一直运行</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">$this</td>
<td>回调函数时的this</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">process</td>
<td>运行时回调函数</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">complete</td>
<td>完成时回调函数</td>
</tr>
<tr>
<td rowspan="4" class="z-samp">Z.drag(elem, param, callback, $this)</td>
<td rowspan="4">拖拽或滑动</td>
<td class="z-samp">elem</td>
<td>属性</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">param</td>
<td>拖放参数，如果为字符串或node表示拖放对象</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">$this</td>
<td>回调函数时的this</td>
</tr>
<tr>
<td rowspan="5" class="z-samp">Z.dragInParent(elem, drag, parent, callback, $this)</td>
<td rowspan="5">拖拽或滑动</td>
<td class="z-samp">elem</td>
<td>属性</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">drag</td>
<td>拖放对象</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">parent</td>
<td>拖放对象的父对象</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">callback</td>
<td>回调函数</td>
</tr>
<tr>
<td class="z-samp zi-bd-l">$this</td>
<td>回调函数时的this</td>
</tr>
</table>
<#-- 全局正则表达式定义 -->
<div class="tutorial title">全局正则表达式定义（统一定义在Z.R中）</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr>
<td width="30%">正则表达式</td>
<td width="25%">说明</td>
<td width="*">值</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">空格</td>
</tr>
<tr>
<td class="z-samp">Z.R.SPACE</td>
<td>空格</td>
<td class="z-samp">/\s+/</td>
</tr>
<tr>
<td class="z-samp">Z.R.SPACE_LEFT</td>
<td>左空格</td>
<td class="z-samp">/^\s+/</td>
</tr>
<tr>
<td class="z-samp">Z.R.SPACE_RIGHT</td>
<td>右空格</td>
<td class="z-samp">/\s+$/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">数值型</td>
</tr>
<tr>
<td class="z-samp">Z.R.NUMERIC</td>
<td>数值型</td>
<td class="z-samp">/^\d+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.INTEGER</td>
<td>整数，支持正负数</td>
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.INTEGER_P</td>
<td>正整数</td>
<td class="z-samp">/^[1-9]\d*$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.INTEGER_N_N</td>
<td>非负整数</td>
<td class="z-samp">/^(0|[1-9]\d*)$/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">小数型</td>
</tr>
<tr>
<td class="z-samp">Z.R.FLOAT</td>
<td>浮点值，支持多位小数点</td>
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d+)?$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.FLOAT_N_N</td>
<td>非负浮点值，支持多位小数</td>
<td class="z-samp">/^(0|[1-9]\d*)(\.\d+)?$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.AMOUNT_2R</td>
<td>标准元金额，支持0-2位小数</td>
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d{1,2})?$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.AMOUNT_2R_FIXED</td>
<td>固定元金额，两位小数</td>
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d{2})$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.AMOUNT_N_N_2R</td>
<td>非负标准元金额，支持0-2位小数</td>
<td class="z-samp">/^(0|[1-9]\d*)(\.\d{1,2})?$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.AMOUNT_N_N_2R_FIXED</td>
<td>非负固定元金额，两位小数</td>
<td class="z-samp">/^(0|[1-9]\d*)(\.\d{2})$/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">字符相关</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHABAT</td>
<td>字母</td>
<td class="z-samp">/^[A-Za-z]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHABAT_UPPER</td>
<td>大写字母</td>
<td class="z-samp">/^[A-Z]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHABAT_LOWER</td>
<td>小写字母</td>
<td class="z-samp">/^[a-z]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHA_LOWER_NUMERIC</td>
<td>小写字母或数字</td>
<td class="z-samp">/^[a-z0-9]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHA_UPPER_NUMERIC</td>
<td>大写字母或数字</td>
<td class="z-samp">/^[A-Z0-9]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHA_NUMERIC</td>
<td>字母或数字</td>
<td class="z-samp">/^[A-Za-z0-9]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHA_NUMERIC_PA</td>
<td>大写小字母和数字，字母开头</td>
<td class="z-samp">/^[A-Za-z][A-Za-z0-9]*$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.ALPHABAT_DOUBLE</td>
<td>双字节</td>
<td class="z-samp">/^[^x00-xff]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.CHINESE</td>
<td>中文</td>
<td class="z-samp">/^[\u4e00-\u9fa5]+$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.CHINESE_ALPHA_NUMERIC</td>
<td>中文大小写字母和数字</td>
<td class="z-samp">/^[\u4e00-\u9fa5A-Za-z0-9]+$/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">日期相关</td>
</tr>
<tr>
<td class="z-samp">Z.R.DATE</td>
<td>日期</td>
<td class="z-samp">/^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.TIME</td>
<td>时间</td>
<td class="z-samp">/^([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.DATE_TIME</td>
<td>日期时间</td>
<td class="z-samp">/^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))\s(([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9]))$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.DATE_TIME_MATCH</td>
<td>日期时间简单匹配</td>
<td class="z-samp">/^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">HTML相关</td>
</tr>
<tr>
<td class="z-samp">Z.R.HTML</td>
<td>是否包含HTML</td>
<td class="z-samp">/<|&#?\w+;/</td>
</tr>
<tr>
<td class="z-samp">Z.R.HTML_XHTML_TAG</td>
<td>适配HTML成XHTML标记</td>
<td class="z-samp">/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig</td>
</tr>
<tr>
<td class="z-samp">Z.R.HTML_TAG_NAME</td>
<td>查找HTML标记名称</td>
<td class="z-samp">/<([\w:]+)/</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">其他</td>
</tr>
<tr>
<td class="z-samp">Z.R.ACCOUNT</td>
<td>账号,要求5-25位，中文大小写字母和数字和下划线、邮件符、点号，并且不能以@._开头和结尾</td>
<td class="z-samp">/^(?!(_|@|\.))(?!.*?(_|@|\.)$)[\w@\.\u4e00-\u9fa5]{5,25}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.PASSWORD</td>
<td>密码，要求6-16位，大小写字母和.@_#$!~%符号</td>
<td class="z-samp">/^[\w@\.#$!~%]{6,16}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.MOBILE</td>
<td>手机号，支持+86</td>
<td class="z-samp">/^((\+86)|(86)|)?(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|170|18[0|1|2|3|5|6|7|8|9])\d{8}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.MOBILE11</td>
<td>11位手机号</td>
<td class="z-samp">/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|170|18[0|1|2|3|5|6|7|8|9])\d{8}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.IP</td>
<td>IP地址</td>
<td class="z-samp">/^((?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.MAC</td>
<td>MAC地址</td>
<td class="z-samp">/^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.QQ</td>
<td>QQ号</td>
<td class="z-samp">/^[1-9]\d{4,10}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.POSTAL_CODE</td>
<td>邮政编码</td>
<td class="z-samp">/^[1-9]\d{5}$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.EMAIL</td>
<td>邮箱</td>
<td class="z-samp">/^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/</td>
</tr>
<tr>
<td class="z-samp">Z.R.IDCARD</td>
<td>身份证号</td>
<td class="z-samp">/^(\d{6})((((19|20)[0-9]{2})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))(\d{3}[0-9xX*])$/</td>
</tr>
</table>
<#-- 全局类定义 -->
<div class="tutorial title">全局类定义（由Z.Class.newInstance()派生的函数称为类）</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr>
<td width="15%">属性/方法</td>
<td width="30%">属性/方法说明</td>
<td width="*">举例</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">默认属性和方法</td>
</tr>
<tr>
<td class="z-samp">immediate</td>
<td>是否立即执行，默认false</td>
<td>在构造函数中设置，如var draggable = new Draggable({immediate:true});</td>
</tr>
<tr>
<td class="z-samp">set</td>
<td>设置属性</td>
<td class="z-samp">draggable.set(key, value);</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">派出的类可定义的属性</td>
</tr>
<tr>
<td class="z-samp">defaults</td>
<td>缺省字段表</td>
<td class="z-samp">defaults = {elem:null, id="123456"},</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">派出的类可定义的方法</td>
</tr>
<tr>
<td class="z-samp">init</td>
<td>初始化函数，无参数</td>
<td class="z-samp">init(){},</td>
</tr>
<tr>
<td class="z-samp">execute</td>
<td>执行函数，无参数</td>
<td class="z-samp">execute(){},</td>
</tr>
</table>
<table class="z-table z-pd10 z-lh200p z-mg-t20">
<tr>
<td class="zi-px18">一、哈唏表类（Z.HashMap）：</td>
</tr>
</table>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr>
<td width="15%">属性/方法</td>
<td width="30%">属性/方法说明</td>
<td width="*">举例</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">构造函数</td>
</tr>
<tr>
<td class="z-samp">new</td>
<td>构造函数</td>
<td class="z-samp">var aMap = new Z.HashMap();</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">方法</td>
</tr>
<tr>
<td class="z-samp">put</td>
<td>设置值</td>
<td class="z-samp">aMap.put("abc", "ABC");</td>
</tr>
<tr>
<td class="z-samp">get</td>
<td>获取值</td>
<td class="z-samp">var value = aMap.get("abc");</td>
</tr>
<tr>
<td class="z-samp">remove</td>
<td>删除值</td>
<td class="z-samp">aMap.remove("abc");</td>
</tr>
<tr>
<td class="z-samp">clear</td>
<td>清空表</td>
<td class="z-samp">aMap.clear();</td>
</tr>
<tr>
<td class="z-samp">size</td>
<td>获取表大小</td>
<td class="z-samp">var size = aMap.size();</td>
</tr>
<tr>
<td class="z-samp">isEmpty</td>
<td>判断是否为空</td>
<td class="z-samp">var isEmpty = aMap.isEmpty();</td>
</tr>
<tr>
<td class="z-samp">containKey</td>
<td>判断KEY中是否包含值</td>
<td class="z-samp">var containKey = aMap.containKey("abc");</td>
</tr>
<tr>
<td class="z-samp">containValue</td>
<td>判断VALUE中是否包含值</td>
<td class="z-samp">var containValue = aMap.containValue("ABC");</td>
</tr>
<tr>
<td class="z-samp">keySet</td>
<td>获取KEY数组</td>
<td class="z-samp">var keys = aMap.keySet();</td>
</tr>
<tr>
<td class="z-samp">values</td>
<td>获取VALUE数组</td>
<td class="z-samp">var values = aMap.values();</td>
</tr>
</table>
<table class="z-table z-pd10 z-lh200p z-mg-t20">
<tr>
<td class="zi-px18">二、可拖动类（Z.Draggable）：</td>
</tr>
</table>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr>
<td width="15%">属性/函数</td>
<td width="30%">属性/方法说明</td>
<td width="*">举例</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">构造函数</td>
</tr>
<tr>
<td class="z-samp">new</td>
<td>构造函数</td>
<td class="z-samp">var draggable = new Z.Draggable();</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">属性</td>
</tr>
<tr>
<td class="z-samp">elem</td>
<td>拖拽对象</td>
<td class="z-samp">draggable.elem = Z.D.id("drag");</td>
</tr>
<tr>
<td class="z-samp">drag</td>
<td>拖拽手把</td>
<td class="z-samp">draggable.drag = Z.D.id("drag");</td>
</tr>
<tr>
<td class="z-samp">param</td>
<td>拖拽参数（支持left,top,right,bottom,width,height其中right,bottom时width,height无效）</td>
<td class="z-samp">draggable.param = {left:0,top:0,width:500;height:300};</td>
</tr>
<tr>
<td class="z-samp">cursor</td>
<td>拖拽手势，默认move</td>
<td class="z-samp">draggable.cursor = "move";</td>
</tr>
<tr>
<td class="z-samp">callback</td>
<td>拖拽回调函数</td>
<td class="z-samp">draggable.callback(){};</td>
</tr>
<tr>
<td class="z-samp">callthis</td>
<td>拖拽回调函数this指针</td>
<td class="z-samp">draggable.callthis = $this;</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="3">函数</td>
</tr>
<tr>
<td class="z-samp">execute</td>
<td>执行拖拽</td>
<td class="z-samp">draggable.execute();</td>
</tr>
<tr>
<td class="z-samp">close</td>
<td>关闭拖拽</td>
<td class="z-samp">draggable.close();</td>
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}