deviceOne实现popMenu

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
            }
        });
    });
});

• 最终效果