zoukankan      html  css  js  c++  java
  • jQuery MiniUI开发系列之:创建组件对象

    原文:http://miniui.com/bbs/forum.php?mod=viewthread&tid=20&extra=page%3D1

    jQuery MiniUI可以使用Javascript和Html两种方式来创建对象。
    1)Javascript创建对象
    使用JavaScript创建对象,是最基本的方式,有如下几个要点:
    1)使用new关键字。如: var grid = new mini.DataGrid();
    2)使用set方法设置属性。如:grid.setUrl("getdata.jsp");
    3)使用on方法监听事件。如:grid.on("rowclick", onRowClick);
    4)使用render方法,呈现到页面。如:grid.render(document.body);
    常见注意点:
    1)构造器参数为空。创建任何一个MiniUI控件对象,都是:var button = new mini.Button(); 构造器函数是没有参数的。
    2)可以批量set多个属性。如:

    1. grid.set({
    2.     url: "getdata.jsp",
    3.     style: "700px;height:280px;",
    4.     columns: [ ... ]
    5.     ...
    6. });

    复制代码

    这样,就不用写多个setUrl、setStyle、setColumns方法,而只需要写一个set方法。
    3)事件处理函数对象。

    1. grid.on("rowclick", onRowClick);
    2. function onRowClick(e){
    3.     var grid = e.sender;//sender是组件对象本身
    4.     //...
    5. }

    复制代码

    4)每个组件都有一个dom元素。如:var el = grid.getEl()。获得组件dom元素后,开发者可以将dom用传统的javascript方式加入到任何位置。
    2)Html标签创建对象
    jQuery MiniUI推荐使用Html标签配置的方式来创建对象。
    当创建一个单独的表格对象时,javascript和html两种方式没什么区别。
    当创建一个复杂表单界面时,html标签配置的优点就显露无遗了。
    Html创建方式如下:
    1)使用class来命名控件。如:<div class="mini-datagrid"></div>。
    2)等号设置属性。如:<div class="mini-datagrid" url="getdata.jsp"></div>。
    3)"on"加事件名绑定事件。如:<div class="mini-datagrid"></div>。
    常见注意点:
    1)组件的class类名,都是"mini-"加小写类名。如"mini-button"、"mini-textbox"、"mini-tree"、"mini-tabs”等。
    2)事件名必须小写。不能出现“onClick”、"onRowClick"这样的命名方式。
    3)事件绑定函数,没有括号。不能出现onclick="onClick()"、onrowclick="onRowClick()"等。
    4)Html标签占位,即组件位置。不需要再调用"render"方法进行呈现。
    5)通过id获取组件对象。如<div id="grid1" class="mini-datagrid"></div>定义后,可以通过:var grid = mini.get("grid1");来获取组件对象。之后的操作参考Javascript方式。
    从简洁、快速、规范的开发角度,jQuery MiniUI建议使用Html标签化配置方式,来生成界面。
    也是所有示例中默认的书写方式,大家可以很好的学习使用特点。

  • 相关阅读:
    【转+补充】在OpenCV for Android 2.4.5中使用SURF(nonfree module)
    Delphi StarOffice Framework Beta 1.0 发布
    Angular ngIf相关问题
    angularjs文档下载
    公众号微信支付开发
    公众号第三方平台开发 教程六 代公众号使用JS SDK说明
    公众号第三方平台开发 教程五 代公众号处理消息和事件
    公众号第三方平台开发 教程四 代公众号发起网页授权说明
    公众号第三方平台开发 教程三 微信公众号授权第三方平台
    公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取
  • 原文地址:https://www.cnblogs.com/weekend001/p/3764599.html
Copyright © 2011-2022 走看看