DeviceOne Make a popMenu
使用DeviceOne可以快速实现APP原型UI开发,其中很多通用模块开发使用DeviceOne来开发也显得非常简单:
- UI层面
使用DeviceOne开发UI是很简单的,可以向ASP NET开发一样拖拽控件,所以不过多描述
实现的UI效果:
我们需要点击选择类型弹出一个popMenu 也被叫做 ActionSheet
- 代码层面
DeviceOne支持Javascript 或者 Lua 来实现APP脚本,我采用的是Javascript
UI部分JS代码
//实例化UI组件 我们需要点击的选择类型这一整行
var do_ALayout_type = ui("do_ALayout_type");
//给其绑定touch事件
do_ALayout_type.on("touch", function() {
//封装的popmenu代码路劲 popmenu功能都在这个代码中实现
var scriptPath = "source://script/pages/leave/apply/actionSheet";
//require路径中的脚本 按需加载
var _rq = require(scriptPath);
//运行脚本中定义好的入口函数run
//run中提供回调函数 函数中传递回popmenu选择的结果 rsl
_rq.run(function(rsl) {
//将选择的结果绑定给UI组件 实现选择效果
do_Label_type.text = rsl;
})
})
scriptPath popmenu 实现JS脚本
//引入dojs函数库 可以在DeviceOne官方git中获取
var dojs = require("dojs");
//暴露模块函数run
//callback回调函数 用去回调返回popmenu选择的结果
module.exports.run = function(callback) {
//将popmenu中的菜单数据装在一个数组menus
var menus = [ {
//菜单的自定义颜色
fontColor : "3FCF79FF",
//一行菜单的高度
height : 100,
//菜单的字体大小
fontSize : 38,
//相对定位 y 坐标
y : 1,
//菜单名称
name : "事假",
callback : function() {
return callback("事假");
}
}, {
fontColor : "3FCF79FF",
height : 100,
fontSize : 38,
y : 1,
name : "补休",
callback : function() {
return callback("补休");
}
}, {....} ];
//将定义好的菜单 menus 模块化
dojs.modules.popupMenu(menus);
};
根据menus模块化实现 popmenu
//按需加载deviceone
var d1 = require("deviceone");
//按需加载dojs
var dojs = require("dojs");
//定义popmenu的隐藏动画
var animHide;
//函数 隐藏视图 popmenu的ui视图
function hideView(_func) {
//ui("$")是根UI节点 如果根节显示取反
if (!ui("$").visible)
//提前结束
return;
//加载单实例组件do_Page来实现隐藏键盘
sm("do_Page").hideKeyboard();
//do_ALayout_1为ui中包裹menu的组件容器
//触发动画
ui("do_ALayout_1").animate(animHide, function() {
ui("$").visible = false;
if (_func) {
_func.call(this);
}
});
}
//上面传递下来的数据 定义变量容器
var json_data;
//实例多实例组件do_ListData 存储deviceOne的array
var do_ListData = mm("do_ListData");
//隐藏实现
dojs.page.allowHide(ui("$"), function(data) {
var height = 0;
if (data) {
json_data = [];
for (var i = 0; i < data.length; i++) {
if (dojs.core.isNullData(data[i].name)) {
json_data.push({
template : 1
});
height += 10;
} else {
//把数据动态装载
json_data.push({
template : 0,
name : data[i].name,
fontColor : data[i].fontColor,
y:data[i].y,
height : data[i].height,
fontSize : data[i].fontSize
});
height += 110;
}
}
if (height <= 0) {
ui("do_ALayout_1").visible = false;
return;
}
//动态更新UI
if (height > 900)
height = 900;
ui("do_ALayout_1").height = height;
ui("do_ALayout_1").y = 1334;
//重绘UI
ui("do_ALayout_1").redraw();
do_ListData.removeAll();
do_ListData.addData(json_data);
ui("do_ListView_index").bindItems(do_ListData);
ui("$").visible = true;
var animShow = mm("do_Animator");
animHide = mm("do_Animator");
//除去底部的取消按钮
animShow.append(300, {
"y" : 1214 - height
});
animHide.append(100, {
"y" : 1214
});
ui("do_ALayout_1").animate(animShow);
} else {
ui("do_ALayout_1").visible = false;
ui("$").visible = true;
}
}, function(data) {
hideView();
});
//点击popmenu
ui("do_ListView_index").on("touch", function(_index) {
//找到点击的是哪一个menu
var data = json_data[_index];
if (data.template != 0)
return;
//执行回调
hideView(function() {
d1.sm("do_Page").fire("$$modules_internal_Event$$", {
moduleType : "$$popupMenu$$",
result : {
index : _index
}
});
});
});
- 最终效果