如何开发一个面板.DOC

如何开发一个面板 面板文件结构： 测试环境所有文件在PanelZone文件夹下。 /Panels/ 是面板文件夹，各个面板以插件形式添加在这个文件夹中。 创建面板： 在/Panels/文件夹下，创建一个文件夹，命名为面板的名称，例如：Text（文本面板）。 在下面添加3个文件，Edit.cshtml，Show.cshtml，View.cshtml，分别是编辑表单、js渲染、服务器渲染所用。 修改/Edit.html页面，找到select#Model 下拉框，添加一个option。option value=”text”文本面板/option，注意value的值必须是面板文件夹名。 目前为止，运行/Edit.html页面，就可以看到我们新的面板添加进来了，但还是空白的。 编写面板内容： 首先编写编辑表单 /Panels/Text/Edit.cshtml， 给文本框添加 data-name 属性，在后面渲染部分需要使用。 请注意，data-name只能给 input[type=text] ,input[type=hidden],select,textarea 添加。 编辑/Panels/Text/Show.cshtml， 这个文件用于js渲染， 由于框架默认使用服务端渲染，所以js渲染的功能先注释，后面再详细介绍如何使用js渲染。 编辑/Panels/Text/View.cshtml， 这个文件负责服务器端渲染， 。 由于这部分需要服务器支持，所以在测试的时候只要画静态html就可以了。 运行/Edit.html测试一下开发结果。 编辑区选中文本框和/Panels/Text/Edit.cshtml对应， 预览部分和 /Panels/Text/View.cshtml 对应。 添加样式，皮肤： 编辑/Panels/Styles/Style.css 文件， 添加要用到的样式代码，注意命名不要与其他模板冲突。 编辑/Panels/Text/View.cshtml，修改代码，调用对应的样式类。 运行/Edit.html，可以看到效果： 添加换肤功，继续编辑/Panels/Styles/Style.css，添加皮肤样式： 规则为： .skin-皮肤名称 自定义样式类名 { 皮肤对应的样式 }。 运行，可见效果。 实现js渲染： 编辑/Panels/Text/Show.cshtml，添加渲染的js代码， 如果实现了js渲染，服务器渲染将被覆盖，重新运行可以查看到效果如下： 这段代码重写了渲染方法，方法的参数提供如下功能： boxel：对应面板的外框，可以当做是一个$(“div/div”)元素，只要把内容添加到这个元素内部就能显示出来。 Json：通过这个参数可以获取在编辑数据，包括Edit.csthml页面自定义data-name的表单数据，可以通过json.data.自定义字段名获取。 该例中，json.data.content获取到 textarea data-name=”content”/textarea 的内容，注意大小写敏感。 。 Mode参数是渲染模式选项，在后台编辑页面时“edit”，运行时为”show”，一般情况下可以忽略。 在编辑区使用第三方控件： 放置一个input type=”hidden” data-name=”自定义名称” /， 然后在自定义绑定自定义控件的change事件：