javascript原生移动云编程14 - 如何隐藏和定制屏幕上部的导航条

用javascript在码实的云平台上，可以在云里编写原生的移动应用。每个页面顶部平台会自动配备一个系统导航条，对学习编程确实很方便，但是实际应用中，码农需要定制自己导航条，有时甚至不需要导航条。本教程介绍了如何隐藏和显示系统导航条，如何移除导航条，如何退回到前一个页面。代码控制非常简单，用到平台SDK的几个调用：

• setTitle - 设置页面标题
• setLeftNavButton - 设置右上角的按钮
• setRightNavButton - 设置右上角的按钮
  
• hideNavigation - 临时隐藏导航条
  
• showNavigation - 显示导航条
  
• removeNavigation - 移除系统导航条，系统导航条不再显示
  
• close - 关闭本页面，退回到前一个页面

注意，隐藏或移除导航条之后，别忘了自己做个关闭页面退回的按钮，否则苹果手机的用户就遭殃了，无法退出页面。下面的代码全面介绍了这些控制的使用。其中showBar和hideBar介绍了如何做出一个自己定制的导航条。

/**
 *隐藏导航条，定制导航条
 * 功能一：隐藏现有默认导航条，定制现有导航条的左侧按钮、标题、右侧按钮方式。
 * 功能二：自定义导航条
 **/

Class.create(Mash5.Widget, {
    newNav : undefined,
	initialize : function (config, params) {
        var _self = this , page = this.getCurrentPage(), context = this.getContext();
		var container = Ti.UI.createView({
				width : Ti.UI.FILL,
				height : Ti.UI.FILL,
				backgroundColor : '#eee'
			});
		//设置当前页面标题
		page.setTitle('标题A');
		//设置当前页面有按钮样式
		page.setRightNavButton({
            style: Mash5.UI.NavigationButtonStyle.ADD,
			listener: function() {
                alert('默认右侧按钮事件。');
			}
		});
        //隐藏默认导航条
        var hideBtn = Mash5.UI.createButton({
			width: '120dip',
            height: '40dip',
            top: '150dip',
            borderRadius: dipToPx(21),
			font: {fontSize: '14dip'},
			color: '#fff',
			title: '隐藏默认导航条',
			bubbleParent: false,
			style: Mash5.UI.ButtonStyle.GREEN,
        });
        container.add(hideBtn);
        hideBtn.addEventListener('click',function(e){
            if(hideBtn.title === '隐藏默认导航条'){
                hideBtn.title = '显示默认导航条';
                page.hideNavigation();//隐藏默认导航条
            }else if(hideBtn.title === '显示默认导航条'){
                hideBtn.title = '隐藏默认导航条';
                page.showNavigation();//显示默认导航条
            }
        });
        //移除默认导航条
        var removeBtn = Mash5.UI.createButton({
			width: '120dip',
            height: '40dip',
            top: '200dip',
            borderRadius: dipToPx(21),
			font: {fontSize: '14dip'},
			color: '#fff',
			title: '移除默认导航条',
			bubbleParent: false,
			style: Mash5.UI.ButtonStyle.GRAY,
        });
        container.add(removeBtn);
        removeBtn.addEventListener('click',function(e){
            alert('移除默认导航条后，无法再显示。');
            page.removeNavigation();//移除默认导航条
            hideBtn.touchEnabled = false;
            hideBtn.hide();
        });
        //显示定制导航条
        var showBtn = Mash5.UI.createButton({
			width: '120dip',
            height: '40dip',
            top: '250dip',
            borderRadius: dipToPx(21),
			font: {fontSize: '14dip'},
			color: '#fff',
			title: '显示定制导航条',
			bubbleParent: false,
			style: Mash5.UI.ButtonStyle.BLUE,
        });
        container.add(showBtn);
        showBtn.addEventListener('click',function(e){
            if(showBtn.title === '隐藏定制导航条'){
                showBtn.title = '显示定制导航条';
                _self.hideBar();
            }else if(showBtn.title === '显示定制导航条'){
                showBtn.title = '隐藏定制导航条';
                _self.showBar(container);
            }
        });
			
		this.setContentView(container);
	},
	showBar : function(container){
        var _self = this , page = this.getCurrentPage(), context = this.getContext();
        if(!this.newNav){
            var nav = Ti.UI.createView({
                width : '100%',
                height : Ti.UI.SIZE,
                top : 0,
                backgroundColor: 'gray'
            });
            container.add(nav);
            this.newNav = nav;
            nav.add(Ti.UI.createLabel({
                color : '#404040',
                text : '定制标题',
                bottom : '12dip',
                font : {
                    fontSize : '18dip',
                    fontFamily : 'Helvetica Neue'
                },
            }));
            var nav_left = Ti.UI.createView({
                width : '35dip',
                height : '35dip',
                bottom : '5dip',
                left : 0,
                clickOpacity : 0.6
            });
            nav_left.add(Ti.UI.createLabel({
                color : '#fff',
                text : '退回',
                height : '35dip',
                clickOpacity : 0.6,
                top: 0,
                font : {
                    fontSize : '25dip',
                },
            }));
            nav_left.addEventListener('click', function() {
                page.close();//关闭页面
            });
            nav.add(nav_left);
            var nav_right = Ti.UI.createView({
                width : '35dip',
                height : '35dip',
                bottom : '5dip',
                right : 0
            });
            nav.add(nav_right);
            nav_right.add(Ti.UI.createLabel({
                color : '#fff',
                text : '右键',
                height : '35dip',
                clickOpacity : 0.6,
                top: 0,
                font : {
                    fontSize : '25dip',
                },
            }));
            nav_right.addEventListener('click', function() {
                alert('右侧按钮');
            });
        }else{
            this.newNav.height = Ti.UI.SIZE;
            this.newNav.show();
        }
	},
    hideBar : function(){
        if(this.newNav){
            this.newNav.height = 0;
            this.newNav.hide();
        }
    }
})