完整示例
本示例仅支持引擎版本：Androidv3.2.1、iOSv3.1.7 及其以上版本触动，以下版本将无法显示。
local html = [[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello 触动精灵 ShowUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/tsShowUI.css">
<link rel="stylesheet" href="css/icons-extra.css">
<!--App自定义的css-->
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button id="ts-cancle" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span><span class=" mui-tscancel">返回</span></button>
<button id="ts-timer" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right"></button>
<h1 class="mui-title mui-tstitle"></h1>
</header>
<footer class="mui-bar mui-bar-footer mui-bar-tsfooter">
<button id="ts-post-btn" class="mui-ts-footerbth btn mui-btn-block mui-btn-blue mui-tsaction" data-loading-text="执行中" type="button">开始</button>
</footer>
<div class="mui-content">
<form class="mui-tsform">
<div class="mui-card" id="renderbox">
</div>
</form>
</div>
<script src="js/tsShowUI.js"></script>
<script>
(function($, doc) {
var uiVersion=$.getVersion();//获取ui版本
//json兼容原showui 格式
var showui_json = {//通过$.renderUI方法来添加组件（页面只需添加一次）
"title": "触动精灵脚本配置",
"cancelname": "取消",
"config": "8888.txt",
"okname": "开始",
"titles" : "项目名称1,项目名称2,项目名称3,项目名称4,项目名称5,项目名称6",
"pagenumtype" : "tab",
"style": "default",
"align":'center',
"titlesize":15,
"timer": 30,
"orient": 0,
"pagetype": "multi",
"pages": [
[
{ "type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"width":20,
"text":"分割线"
},
{
"type":"Line",
"align":"center",
"color":"0,0,0",
"width":600,
"height":"5"
},
{ "type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"滑块"
},
{ "type":"Slide",
"id":"huakuai",
"default":"20",
"min":"5",
"max":"50",
"span":"2"
},
{
"type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"单选组合"
},
{
"type":"RadioGroup",
"id":"danxuan",
"select":"2",
"list":"单选1,单选2,单选3,单选4"
},
{
"type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"多选组合"
},
{
"type":"CheckBoxGroup",
"id":"duoxuan",
"select":"1@3@5",
"list":"电影,读书,跑步,吃饭,运动,睡觉,旅行,打豆豆,听歌"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"数字单行文本框"
},
{
"type": "Edit",
"id": "shuzi",
"prompt": "请输入一个数字",
"text": "1234",
"kbtype": "number",
"secure": true
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"普通单行文本框"
},
{
"type": "Edit",
"id": "putong",
"prompt": "请输入一个字母",
"text": "默认值",
"row": "5",
"kbtype": "ascii"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"密码单行文本框"
},
{ "type": "Edit",
"id": "mima",
"prompt": "请输入密码",
"text": "hhkjkjh",
"kbtype": "password"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"多行文本框"
},
{
"type":"TextArea",
"id":"duohang",
"size":15,
"height":250,
"color":"255,0,0",
"prompt":"我是hint",
"align":"center",
"kbtype":"number",
"text":"1\r\n2\n3"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"下拉框"
},
{
"type":"ComboBox",
"id":"xiala1",
"select":"0",
"list":"北京,上海"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"联动下拉框"
},
{
"type":"ComboBox",
"id":"xiala2",
"select":"1#1",
"list":"北京,上海",
"data":"北京1,北京2#上海1,上海2"
},
{
"type":"Label",
"size":20,
"align":"left",
"color":"100,255,100",
"text":"开关"
},
{
"type":"Switch",
"id":"kaiguan1",
"size":"s",
"align":"center",
"state":"on"
},
{
"type":"Switch",
"id":"kaiguan2",
"size":"s",
"align":"right",
"state":"off"
},
],[
{
"type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"图片"
},
{
"type":"Image",
"src":"http:\/\/www.baidu.com\/img\/bdlogo.png",
"scale":1
},
{
"type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"网页"
},
{
"type":"Web",
"height":500,
"url":"https://www.touchsprite.com"
},
],[
{
"type":"Label",
"size":20,
"align":"center",
"color":"100,255,100",
"text":"开关"
},
{
"type":"switches",
"id":"kaiguan3",
"list":"开关1,开关2,开关3,开关4",
"select": "0@2"
}
]
]
};
$.renderUI(showui_json);
})(mui, document)
</script>
</body>
</html>
]]
--小精灵使用协程需要勾选网络插件
local thread = require('thread')
local event = require('event')
local ts = require('ts')
local cjson = ts.json
--创建webview
local showui_view,err = require('webview').new("myshowui",
{html=html})
assert(showui_view,err)
event.register("showUI_commit",function(value)
showui_view.close()
dialog(cjson.encode(value))
dialog(value["val-putong"])
end)
event.register("showUI_cancel",function(value)
showui_view.close()
end)
showui_view.show()
thread.waitAllThreadExit()