Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
imageClipper.htm2KB
<#def title = "头像裁剪"/>
<#def keyword = "Avatar"/>
<#def desc = "头像裁剪是指对上传的图片,根据要求裁剪成指定大小的图片。支持放大和缩小图片,和通过移动图片,锁定裁剪位置"/>
<#def prevUrl = "drag.htm"/>
<#def nextUrl = "upload.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav("document")}
${Scripts.src("//zhiqim-org.oss-cn-shenzhen.aliyuncs.com/ztmpl/zhiqim_manager/zhiqim_image_clipper.js")}
<script>
Z.onload(function()
{
var clipper = new Z.ImageClipper();
clipper.elem = "clipper";
clipper.img = "//zhiqim-org.oss-cn-shenzhen.aliyuncs.com/ztmpl/zhiqim_manager/zhiqim_image_clipper_default.jpg";
clipper.save = function()
{
Z.alert("在这里编写调用后台代码");
};
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>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "tool", "imageClipper")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "头像裁剪")}
<div class="content">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
<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>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}