NUI编辑模式与查看模式如何切换

1.nui编辑模式与查看模式切换，可以通过CSS样式来控制
1.效果如下：
编辑状态如下：

查看状态如下：

2.针对nui的css样式进行修改，在css文件中引入一下样式：
<span style="color: #3f7f7f"><em>.mini-htmlfile</em></span> <span style="color: #3f7f7f"><em>.mini-buttonedit-button</em></span> {
<span style="color: #7f007f">font-size</span>: <span style="color: #2a00e1"><em>12px</em></span>;
<span style="color: #7f007f">white-space</span>: <span style="color: #2a00e1"><em>nowrap</em></span>;
<span style="color: #7f007f">border</span>: <span style="color: #2a00e1"><em>none</em></span>;
<span style="color: #7f007f">border-left</span>: <span style="color: #2a00e1"><em>1px</em></span> <span style="color: #2a00e1"><em>solid</em></span> <span style="color: #2a00e1"><em>#A9ACB5</em></span>;
<span style="color: #7f007f">color</span>: <span style="color: #2a00e1"><em>#201F35</em></span>;
<span style="color: #7f007f">text-align</span>: <span style="color: #2a00e1"><em>center</em></span>;
<span style="color: #7f007f">height</span>: <span style="color: #2a00e1"><em>20px</em></span>;
<span style="color: #7f007f">margin</span>: <span style="color: #2a00e1"><em>0px</em></span> <span style="color: #2a00e1"><em>0px</em></span> <span style="color: #2a00e1"><em>0px</em></span> <span style="color: #2a00e1"><em>0px</em></span>;
<span style="color: #7f007f">letter-spacing</span>: <span style="color: #2a00e1"><em>2px</em></span>;
<span style="color: #7f007f">padding-left</span>: <span style="color: #2a00e1"><em>5px</em></span>;
<span style="color: #7f007f">padding-right</span>: <span style="color: #2a00e1"><em>5px</em></span>;
<span style="color: #7f007f">background-color</span>: <span style="color: #2a00e1"><em>#EFF2F4</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-textbox-border</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-textbox-input</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-buttonedit-border</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-buttonedit-input</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-textboxlist-border</em></span>
{
<span style="color: #7f007f">border</span>: <span style="color: #2a00e1"><em>0</em></span>;
<span style="color: #7f007f">background</span>: <span style="color: #2a00e1"><em>none</em></span>;
<span style="color: #7f007f">cursor</span>: <span style="color: #2a00e1"><em>default</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-buttonedit-button</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-textboxlist-close</em></span> {
<span style="color: #7f007f">display</span>: <span style="color: #2a00e1"><em>none</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-textboxlist-item</em></span> {
<span style="color: #7f007f">padding-right</span>: <span style="color: #2a00e1"><em>8px</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-radiobuttonlist-item</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-checkboxlist-item</em></span> {
<span style="color: #7f007f">display</span>: <span style="color: #2a00e1"><em>none</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-radiobuttonlist-item-selected</em><strong>,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-checkboxlist-item-selected</em></span>
{
<span style="color: #7f007f">display</span>: <span style="color: #2a00e1"><em>block</em></span>;
<span style="color: #7f007f">padding-left</span>: <span style="color: #2a00e1"><em>2px</em></span>;
}
<span style="color: #3f7f7f"><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-radiobuttonlist-item-selected</em></span> <span style="color: #3f7f7f"><strong>input,</strong><em>.asLabel</em></span> <span style="color: #3f7f7f"><em>.mini-checkboxlist-item-selected</em></span> <span style="color: #3f7f7f"><strong>input</strong></span>
{
<span style="color: #7f007f">display</span>: <span style="color: #2a00e1"><em>none</em></span>;
}
3.对nui方法进行扩充，如下：
<span style="color: #3f5fbf">/**</span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">fun：设置字段为查看状态</span>
<span style="color: #3f5fbf">*</span> <span style="color: #7f7f9f"><p></span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">formId：表单id</span>
<span style="color: #3f5fbf">*</span> <span style="color: #7f7f9f"><p></span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">excludes：排除的元素的id的数组</span>
<span style="color: #3f5fbf">*/</span>
nui.setFieldsViewable = <span style="color: #7f0055"><strong>function</strong></span>(formId, excludes) {
<span style="color: #7f0055"><strong>var</strong></span> form = <span style="color: #7f0055"><strong>new</strong></span> mini.Form(formId);
<span style="color: #7f0055"><strong>var</strong></span> fields = form.getFields();
<span style="color: #7f0055"><strong>for</strong></span> (<span style="color: #7f0055"><strong>var</strong></span> i = 0, l = fields.length; i < l; i++) {
<span style="color: #7f0055"><strong>var</strong></span> c = fields[i];
<span style="color: #7f0055"><strong>if</strong></span> ($.isArray(excludes) && excludes.length > 0) {
<span style="color: #7f0055"><strong>if</strong></span> ($.inArray(c.getId(), excludes) != -1) {
<span style="color: #7f0055"><strong>if</strong></span> (c.setReadOnly) {
c.setReadOnly(<span style="color: #7f0055"><strong>true</strong></span>);
}
<span style="color: #7f0055"><strong>if</strong></span> (c.setIsValid) {
c.setIsValid(<span style="color: #7f0055"><strong>true</strong></span>);
}
<span style="color: #7f0055"><strong>if</strong></span> (c.addCls) {
c.addCls(<span style="color: #2a00ff">"asLabel"</span>);
}
}
}
}
};

<span style="color: #3f5fbf">/**</span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">fun：设置字段为编辑状态</span>
<span style="color: #3f5fbf">*</span> <span style="color: #7f7f9f"><p></span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">formId：表单id</span>
<span style="color: #3f5fbf">*</span> <span style="color: #7f7f9f"><p></span>
<span style="color: #3f5fbf">*</span> <span style="color: #3f5fbf">excludes：排除的元素的id的数组</span>
<span style="color: #3f5fbf">*/</span>
nui.setFieldsEditable = <span style="color: #7f0055"><strong>function</strong></span>(formId, excludes) {
<span style="color: #7f0055"><strong>var</strong></span> form = <span style="color: #7f0055"><strong>new</strong></span> mini.Form(formId);
<span style="color: #7f0055"><strong>var</strong></span> fields = form.getFields();
<span style="color: #7f0055"><strong>for</strong></span> (<span style="color: #7f0055"><strong>var</strong></span> i = 0, l = fields.length; i < l; i++) {
<span style="color: #7f0055"><strong>var</strong></span> c = fields[i];
<span style="color: #7f0055"><strong>if</strong></span> ($.isArray(excludes) && excludes.length > 0) {
<span style="color: #7f0055"><strong>if</strong></span> ($.inArray(c.getId(), excludes) != -1) {
<span style="color: #7f0055"><strong>if</strong></span> (c.setReadOnly) {
c.setReadOnly(<span style="color: #7f0055"><strong>false</strong></span>);
}
<span style="color: #7f0055"><strong>if</strong></span> (c.removeCls) {
c.removeCls(<span style="color: #2a00ff">"asLabel"</span>);
}
}
}
}
nui.repaint(document.body);
};

<ac:structured-macro ac:name="anchor" ac:schema-version="1" ac:macro-id="c8e73eef-c977-4b6c-9cac-e07d3d56010c"><ac:parameter ac:name="">_GoBack</ac:parameter></ac:structured-macro>