布局组件开发说明

方式一:iframe嵌套页面组件

将已开发好的页面,通过iframe做成数据卡片嵌入页面。先新增控件信息,HTML内容处粘贴HTML代码,示例(图1):

 

图1

 

 

HTML代码:

<iframe src="http://10.105.184.50:90/Function/DailyWorkList2.aspx" width="100%" height=600"></iframe>

 

创建成功后,继续新建控件属性,以下四条属性为必填属性(图2),如需用到更多属性可继续添加,方式一创建完成。

图2

 

 

 

 

  1. 示例

效果示例

组件代码示例

<iframe src="http://10.105.184.50:90/Function/DailyWorkList2.aspx" width="100%" height=600"></iframe>

数据卡片属性

 

 

 

 

 

 

方式二:H5片段组件

先创建控件信息如方式一(图1、图2),需用到更多属性可继续添加,如图3

 

 

图3

代码说明:

1. 所有HTML内容,都要以art-template模板的方式构造;
2. 属性值可通过替换符<!属性名!>,两种方式替换属性值;

  3. 接口返回数据渲染,使用art-template模板方式渲染;

  4. 唯一性id需加上<!guid!>,如(id="list_temp<!guid!>")方式;

  5. 内容渲染位置为$(“#<!guid!>”),如下:

$("#<!guid!>").prepend(template("list_temp<!guid!>",result));

6组件脚本需放在$(document).ready()方法里面执行;

  7. 具体代码格式,如下案例:

 

 

  1. 示例

效果示例

组件代码示例

<script type="text/html" id="list_temp<!guid!>">

<div class="lay-list">

    <div class="lay-title" id="layList">

         <span>企业信息化<span>

<span>图片资讯<span>

<span>我们的生活<span>

<span>战略规划<span>

</div>

        <ul class=" list-table clearfix">

            {{each childs as list i}}

            <li>

                <a href="{{list.url?list.url:'javascript:void(0)'}}">{{list.title}}</a>

            </li>

        {{/each}}

        </ul>

    </div>

</script>

 

<script type="text/javascript">

    $(document).ready(function(){

        var listController=(function(){

 

            /**

             * 请求服务

             *@param: params {json} 提交参数

             *@param: success {function} 成功回调方法

             *@param: fail {function} 失败回调方法

             */

            var listService=function(params,success,fail){

                wui.logMethodCalled("listService()");

 

                var url="<!apiService!>";

                //判断替换符,是否已替换

                if (url.indexOf("<") != -1){return;}

                wui.getAjax({

                    url: url,

                    data: params,

                    contentType: 'application/x-www-form-urlencoded',

                    onSuccess: success,

                    onError: fail

                });

            };

 

            /**

             * 列表

             */

            var getList=function(){

                wui.logMethodCalled("getList()");

 

                var params={

                    userToken:Global.userToken,

                    appToken:"<!appCode!>"

                }

 

                var success=function(result){

                    $("#<!guid!>").prepend(template("list_temp<!guid!>",result));

 

                    //初始化事件

                    _initEvent();

                }

                var fail=function(error){

                    wui.errorNotice(error.responseJSON.message);

                }

                listService(params,success,fail);

            }

 

            

            /**

             * 事件

             */

            var _initEvent=function(){

                wui.logMethodCalled("_initEvent");

               

                $("#layList<!guid!> span").on("click",function(){

                  $(this).addClass("active");

})

            }

 

            /**

             * 初始化方法

             */

            var _init=function(){

 

                //初始化事件

                 getList ();

            }

 

            return{

                init : _init

            }

        })();

 

        //初始化

        listController.init();

    })

</script>

 

数据卡片属性

 

 

 

 

 

特殊参数说明:

选择页面编码、服务编码需在参数前加前缀,具体如下:

服务编码前缀“serviceCode_”

服务参数前缀“serviceParams_”

页面编码前缀“pageCode_”

页面编码前缀“pageParams_”

 

 

 

 

WUI资源引用:

style.css              wui框架皮肤

wui.min.css            wui框架样式

wui.config.js          wui框架自定义配置

wui.min.js             wui框架组件脚本

wui.plugins.min.js    wui框架应用的第三方插件

 

WUI官网http://120.197.17.151:40003/wui/