ziqim/zhiqim_ui/document/tutorial/ui/form/editable.htm

<#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>可编辑文本值，不要配置到&lt;span&gt;&lt;/span&gt;中</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"&gt;&lt;/span&gt;</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">
&lt;input id="modify" class="z-input z-blue z-w100" value="内容可编辑"&gt;
&lt;button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue"&gt;修改&lt;/button&gt;&lt;br&gt;&lt;br&gt;

&lt;span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="doSave"&gt;&lt;/span&gt;
    </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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"&gt;&lt;/span&gt;</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">&lt;span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"&gt;&lt;/span&gt;</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">&nbsp;折</span>
    </td>
</tr>
<tr>
    <td colspan="2"><pre class="z-text-prewrap zi-px14">
&lt;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;"&gt;
&lt;/span&gt;
&lt;span class="z-px16"&gt;&nbsp;折&lt;/span&gt;
</pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}