first commit
这个提交包含在：
@@ -0,0 +1,191 @@
|
||||
<#def title = "文件上传"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
|
||||
<#def prevUrl = "zeditor.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
${Scripts.src(context.getRootPath("/src/qrcode/qrcode.js"))}
|
||||
${Scripts.src(context.getRootPath("/src/qrcode/zhiqim_qrcode.js"))}
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "tool", "qrcode")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "生成二维码")}
|
||||
|
||||
<!-- 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 将字符串转成二维码图形输出，支持方法定义、实例定义两种。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、调用方法的方式 -->
|
||||
<div class="tutorial title">一、调用方法的方式</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z("#ZQrcodeTrigger").on("click",function(){
|
||||
var urlString = Z("#ZQrcodeUrl").val();
|
||||
|
||||
//调用方法的方式一
|
||||
Z("#ZQrcodeCompleted").qrcode(urlString);
|
||||
|
||||
/*调用方法的方式二
|
||||
Z("#ZQrcodeCompleted").qrcode({
|
||||
text: "urlString", // 需转换成二维码的字符串
|
||||
render: "canvas", // 实现方式，可选："canvas"、"table"，默认为 "canvas"
|
||||
width: 256, // 二维码的宽度，默认为 256
|
||||
height: 256, // 二维码的高度，默认为 256
|
||||
typeNumber: -1, // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
|
||||
correctLevel: 2, // 取值范围[0-3]，4种计算方式，默认为2
|
||||
background: "#ffffff", // 背景色，默认为 "#ffffff"
|
||||
foreground: "#000000" // 二维码颜色，默认为 "#000000"
|
||||
});
|
||||
*/
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- 自定义 url -->
|
||||
<input id="ZQrcodeUrl" type="text" class="z-input z-blue" value=""/>
|
||||
<!-- 触发按钮 -->
|
||||
<button id="ZQrcodeTrigger" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
|
||||
|
||||
<!-- 生成二维码图片区域 -->
|
||||
<span id="ZQrcodeCompleted"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、text 参数必须传入非空值，只有字符串一个参数时，无需详细写明，如方式一<br>
|
||||
2、这种方法不需要传入 elem 参数<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、定义实例的方式 -->
|
||||
<div class="tutorial title">二、定义实例的方式</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z("#ZQrcodeTrigger2").on("click",function(){
|
||||
var urlString = Z("#ZQrcodeUrl2").val();
|
||||
|
||||
//定义实例的方式
|
||||
var newQrcode = new Z.Qrcode();
|
||||
newQrcode.elem= Z("#ZQrcodeCompleted2"); // 呈现二维码的地方
|
||||
newQrcode.text= urlString; // 需转换的字符串
|
||||
newQrcode.render= "canvas"; // 实现方式，可选："canvas"、"table"，默认为 "canvas"
|
||||
newQrcode.width= 256; // 二维码的宽度，默认为 256
|
||||
newQrcode.height= 256; // 二维码的高度，默认为 256
|
||||
newQrcode.typeNumber= 0; // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
|
||||
newQrcode.correctLevel= 2; // 取值范围[0-3]，4种计算方式，默认为2
|
||||
newQrcode.background= "#ffffff"; // 背景色，默认为 "#ffffff"
|
||||
newQrcode.foreground= "#000000" // 二维码颜色，默认为 "#000000"
|
||||
newQrcode.execute();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- 自定义 url -->
|
||||
<input id="ZQrcodeUrl2" type="text" class="z-input z-blue" value=""/>
|
||||
<!-- 触发按钮 -->
|
||||
<button id="ZQrcodeTrigger2" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
|
||||
|
||||
<!-- 生成二维码图片区域 -->
|
||||
<span id="ZQrcodeCompleted2"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、text 参数必须传入非空值<br>
|
||||
2、实例方式清晰明了，必须传入 elem 的值<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</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()}
|
||||
在新工单中引用
屏蔽一个用户