267 lines
11 KiB
HTML
267 lines
11 KiB
HTML
<#def title = "可编辑文本"/>
|
|
<#def keyword = "ZhiqimUI"/>
|
|
<#def desc = "可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。"/>
|
|
<#def prevUrl = "select.htm"/>
|
|
<#def nextUrl = "calendar.htm"/>
|
|
${zhiqim_com_header()}
|
|
${zhiqim_com_topnav()}
|
|
|
|
<!--容器开始 -->
|
|
<div id="container" class="container">
|
|
<!--边导航-->
|
|
${zhiqim_com_ui("tutorial", "ui", "form", "editable")}
|
|
|
|
<!--主体-->
|
|
<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;">
|
|
可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。
|
|
</p>
|
|
</div>
|
|
|
|
<#-- 可编辑文本参数说明 -->
|
|
<div class="tutorial title">可编辑文本参数说明（三项必须，八项可选）</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="10%">是否必须</td>
|
|
<td width="*">说明</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-role</td>
|
|
<td>z-editable</td>
|
|
<td>必须</td>
|
|
<td>表明该文本是可编辑的文本</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-value</td>
|
|
<td>1.0</td>
|
|
<td>必须</td>
|
|
<td>可编辑文本值，不要配置到<span></span>中</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-save</td>
|
|
<td>function(value){return true;}</td>
|
|
<td>必须</td>
|
|
<td>保存触发函数，无还回值和返回true表示成功，返回false表示失败，返回字符串表示弹出错误提示并且失败</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-value-class</td>
|
|
<td>z-bold</td>
|
|
<td>可选</td>
|
|
<td>可编辑文本样式类</td>
|
|
</tr>
|
|
</tr>
|
|
<td class="z-samp">data-value-style</td>
|
|
<td>color:red;font-size:14px;font-weight:700;</td>
|
|
<td>可选</td>
|
|
<td>可编辑文本样式，遵循css规则</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-input-class</td>
|
|
<td>z-blue</td>
|
|
<td>可选</td>
|
|
<td>输入框样式类</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-input-style</td>
|
|
<td>width:50px;</td>
|
|
<td>可选</td>
|
|
<td>输入框样式表</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-input-maxlength</td>
|
|
<td>10</td>
|
|
<td>可选</td>
|
|
<td>输入框支持的最大长度</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-input-check</td>
|
|
<td>type:Discount;</td>
|
|
<td>可选</td>
|
|
<td>输入框控制，请参考输入框说明</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-button-class</td>
|
|
<td>z-blue</td>
|
|
<td>可选</td>
|
|
<td>按钮样式类</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="z-samp">data-button-style</td>
|
|
<td>width:50px;</td>
|
|
<td>可选</td>
|
|
<td>按钮样式表</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 一、无返回或返回true保存 -->
|
|
<div class="tutorial title">一、无返回或返回true保存</div>
|
|
|
|
<table class="z-table z-bordered z-pd10">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="25%">效果预览</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 二、返回false不保存 -->
|
|
<div class="tutorial title">二、返回false不保存</div>
|
|
|
|
<table class="z-table z-bordered z-pd10">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="25%">效果预览</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 三、返回字符串弹出对话框不保存 -->
|
|
<div class="tutorial title">三、返回字符串弹出对话框不保存</div>
|
|
|
|
<table class="z-table z-bordered z-pd10">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="25%">效果预览</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 四、触发修改值 -->
|
|
<div class="tutorial title">四、触发修改值</div>
|
|
|
|
<table class="z-table z-bordered z-pd10">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="25%">效果预览</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑"> <button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
|
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span>
|
|
</td>
|
|
<td><pre class="z-text-prewrap">
|
|
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑">
|
|
<button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
|
|
|
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="doSave"></span>
|
|
</pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 五、可选参数展示 -->
|
|
<div class="tutorial title">五、可选参数展示</div>
|
|
|
|
<table class="z-table z-bordered z-pd10 z-lh150p">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="25%">说明</td>
|
|
<td width="25%">效果预览</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td>文本样式类：加粗、16像素<br>文本样式表：红色</td>
|
|
<td>
|
|
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span>
|
|
</td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>输入框样式类：蓝色、大号<br>输入框样式表：宽度90px</td>
|
|
<td>
|
|
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span>
|
|
</td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>按钮样式类：蓝色、大号<br>按钮样式表：宽度70px</td>
|
|
<td>
|
|
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span>
|
|
</td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>输入控制：只能输入整数，且最大6个</td>
|
|
<td>
|
|
<span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span>（整数）
|
|
</td>
|
|
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span></pre></td>
|
|
</tr>
|
|
<table>
|
|
|
|
<#-- 六、完整参数展示 -->
|
|
<div class="tutorial title">六、完整参数展示</div>
|
|
|
|
<table class="z-table z-bordered z-pd10 z-lh150p">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="*">说明</td>
|
|
<td width="60%">效果预览</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
1、文本样式类：加粗、16像素<br>
|
|
2、文本样式表：红色<br>
|
|
3、输入框样式类：蓝色、大号<br>
|
|
4、输入框样式表：宽度90px、高度38px<br>
|
|
5、按钮样式类：蓝色、大号<br>
|
|
6、按钮样式表：宽度70px<br>
|
|
7、输入控制：只能输入折扣值<br>
|
|
8、输入控制：最长6个
|
|
</td>
|
|
<td width="60%">
|
|
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
|
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
|
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
|
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
|
data-input-maxlength="6" data-input-check="type:Discount;"></span><span class="z-px16"> 折</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><pre class="z-text-prewrap zi-px14">
|
|
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
|
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
|
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
|
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
|
data-input-maxlength="6" data-input-check="type:Discount;">
|
|
</span>
|
|
<span class="z-px16"> 折</span>
|
|
</pre></td>
|
|
</tr>
|
|
</table>
|
|
${zhiqim_com_chapter()}
|
|
</div>
|
|
|
|
<!-- 主体结束 -->
|
|
</div>
|
|
|
|
<!-- 容器结束 -->
|
|
</div>
|
|
${zhiqim_com_footer()} |