首页 > 代码库 > 讲一讲dhtmlx
讲一讲dhtmlx
官网链接：http://dhtmlx.com/docs/products/dhtmlxTouch/
说明
dhtmlx功能十分强大，作为免费且开源的基于html5的javascript library，dhx的功能十分强大。[It‘s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.]
dhtml的基本语法
dhx.ui({..\\ 定义一个view，放置任意组件})$$(‘row_logs‘) 声明id? 引用id来找到对应的控件
事件
onDocumentReady dhx.Ready(function(){…})The alternative to ‘onDocumentReady‘ event is dhx.Ready(function(){…}) function. So, to ensure that your code will be executed as soon as the page finishes loading, put all your code inside this function. 类似onLoad
type:"MainBar"
type:"round"
header:true
{
id:"grid", view:"grid", header:true,
fields:[{ id:"Name",
label:"Name",
...
},
{ id:"email",//specifies the second column of the grid
label:"email",
}]
理解View与element的关系：每一个view有点像android中的framelayout
$(document).ready(function(){} jquery 当页面加载完成以后
Dhx.ready 当documen已经加载完
Layout
toolbar.push({"width":div_width_gap});
{ template:"top" },
template:"<div style=‘float:left‘><div class=‘title‘>#title#</div> <div class=‘author‘>by #author#</div></div>"
1设置边界以分隔组件
控制1“Type用于指定块与块之间的间隔。layout blocks (‘cols‘ or ‘rows‘)
dhx.ui({ type:"space",// specifies a type of the border rows:[{ ... }]})
‘line‘(default) 所有视图间无间隔，但有一条线
‘wide‘,与父视图间无间隔，子视图间有间隔
‘head‘ 类似wide
‘clean‘ 没有任何间隔
‘space‘ 所有视图间等间隔
或 type:{ height:35 }
DHTMLX Touch allows to set border, padding and margin of a component.
控制2：padding margin
Padding是内边距，是站在自己的角度 就是内容与边框的距离；margin是外边距，是站在容器的角度 就是边框与其他元素的距离。
动态设置大小和调整
调用Resize()，该元素的所有子子元素与父容器都会重新确定大小。{
view:"toolbar", type:"SubBar",
elements:[{ view:"button", inputWidth:200, value:"Resize", click:resize}]
},
function resize(){
$$(‘list1‘).define("height", 300);
$$(‘list1‘).define("width", 500);
$$(‘list1‘).resize();
};
调整该元素的大小为其父元素的大小，但是子元素大小不改变
function adjust(){
document.getElementById(‘divB‘).style.height="200px";
list2.adjust();
}
若是想修改同一父容器内的多个子元素的大小，可以通过父容器的resize(true)方法。实现方式：重绘所有的子元素。
$$(‘list1‘).define("width", 300);
$$(‘list2‘).define("width", 100);
...
$$(‘layout_id‘).resize(true);
..
点餐系统实例
讲一讲dhtmlx