first commit

zhiqim_ui/document/tutorial/uim/tool/imageClipper.htm

@@ -0,0 +1,113 @@
+<#def title = "头像裁剪"/>
+<#def keyword = "Avatar"/>
+<#def desc = "头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置"/>
+<#def prevUrl = "ajax.htm"/>
+<#def nextUrl = "upload.htm"/>
+${zhiqim_com_head()}
+${zhiqim_com_head_main()}
+${Scripts.src("/zinc/www/zhiqim_image_clipper.js")}
+<script>
+Z.onload(function()
+{
+    var clipper = new Z.ImageClipper();
+    clipper.tigger = "clipper";
+    clipper.img = "/zinc/www/default.jpg";
+    clipper.execute();
+});
+
+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>
+${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", "tool", "imageClipper")}
+
+<!--主体-->
+<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;">
+        头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置
+    </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="min-height:250px;">
+    <!-- 初始化头像裁切控件 -->
+    <div id="clipper" style="margin-left:50px;margin-top:10px;width:620px;height:460px;"></div>
+</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、拖拽三要求，可拖拽对象、拖把和拖拽父范围，这三个对象都需要设置id<br>
+    2、简单拖拽只需要配置可拖拽对象、拖把两个id，简单拖拽不固定范围<br>
+</div>
+</section>
+</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()}