全局可调用方法
获取控件工具
var button = $('test_button');
通过xml创建控件

var button = $C('<buttonid=\"大众test_button\"大众 onclick=\"大众alert(111)\"大众>按钮</button>');//对付ListItem和GridItemvar listItem =$C('<list-item><item href=\"大众detail.xml\公众><label>文本内容</label></item></list-item>');var gridItem =$C('<grid-item><item href=\"大众detail.xml\"大众><label>文本内容</label></item></grid-item>');
$C中C是Create的意思,表示创建一个imag.js控件。
通过JS工具创建控件
var button = $C({ tag:'button', id:'test_button', text:'按钮', onclick:'alert(111)',});
用JS工具创建控件只能创建单个控件,不能创建嵌套的控件。
如上面用XML创建ListItem和GridItem的例子,不能写成用JS工具创建的形式。
监听控件大小变革(onresize)
对付动态创建的控件,如果立即获取大小,此时得到的高宽都为0,如下面的例子:
<?xml version=\公众1.0\公众encoding=\"大众utf-8\"大众?><imag> <script> <![CDATA[ function createButton() { var button = $C({ tag:'button', id:'test_button', text:'测试按钮', onclick:'alert(this.text)', }); $('content').add(button); alert('Button width:' + button.width); } ]]> </script> <page> <title> <center><label>获取Button大小</label></center> </title> <content id=\公众content\"大众> <button onclick=\"大众createButton()\"大众>创建控件</button> </content> </page></imag>
上面的alert打印出来button width为0,这是由于页面布局刷新是异步的,以是此时得到button高宽都为0。
以是如果在动态创建控件时立即获取控件大小,须要利用onresize回调方法,例子如下:
<?xml version=\"大众1.0\公众encoding=\"大众utf-8\"大众?><imag> <script> <![CDATA[ function createButton() { var button = $C({ tag:'button', id:'test_button', text:'测试按钮', onclick:'alert(this.text)', }); button.onresize = function() { alert('Button width:' +button.width); } $('content').add(button); } function changeButtonSize() { $('test_button').css(\"大众width:100;height:100\"大众); } ]]> </script> <page> <title> <center><label>监听控件大小变革(onresize)</label></center> </title> <content id=\"大众content\公众> <button onclick=\"大众createButton()\"大众>创建控件</button> <button onclick=\"大众changeButtonSize()\公众>修正控件大小</button> </content> </page></imag>
上面的例子在add button之前先设置了onresize回调,以是可以精确获取到button width。
对付onresize,只要控件大小(width和height)发生改变,都会调用。
提示框
alert('提示信息');
提示框(带标题)
alert('提示标题', '提示信息');
提示框(带回调)
alert({ title: '标题', message: '提示信息', okText: '确定', ok: function() { hint('点击确定'); }});
提示框(iOS风格)
alert({ theme: 'ios', title: '标题', message: '提示信息', okText: '确定', ok: function() { hint('点击确定'); }});
设置theme:‘ios’可以让Android的alert框显示效果和iOS同等。
确认框
confirm({ title: '标题', message: '确认信息', okText: '确定', cancelText: '取消', ok: function() { hint('点击确定'); }, cancel: function() { hint('点击取消'); }});
获取确认框(iOS风格)
theme: 'ios',
输入框
prompt({ title: '标题', defaultText: '默认文本', placeholder: '请输入', maxlength: 15, okText: '确定', cancelText: '取消', ok: function(text) { hint('点击确定:' + text); }, cancel: function(text) { hint('点击取消:' + text); }});
提示
hint('提示');
JSON解析
var obj = JSON.parse(str); //JSON字符串转Javascript工具var str = JSON.stringify(obj); //Javascript工具转JSON字符串