Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
copy.htm2KB
<#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()}