<#def title = "可编辑文本"/> <#def keyword = "ZhiqimUI"/> <#def desc = "可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。"/> <#def prevUrl = "select.htm"/> <#def nextUrl = "calendar.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}
${zhiqim_com_ui("tutorial", "ui", "form", "editable")}
${zhiqim_com_breadcrumb("文库", "教程", "可编辑文本")}
<#-- 标题 -->

可编辑文本：

可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。

<#-- 可编辑文本参数说明 -->
可编辑文本参数说明（三项必须，八项可选）
参数 值 是否必须 说明
data-role z-editable 必须 表明该文本是可编辑的文本
data-value 1.0 必须 可编辑文本值，不要配置到<span></span>中
data-save function(value){return true;} 必须 保存触发函数，无还回值和返回true表示成功，返回false表示失败，返回字符串表示弹出错误提示并且失败
data-value-class z-bold 可选 可编辑文本样式类
data-value-style color:red;font-size:14px;font-weight:700; 可选 可编辑文本样式，遵循css规则
data-input-class z-blue 可选 输入框样式类
data-input-style width:50px; 可选 输入框样式表
data-input-maxlength 10 可选 输入框支持的最大长度
data-input-check type:Discount; 可选 输入框控制，请参考输入框说明
data-button-class z-blue 可选 按钮样式类
data-button-style width:50px; 可选 按钮样式表
<#-- 一、无返回或返回true保存 -->
一、无返回或返回true保存
效果预览 代码 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span>
 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span>
 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span>
<#-- 二、返回false不保存 -->
二、返回false不保存
效果预览 代码 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span>
 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span>
<#-- 三、返回字符串弹出对话框不保存 -->
三、返回字符串弹出对话框不保存
效果预览 代码 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span>
<#-- 四、触发修改值 -->
四、触发修改值
效果预览 代码 


<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>
<#-- 五、可选参数展示 -->
五、可选参数展示
说明 效果预览 代码
文本样式类：加粗、16像素
文本样式表：红色		 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span>
输入框样式类：蓝色、大号
输入框样式表：宽度90px		 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span>
按钮样式类：蓝色、大号
按钮样式表：宽度70px		 
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span>
输入控制：只能输入整数，且最大6个 （整数） 
<span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span>
<#-- 六、完整参数展示 -->
六、完整参数展示
说明 效果预览
1、文本样式类：加粗、16像素
2、文本样式表：红色
3、输入框样式类：蓝色、大号
4、输入框样式表：宽度90px、高度38px
5、按钮样式类：蓝色、大号
6、按钮样式表：宽度70px
7、输入控制：只能输入折扣值
8、输入控制：最长6个 		 折 
<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>
${zhiqim_com_chapter()}
${zhiqim_com_footer()}