www.airoot.cn
A powerful web ui tool, so we call it uisys!
一个功能强大的 WEB UI 开发工具,所以我们叫它UISYS。
<@pub/>
<@define name="MyBox">
<div>Hello Baby!div>
@define>
<div>
<MyBox/>
<MyBox/>
div>
- 你需要使用 uisys 工具 , 点击这里下载
- 然后保存上面的文件到 D:\test\index.ui
- 最后, 运行 uisys.exe, 然后在uisys的命令行里面输入下面命令:
pub D:\test\ :90
完美, 打开 Chrome 或者 Firefox 浏览器, 然后输入 http://localhost:90/index.ui
这时候你能看到两行 “Hello Baby!” 文字在你的浏览器里。
您也可以使用JavaScript来创建,如下:
<@pub/>
<@define name="MyBox">
<div>Hello Baby!div>
@define>
<div>
div>
<script>
function init(){
var box = new MyBox();
dom.appendChild(box);
}
script>
或者可以这样写:
<@pub/>
<@define name="MyBox">
<div>Hello Baby!div>
@define>
<div id="ct">div>
<script>
function init(){
var box = new MyBox();
#ct.appendChild(box);
}
script>
如果您希望 MyBox 模块保存为文件,单独使用, 例如:
创建文件 MyBox.ui, 代码如下:
<div>Hello Baby!div>
创建文件Index.ui 代码如下:
<@pub/>
<div>
<MyBox/>
<MyBox/>
div>
打开浏览器查看结果,
你仍然可以看到两行 “Hello Baby!” 文字。
如果你希望把文件放到文件夹里, 你可以这样做:
例如, 将 D:\test\MyBox.ui 移动到 D:\test\mymod\mybox.ui 下。
然后在 Index.ui 模块中导入 MyBox.ui 模块,需要更改下Index.ui的代码:
<@pub/>
<div>
<mymod.MyBox/>
<mymod.MyBox/>
div>
或者可以全局导入MyBox.ui:
<@pub/>
<@import value="mymod.MyBox" />
<div>
<MyBox/>
<MyBox/>
div>
打开浏览器查看结果,
你仍然可以看到两行 “Hello Baby!” 文字。