first commit
这个提交包含在：
@@ -0,0 +1,728 @@
|
||||
<#def title = "AJAX"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
|
||||
<#def prevUrl = "flexcopy.htm"/>
|
||||
<#def nextUrl = "drag.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "ajax")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "Ajax")}
|
||||
<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">AJAX：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
|
||||
知启蒙AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
|
||||
</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSuccess()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestSuccess");
|
||||
ajax.setFailureAlert();
|
||||
ajax.setSuccess(function(){
|
||||
Z.alert(this.responseText);
|
||||
});
|
||||
ajax.setLoading(document, true);
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、调用成功，回调函数（带参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">二、调用成功，回调函数（带参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestParam()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestParam");
|
||||
ajax.addParam("111111");
|
||||
ajax.addParam("222222");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.addParam();设置参数，参数个数和类型要和后端对应，支持字符串和基本类型
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、调用成功，显示到元素中（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">三、调用成功，显示到元素中（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSuccess2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestSuccess");
|
||||
ajax.setCallback("successId");
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
|
||||
<!-- 编写AJAX的响应结果 -->
|
||||
返回内容：<span id="successId"></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、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||||
2、在页面上设置点击执行函数，把结果放置到Z("#"+id)中<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">四、调用成功，加载器，后端等待8秒（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||||
});
|
||||
ajax.setLoading(document, true);
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩，然后执行<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">五、调用成功，指定加载器元素，后端等待8秒（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback("testLoading2");
|
||||
ajax.setLoading("testLoading2");
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
|
||||
|
||||
<!-- 指定加载器的位置 -->
|
||||
<div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩，然后执行<br>
|
||||
3、如果需要遮罩层，设置为ajax.setLoading("testLoading2", true);
|
||||
4、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">六、调用成功，自定义加载器，后端等待8秒（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading3()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback("testLoading3");
|
||||
ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
|
||||
|
||||
<!-- 指定加载器的位置 -->
|
||||
<div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过Z.loading()函数自定义加载器，然后通过ajax.setLoading();设置到Z.Ajax中<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 七、调用失败（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">七、调用失败（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestError()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestError");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestError();">点我执行[doTestError]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 八、调用异常（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">八、调用异常（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestException()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestException");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestException();">点我执行[doTestException]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestInterceptor()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
3、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax1")
|
||||
public static void doTestInterceptor(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax1")
|
||||
public class AjaxChk1Interceptor implements Interceptor
|
||||
{
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setResponseError("拦截器不通过");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十、拦截器，未通过显示未通过信息（同步调用、无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十、拦截器（同步调用、无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSyncInterceptor()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setSync();
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.execute();
|
||||
|
||||
Z.alert("状态："+ajax.responseStatus+"\r\n信息："+ajax.responseText);
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
4、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax1")
|
||||
public static void doTestInterceptor(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax1")
|
||||
public class AjaxChk1Interceptor implements Interceptor
|
||||
{
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setResponseError("拦截器不通过");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestInterceptor2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
3、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax2")
|
||||
public static void doTestInterceptor2(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax2")
|
||||
public class AjaxChk2Interceptor implements Interceptor
|
||||
{
|
||||
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias）</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">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSyncInterceptor2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setSync();
|
||||
ajax.setClassName("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.execute();
|
||||
|
||||
alert("状态:"+ajax.responseStatus+"\r\n信息:"+ajax.responseText);
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
|
||||
</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、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
4、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkTutorialRedirect")
|
||||
public static void doTestInterceptor2(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkTutorialRedirect")
|
||||
public class AjaxChk2Interceptor implements Interceptor
|
||||
{
|
||||
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- AJAX调用参数说明 -->
|
||||
<div class="tutorial title">AJAX调用参数说明（请求参数十个，响应结果两个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">请求参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">contextPath</td>
|
||||
<td>默认为空</td>
|
||||
<td>当前上下文环境路径，如/admin，默认为空表示根上下文路径</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>必须</td>
|
||||
<td>调用的类名或类别名，如ZuiPresenter/com.zhiqim.document.tutorial.ui.ZuiPresenter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">methodName</td>
|
||||
<td>必须</td>
|
||||
<td>调用的类的方法名，如doTestInterceptor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">async</td>
|
||||
<td>true</td>
|
||||
<td>异常还是同步调用，默认异步，true|false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">params</td>
|
||||
<td>[]</td>
|
||||
<td>参数数组，可通过addParam();函数设置参数，如addParam("abc");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>null</td>
|
||||
<td>回调函数或回调elem的id<br>
|
||||
1、函数的this为Z.Ajax对象，可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
|
||||
2、回调ID时，填写elem的id，即把this.responseText的值填充到elem中，有三种填充方式，见callbackMethod参数
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callbackMethod</td>
|
||||
<td>"html"</td>
|
||||
<td>回调ID时的方法，三种"html"|"text"|"val"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callScript</td>
|
||||
<td>true</td>
|
||||
<td>是否在AJAX结果的改变重置由data-role的缓存，如Z.Tooltip,Z.Select等，true|false，默认true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">loading</td>
|
||||
<td>null</td>
|
||||
<td>三种加载器，通过方法setLoading();方法来设置<br>
|
||||
1、传入Z.loading对象，参数由对象指定，如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||||
2、传入target和是否遮罩，如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
|
||||
3、传入targetId和是否遮罩，如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
|
||||
4、传入一个函数，在加载时回调该函数，如ajax.setLoading(function(){});此方式用于自定义操作
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">loadingParam</td>
|
||||
<td>null</td>
|
||||
<td>加载器参数，通过方法setLoading();方法来设置，是第二个参数<br>
|
||||
1、当loading是Z.loading和字符串时表示是否遮罩<br>
|
||||
2、当#ID时指定的HTML，成功后换回原始HTML
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">响应参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">responseStatus</td>
|
||||
<td>0</td>
|
||||
<td>响应状态，0表示成功，601－603表示跳转，其他表示错误</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">responseText</td>
|
||||
<td>null</td>
|
||||
<td>响应文本字符串，默认是text/plain格式，XML或JSON格式自行转化</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,83 @@
|
||||
<#def title = "复制功能"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "由于各浏览器剪贴板功能不一致，功能使用复杂，因此知启蒙是利用Flash的sprite容器制作的剪贴板功能，以达到跨浏览器支持对文本的复制功能。"/>
|
||||
<#def prevUrl = "../nav/dropdown.htm"/>
|
||||
<#def nextUrl = "ajax.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<script>
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
var ind = html.indexOf("<div");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind);
|
||||
}
|
||||
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "copy")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
在ZhiqimUI中，提供Z.copy(value);方法用于复制内容，该方法需要浏览器的支持HTML5，当前主流浏览器都支持
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、HTML5复制模式 -->
|
||||
<div class="tutorial title">HTML5复制模式</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">
|
||||
<!-- 复制按钮 -->
|
||||
<button class="z-button z-cyan z-w200" onclick="Z.copy(Z('#copy_content').val());Z.tips('复制成功');">点我复制下面文本框中的内容</button>
|
||||
<br><br>
|
||||
<!-- 复制内容 -->
|
||||
<textarea id="copy_content" class="z-textarea z-w200">默认简单模式H5</textarea>
|
||||
</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、定义一个button，编写onclick方法，方法内调用Z.copy函数即可<br>
|
||||
2、调用完成后，还可以使用Z.tips函数显示一下复制成功信息
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,281 @@
|
||||
<#def title = "拖拽与缩放"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。"/>
|
||||
<#def prevUrl = "ajax.htm"/>
|
||||
<#def nextUrl = "imageClipper.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "drag")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
<!-- 初始化拖拽控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z.drag("drag_simple", "drag_simple_bar");
|
||||
});
|
||||
|
||||
function doResize(obj)
|
||||
{
|
||||
if (Z(obj).text() == "收起")
|
||||
{
|
||||
Z(obj).text("展开");
|
||||
Z("#drag_simple").css("height", "42px");
|
||||
Z("#drag_simple_List").css("visibility", "hidden");
|
||||
}
|
||||
else
|
||||
{
|
||||
Z(obj).text("收起");
|
||||
Z("#drag_simple").css("height", "200px");
|
||||
Z("#drag_simple_List").css("visibility", "visible");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 可拖拽对象和拖把 -->
|
||||
<div id="drag_simple" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;z-index:99999;">
|
||||
<div id="drag_simple_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
|
||||
<div class="z-float-left z-h40 z-lh40 z-pd-l10">全屏(z-index范围)拖拽（可拖动）</div>
|
||||
<div class="z-float-right z-mg6"><button class="z-button" onclick="doResize(this);">收起</button></div>
|
||||
</div>
|
||||
<div id="drag_simple_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
|
||||
</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>
|
||||
|
||||
<#-- 二、拖拽范围 -->
|
||||
<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" id="drag_range_parent" style="min-height:250px;">
|
||||
<!-- 初始化拖拽控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z.dragInParent("drag_range", "drag_range_bar", "drag_range_parent");
|
||||
});
|
||||
|
||||
function doResizeInParent(obj)
|
||||
{
|
||||
if (Z(obj).text() == "收起")
|
||||
{
|
||||
Z(obj).text("展开");
|
||||
Z("#drag_range").css("height", "42px");
|
||||
Z("#drag_range_List").css("visibility", "hidden");
|
||||
}
|
||||
else
|
||||
{
|
||||
Z(obj).text("收起");
|
||||
Z("#drag_range").css("height", "200px");
|
||||
Z("#drag_range_List").css("visibility", "visible");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 可拖拽对象和拖把 -->
|
||||
<div id="drag_range" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;">
|
||||
<div id="drag_range_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
|
||||
<div class="z-float-left z-h40 z-lh40 z-pd-l10">在指定范围拖动（可拖动）</div>
|
||||
<div class="z-float-right z-mg6"><button class="z-button" onclick="doResizeInParent(this);">收起</button></div>
|
||||
</div>
|
||||
<div id="drag_range_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
|
||||
</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、通过Z.dragInParent方法进行初始化，三个参数为三要求的id<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="min-height:250px;">
|
||||
<script language="javascript">
|
||||
<!--
|
||||
var dragList;
|
||||
|
||||
Z.onload(function()
|
||||
{
|
||||
dragList = new Z.DragList({pid: "mainDiv", callback: onCallback});
|
||||
dragList.isResizeRate = true;
|
||||
dragList.isDeleteIco = true;
|
||||
dragList.addImage("../../../inc/www/tutorial/1.png");
|
||||
dragList.addImage("../../../inc/www/tutorial/2.png");
|
||||
|
||||
var param = {"deliveryCode":"7020100","paramName":"buyerMessage","paramValue":"收-买家留言","referenceValue":"周末不在公司，请快递兄弟周一至周五送，谢谢！","type":0,"paramLeft":150,"paramTop":146,"paramWidth":142,"paramHeight":20,"fontName":"SimSun","fontSize":10,"fontColor":"#000000","bold":0,"italic":0,"underline":0,"alignment":1};
|
||||
var value = buildValue(param);
|
||||
var params = {width: param.paramWidth, height: param.paramHeight, top: param.paramTop, left: param.paramLeft};
|
||||
dragList.addHtml(value, params, {id: param.paramName}, false);
|
||||
});
|
||||
|
||||
function buildValue(param)
|
||||
{
|
||||
var _fontName = (param.fontName == "")?"":"font-family:"+param.fontName+";";
|
||||
var _fontSize = "font-size:"+param.fontSize+"pt;";
|
||||
var _fontColor = (param.fontColor == "")?"color:#000000;":"color:"+param.fontColor+";";
|
||||
var _bold = (param.bold == 1)?"font-weight:700;":"";
|
||||
var _italic = (param.italic == 1)?"font-style:italic;":"";
|
||||
var _underline = (param.underline == 1)?"text-decoration:underline;":"";
|
||||
var _alignment = (param.alignment == 1)?"text-align:left;":(((param.alignment == 2)?"text-align:center;":"text-align:right;"));
|
||||
var _value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+param.paramValue+"</div>";
|
||||
|
||||
if (param.type == 2)
|
||||
{
|
||||
var tableStr = "<table><tr height=22 valign=middle align=center><td width=5%>序号</td><td width=15%>商品编码</td><td width=35%>商品名称</td><td width=15%>规格</td><td width=15%>单价</td><td width=10%>数量</td></tr></table>";
|
||||
_value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+tableStr+"</div>";
|
||||
}
|
||||
|
||||
return _value;
|
||||
}
|
||||
|
||||
function addImage()
|
||||
{
|
||||
dragList.addImage("../../../inc/www/tutorial/1.png");
|
||||
}
|
||||
|
||||
function onCallback()
|
||||
{//回调
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
|
||||
function doSetWidth()
|
||||
{//手动设置高度
|
||||
dragList.setSizeRateWidth(Z("#widthValue").val());
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
|
||||
function doSetPos(pos)
|
||||
{//设置位置
|
||||
dragList.setPositionPoint(pos);
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
|
||||
<div class="z-relative-left z-w1000 z-h400">
|
||||
|
||||
<button class="z-button" onclick="addImage()">添加图片</button>
|
||||
|
||||
<!-- 宝贝主图 -->
|
||||
<div id="mainDiv" class="z-absolute" style="top:35px;left:20px;width:310px;height:310px;z-index:30;">
|
||||
<img id="mainImg" src="../../../inc/www/tutorial/default.jpg" width="100%" height="100%" style="z-index:30;">
|
||||
</div>
|
||||
|
||||
<!-- 虚线分开 -->
|
||||
<div class="z-absolute z-h400" style="top:5px;left:360px;width:1px;border:1px dashed #d5d5d5"></div>
|
||||
|
||||
<!-- 查询宝贝条件 -->
|
||||
<div class="z-absolute z-w600 z-h300" style="top:15px;left:370px;">
|
||||
<div class="z-absolute z-bold z-color-666" style="top:15px;left:10px;">标签位置：</div>
|
||||
<button onclick="doSetPos(1);" class="z-button z-absolute" style="top:10px;left:85px;" >左上</button>
|
||||
<button onclick="doSetPos(2);" class="z-button z-absolute" style="top:10px;left:145px;" >右上</button>
|
||||
<button onclick="doSetPos(3);" class="z-button z-absolute" style="top:10px;left:205px;" >左下</button>
|
||||
<button onclick="doSetPos(4);" class="z-button z-absolute" style="top:10px;left:265px;" >右下</button>
|
||||
<div class="z-absolute z-text-red" style="top:15px;left:330px;">注：图标可拖放</div>
|
||||
|
||||
<div class="z-absolute z-bold z-color-666" style="top:60px;left:10px;">设置宽度： </div>
|
||||
<div class="z-absolute z-color-666" style="top:55px;left:80px;">
|
||||
<input type="text" id="widthValue" name="widthValue" data-options="type:Numeric;paste:true;" size="4" maxlength="3" class="z-input z-red" onkeyup="doSetWidth();"> <font style="font-size:12px;">像素</font>
|
||||
</div>
|
||||
<div class="z-absolute z-color-666" style="top:58px;left:180px;">
|
||||
宽：<span id="realWidth" style="width:20px;color:blue;font-size:20px;"></span> <font style="font-size:12px;">像素</font>
|
||||
高：<span id="realHeight" style="width:20px;color:blue;font-size:20px;"></span> <font style="font-size:12px;">像素</font>
|
||||
</div>
|
||||
</div>
|
||||
</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、比较复制的拖拽和缩放，支持IMG和DIV两种<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,87 @@
|
||||
<#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()}
|
||||
@@ -0,0 +1,314 @@
|
||||
<#def title = "文件上传"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
|
||||
<#def prevUrl = "imageClipper.htm"/>
|
||||
<#def nextUrl = "uploadLarge.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "upload")}
|
||||
|
||||
<!--主体-->
|
||||
<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="padding-top:40px">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var upload = new Z.Upload();
|
||||
upload.contextPath = "${context.getContextPath()}";
|
||||
upload.elem = "ZUpload";
|
||||
upload.fileDir = "tutorial";
|
||||
upload.onCompleted = function(fileUrl){Z("#ZUploadCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
|
||||
upload.execute();
|
||||
});
|
||||
</script>
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="ZUpload" type="button" class="z-button z-blue z-w120">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="ZUploadCompleted"></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、最简文件上传，是初始化单个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir即可
|
||||
</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>
|
||||
var uploadpreview = null;
|
||||
Z.onload(function()
|
||||
{
|
||||
uploadpreview = new Z.Upload();
|
||||
uploadpreview.contextPath = "${context.getContextPath()}";
|
||||
uploadpreview.elem = "ZUploadPreview";
|
||||
uploadpreview.fileDir = "tutorial";
|
||||
uploadpreview.onPreview = function(fileUrl){Z("#ZUploadPreviewLocation").html("<img src='"+fileUrl+"' style='max-width:80px;max-height:80px'>")};
|
||||
uploadpreview.onCompleted = function(fileUrl){Z("#ZUploadPreviewCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
|
||||
uploadpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadonePreview()
|
||||
{
|
||||
uploadpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="ZUploadPreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="ZUploadPreview" type="button" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="ZUploadUpload" type="button" class="z-button z-w120" onclick="doUploadonePreview();">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="ZUploadPreviewCompleted"></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、最简文件上传，是初始化单个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、如果需要分成两步，先预览后上传，则增加预览处理
|
||||
</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:200px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
var uploadmultpreview = null;
|
||||
Z.onload(function()
|
||||
{
|
||||
uploadmultpreview = new Z.Uploadmult();
|
||||
uploadmultpreview.elem = "ZUploadmultPreview";
|
||||
uploadmultpreview.fileDir = "tutorial";
|
||||
uploadmultpreview.onPreview = function(results)
|
||||
{
|
||||
uploadmultpreview.buildPreviewHtml("ZUploadmultPreviewLocation");
|
||||
};
|
||||
uploadmultpreview.onCompleted = function(results)
|
||||
{
|
||||
var html = "";
|
||||
for (var i=0;i<results.length;i++){
|
||||
if (i != 0)
|
||||
html += "<br>";
|
||||
if (results[i].success)
|
||||
html += "上传成功，URL：<a href='"+results[i].success+"' target='_blank'>"+results[i].success+"</a>";
|
||||
else
|
||||
html += "上传失败，原因："+results[i].error;
|
||||
}
|
||||
Z("#ZUploadmultPreviewCompleted").html(html);
|
||||
};
|
||||
uploadmultpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadmultPreview()
|
||||
{
|
||||
uploadmultpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="ZUploadmultPreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<div class="z-relative-left z-w100p">
|
||||
<button id="ZUploadmultPreview" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="ZUploadmultUpload" class="z-button z-w120" onclick="doUploadmultPreview();">上传文件</button>
|
||||
</div>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<div id="ZUploadmultPreviewCompleted" class="z-relative-left z-w100p z-mg10 z-lh150p"></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、最简文件上传，是初始化多个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、如果需要分成两步，先预览后上传，则增加预览处理
|
||||
</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 z-lh300p" style="padding-top:40px;">
|
||||
<!-- 表单文件上传 -->
|
||||
${Htmls.toCallFrame()}
|
||||
<form action="uploadForm.htm" method="post" enctype="multipart/form-data" data-role="z-call-frame">
|
||||
参数1：<input name="p1" class="z-input"><br>
|
||||
参数2：<input name="p2" class="z-input"><br>
|
||||
<button type="button" class="z-button z-blue z-w120" onclick="Z(this).next('input')[0].value=null;Z(this).next('input')[0].click();">选择文件</button>
|
||||
<input class="z-hide" type="file" name="file" accept="*.*" onchange="Z(this).next('span').text(this.value);" single>
|
||||
<span></span>
|
||||
<button type="submit" class="z-button">上传</button>
|
||||
</form>
|
||||
</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、表单文件上传的特点是支持参数一起传递，采用multipart/form-data格式<br>
|
||||
2、把真实的文件上传按钮隐藏起来（各浏览器表现不一样，太不美观），使用一个button代替<br>
|
||||
3、提供一个span用户显示文件选择的路径，这里也可以设计成预览<br>
|
||||
4、上传button，和提供一个Action处理数据。如下：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
public class UploadFormAction implements Action, HttpdConstants
|
||||
{
|
||||
private static final Log log = LogFactory.getLog(UploadFormAction.class);
|
||||
|
||||
@Override
|
||||
public void execute(HttpRequest request) throws Exception
|
||||
{
|
||||
String rootDir = request.getContextAttributeString(_SERV_UPLOAD_ROOT_DIR_);
|
||||
if (Validates.isEmptyBlank(rootDir) || !Files.mkDirectory(rootDir))
|
||||
{
|
||||
request.setAlertMsg("未配置上传目录，不支持上传");
|
||||
return;
|
||||
}
|
||||
|
||||
HttpUploader uploader = new HttpUploader();
|
||||
|
||||
try
|
||||
{//最大支持2M
|
||||
uploader.parseHttpRequest(request, 2*1024*1024);
|
||||
|
||||
String fileExt = uploader.getFileExt();
|
||||
if(Validates.isEmpty(fileExt) || !Validates.isContain("jpg,png,gif", ",", fileExt))
|
||||
{
|
||||
request.setAlertMsg("仅支持图片，请重新上传");
|
||||
return;
|
||||
}
|
||||
|
||||
//文件字节比较
|
||||
byte[] content = uploader.getBytes();
|
||||
if (!(Bytes.isGIZ(content) || Bytes.isPNG(content) || Bytes.isJPG(content)))
|
||||
{
|
||||
request.setAlertMsg("图片格式不正确，请重新上传");
|
||||
return;
|
||||
}
|
||||
|
||||
//读出参数
|
||||
String param1 = uploader.getParameter("p1");
|
||||
String param2 = uploader.getParameter("p2");
|
||||
log.info("参数1："+param1+",参数2："+param2);
|
||||
|
||||
//保存文件
|
||||
String fileDir = Strings.addEndsWith(Files.toLinuxPath(rootDir), "/");
|
||||
String fileName = Ids.longId() + "." + fileExt;
|
||||
uploader.writeToFile(fileDir + fileName);
|
||||
|
||||
request.setAlertMsg("上传成功");
|
||||
}
|
||||
catch(Exception e)
|
||||
{
|
||||
request.setAlertMsg("上传失败");
|
||||
}
|
||||
finally
|
||||
{
|
||||
uploader.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,136 @@
|
||||
<#def title = "大文件上传"/>
|
||||
<#def keyword = "大文件上传 ZhiqimUI zhiqim"/>
|
||||
<#def desc = " 知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。"/>
|
||||
<#def prevUrl = "upload.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "uploadlarge")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
知启蒙大文件上传提供了（HTML5和Flash两种）的上传方式，支持断点续传、数据库存储文件碎片和文件信息，提供指定目录和文件名等功能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、HTML5大文件断点续传 -->
|
||||
<div class="tutorial title">一、HTML5大文件断点续传</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()
|
||||
{
|
||||
var upload = new Z.UploadLarge();
|
||||
upload.elem = "FUpload_HTML5";
|
||||
//upload.showResult = false;
|
||||
upload.contextPath = "${context.getContextPath()}";
|
||||
upload.onCompleted = function(fileId, fileName, fileUrl){};
|
||||
upload.execute();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- HTML5大文件断点续传 -->
|
||||
<button id="FUpload_HTML5" class="z-button z-red z-w120">HTML5上传</button>
|
||||
</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、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
|
||||
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、指定目录：upload.fileDir = "html5";
|
||||
5、指定文件格式：upload.setFileFormatExt("image/gif, image/jpeg");
|
||||
6、需支持HTML5协议的浏览器支持
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、Flash大文件断点续传 -->
|
||||
<div class="tutorial title">二、Flash大文件断点续传</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()
|
||||
{
|
||||
var upload2 = new Z.UploadLarge();
|
||||
upload2.elem = "FUpload_flash";
|
||||
upload2.flash = true;
|
||||
upload2.flashPath = "${FUploadLarge.swf}";
|
||||
upload2.contextPath = "${context.getContextPath()}";
|
||||
upload2.onCompleted = function(fileId, fileName, fileUrl){};
|
||||
upload2.execute();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Flash大文件断点续传 -->
|
||||
<button id="FUpload_flash" class="z-button z-orange z-w120">Flash上传</button>
|
||||
</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、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
|
||||
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、指定目录：upload.fileDir = "html5";
|
||||
5、指定文件格式描述：upload.setFileFormatDesc("PNG和GIF图片(*.png;*.gif)");
|
||||
6、指定文件格式：upload.setFileFormatExt("*.png;*.gif");
|
||||
7、需支持Flash的浏览器
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,72 @@
|
||||
<#def title = "富文本编辑器"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。"/>
|
||||
<#def prevUrl = "drag.htm"/>
|
||||
<#def nextUrl = "uploadLarge.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
${Styles.src(context.getRootPath("/src/zteditor/zteditor.css"))}
|
||||
${Scripts.src(context.getRootPath("/src/zteditor/zteditor.js"))}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "zteditor")}
|
||||
|
||||
<!--主体-->
|
||||
<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>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="">效果预览</td>
|
||||
<!--
|
||||
<td width="50%">代码</td>
|
||||
-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var editor = new Z.ZhiqimEditor();
|
||||
editor.setId("test");
|
||||
editor.setAjaxClass("com.zhiqim.zhiqim.ui.FteUploadImagePresenter");
|
||||
editor.execute();
|
||||
});
|
||||
</script>
|
||||
<textarea id="test" name="test" class="z-textarea z-w100p z-h500"></textarea>
|
||||
<button type="button" class="z-button z-mg-t15" onclick='Z("#result").html(Z("#test").val())'>点击查看输入内容</button>
|
||||
|
||||
<div class="z-mg-t40 z-mg-b40">
|
||||
<div>查看结果</div>
|
||||
<pre id="result"></pre>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<!--
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
-->
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
在新工单中引用
屏蔽一个用户