logo

iMAG移动应用开发指南

Page

页面控件

标签

标签名 描述 说明
page 页面标签 page包含当前页面的所有内容

属性

属性名 取值 描述
style String
page样式,包括:
type String type是只读属性,表示当前页面类型,取值:
normal:普通页面,默认值
home:主页,调用$page.home()方法时会自动跳转到该页。
include String 引入的JS资源文件名,多个用逗号分隔,如<page include="common.js,util.js">
使用page的include属性可以把公共的javascript代码放到js文件里,js文件放到/res/default资源目录下。
screen String 屏幕显示类型,取值:
normal:正常屏幕,默认值
full:全屏显示
orientation String 屏幕方向,取值:
portrait:竖屏,默认值
landscape:横屏
sensor:重力感应横竖屏
onload Javascript 页面打开时触发的脚本
onunload Javascript 页面关闭时触发的脚本
onactive Javascript 页面激活时触发的脚本
oninactive Javascript 页面挂起时触发的脚本
onback Javascript 按Android手机物理返回键时时触发的脚本(仅Android)
onhomedown Javascript 按Android手机home键时触发的脚本(仅Android)
onlonghomedown Javascript 长按Android手机home键时触发的脚本(仅Android)

方法

方法名 参数 返回值 描述
open(url:String) url:URL地址 None 打开指定的URL页面
open(
url:String,
options:Object)
url:URL地址
options:参数键值对
None
打开指定的URL页面
URL可以是网络地址,如$page.open('nextpage.jsp');
也可以是本地资源文件名,如:$page.open('nextpage.xml');
options的参数为:
target:String:打开方式
  _self:当前窗口打开
  _blank:新窗口打开,默认值
  _browser:用外部浏览器打开网址
animation:String:页面切换动画
  fade-in-out:淡入淡出
  down-to-up:从下向上弹出
  right-to-left:从右向左弹出
  move-to-left:从右向左切换
  zoom-forward:向前放大切换
  zoom-out:向后缩小切换
close() None None 关闭当前页面
close(num:Number) num:整数,指定关闭的页面 None 根据num的值关闭指定的页面。
● 当num为0时关闭当前页面。
● 当num为负数时表示关闭指定的页面,如$page.close(-1)表示关闭前一个页面。
● 当num为正数时表示关闭至指定的页面,如$page.close(1)表示关闭至前一个页面,会关闭当前页和前一页共两个页面。
close(
num:Number,
script:String)
num:整数,指定关闭的页面
script:页面关闭后执行的Javascript脚本
None num:根据num的值关闭指定的页面。
● 当num为0时关闭当前页面。
● 当num为负数时表示关闭指定的页面,如$page.close(-1)表示关闭前一个页面。
● 当num为正数时表示关闭至指定的页面,如$page.close(1)表示关闭至前一个页面,会关闭当前页和前一页共两个页面。
script:这里的Javascript脚本会到页面关闭后返回的页面去执行,用于将当前页面返回的数据传递到前面的页面
refresh() None None 刷新当前页面
home() None None 回到主页
source() None None 显示当前页面XML源码
attachment() None None 进入附件管理页面
setting() None None 进入系统设置页面
about() None None 进入系统关于信息页面
waiting(message:String) message:等待提示信息 Object 弹出一个等待提示框,处理完成后再关闭。(此方法已废除,不建议使用,请用$http.progress()方法替代)
datePicker(
options:Object)
options:参数键值对 None
弹出日期选择框,其中options的参数为:
format:String,格式化返回的日期值
complete:Function(date:String),选择完日期后的回调函数
timePicker(
options:Object)
options:参数键值对 None
弹出时间选择框,其中options的参数为:
format:String,格式化返回的时间值
complete:Function(time:String),选择完时间后的回调函数
browse(options:Object) options:参数键值对 None
浏览并选择文件,其中options的参数为:
complete:Function(path:String),选择文件后的回调函数
browseImage(options:Object) options:参数键值对 None
浏览并选择图片,其中options的参数为:
maxWidth:Number,选择图片的最大宽度
maxHeight:Number,选择图片的最大高度
complete:Function(path:String),选择图片后的回调函数
graffiti(options:Object) options:参数键值对 None
手写签批,其中options的参数为:
type:String,手写签批模式,取值:
    draft:笔记模式
    sign:签名模式
complete:Function(path:String),选择文件后的回调函数
setTimeout(
code:Function,
millisec:Number)
code:Javascript脚本
millisec:在执行脚本前需等待的毫秒数。
None 在指定的毫秒数后调用方法
clearTimeout(id:Number) id:setTimeout()的返回值 None 取消由 setTimeout()设置的 timeout。
setInterval(
code:Function,
millisec:Number)
code:Javascript脚本
millisec:周期性执行 code之间的时间间隔,以毫秒计。
Number 可按照指定的周期(以毫秒计)来调用方法。setInterval()方法会不停地执行脚本,直到clearInterval()被调用或当前页被关闭。由setInterval()返回的 id值可用作 clearInterval()方法的参数。
clearInterval(id:Number) id:setInterval()的返回值 None 取消由 setInterval()设置的 interval。

控件详解

● 设置主页

<page type="home">
</page>

对于设置了type="home"的页面,调用$page.home()方法时会自动跳转到该页面,另外Android系统在返回时会提示“再按一次返回退出程序”。

● 设置全屏

<page screen="full">
</page>
$page.screen = 'full';

● 设置横屏

<page orientation="landscape">
</page>
$page.orientation = 'landscape';

● 设置onload方法

<page onload="hint('页面初始化时调用');">
</page>
$page.onload = function() {
    hint('页面初始化时调用');
};

注意:在$page.onload里调用alert()或confirm()会阻塞UI线程,需要加setTimeout()延时一段时间,如:

$page.onload = function() {
    $page.setTimeout(function() {
        alert('页面初始化时调用');
    }, 500);
};

● 设置onunload方法

<page onunload="hint('页面关闭时调用');">
</page>
$page.onunload = function() {
    hint('页面关闭时调用');
};

● 设置onactive方法

<page onactive="hint('页面激活时调用');">
</page>
$page.onactive = function() {
    hint('页面激活时调用');
};

● 设置oninactive方法

<page oninactive="hint('页面挂起时调用');">
</page>
$page.oninactive = function() {
    hint('页面挂起时调用');
};

● 打开页面

$page.open('nextpage.jsp');

$page.open('nextpage.jsp', {target:'_blank'});

$page.open('nextpage.jsp', {target:'_self'});

$page.open('http://www.baidu.com', {target:'_browser'}); //用外部浏览器打开

$page.open('nextpage.xml');

$page.open('nextpage.xml?username=Terry');

说明 :nextpage.xml是本地资源文件,参数username将传到下一个页面,在下个页面可以在Javascript中通过$param['username']来获取这个值。 如果参数有中文需要用encodeURIComponet()来编码,如$page.open('nextpage.xml?username=' + encodeURIComponet('用户名'));相应的下个页面用decodeURIComponent()解码,如decodeURIComponent($param['username'])

● 页面切换动画

$page.open('nextpage.xml', {animation:'fade-in-out'}); //页面淡入淡出

$page.open('nextpage.xml', {animation:'down-to-up'}); //从下向上弹出

$page.open('nextpage.xml', {animation:'right-to-left'}); //从右向左弹出

$page.open('nextpage.xml', {animation:'move-to-left'}); //从右向左切换

$page.open('nextpage.xml', {animation:'zoom-forward'}); //向前放大切换

$page.open('nextpage.xml', {animation:'zoom-out'}); //向后缩小切换

● 关闭页面

$page.close();

$page.close(0);

说明 :关闭当前页。

$page.close(-1);

说明 :关闭上一页。

$page.close(1);

说明 :关闭当前页和上一页。

var users = 'Terry,Vic,Jack';
$page.close(0, 'setUsers("' + users + '")');

说明 :关闭当前页,并执行上一页的Javascript中定义的setUsers方法,通过回调的方式来向上一页传递参数。

● 刷新当前页

$page.refresh();

● 回到主页

$page.home();

● 显示源码

$page.source();

效果:

● 管理附件

$page.source();

效果:

● 系统设置

$page.setting();

● 关于客户端

$page.about();

等待提示框(已废除)

注意:此方法已废除,不建议使用,请用$http.progress()方法替代。

var dialog = $page.waiting('等待框|正在访问baidu.com,请稍后...');
$http.get('http://www.baidu.com', function() {
    dialog.close();
    hint('访问成功');
});

效果:

上面的例子弹出一个等待提示框之后去访问网络,处理完成后调用close()方法关闭等待框。提示信息的标题和内容用竖线“|”分割。

● 选择日期

$page.datePicker({
    format: 'yyyy年MM月dd日',
    complete: function(date){
        hint('选择日期:'+ date);
    }
});

效果:

● 选择时间

$page.timePicker({
    complete: function(time) {
        hint('选择时间:'+ time);
    }
});

效果:

● 选择文件

$page.browse({
    complete: function(path) {
        hint('选择文件路径:'+ path);
    }
});

效果:

● 选择图片

$page.browseImage({
    complete: function(path) {
        hint('选择图片路径:'+ path);
        $('test_icon').src = path;
    }
});

效果:

● 浏览图片

$page.gallery([
    {src:"http://i.5211game.com/upload/twitter/201204/01/6346890281596754082131-800-556_y.jpg", title:"魂守,死骑", alt:"后期,奶妈"},  
    {src:"http://img0.pcgames.com.cn/pcgames/1105/24/2220035_1.jpg", title:"DOTA大集合", alt:"各种东东"}, 
    {src:"http://s1.img.766.com/194/120117/0925/145099.jpg", title:"剑圣", alt:"GANK"},
    {src:"http://img.zmrgame.com/dota/guide/201303011420206418.jpg", title:"幽鬼", alt:"超级后期"}
]);

效果:

● 手写签批笔记模式

$page.graffiti({
      type: 'draft',
      complete: function(path){
          hint('笔记图片路径:'+ path);
      }
});

效果:

● 手写签批签名模式

$page.graffiti({
    type: 'sign',
    complete: function(path){
        hint('签名图片路径:'+ path);
    }
});

效果:

● 设置timeout

$page.setTimeout(function() {
    hint('3秒后执行');
}, 3000);

● 设置interval

$page.setInterval(function() {
    hint('每隔3秒执行');
}, 3000);

说明:$page.setTimeout()和$page.setInterval()会使手机处于唤醒状态,可以用来执行后台定时任务,系统待机时程序仍会运行。

示例下载

点此下载page相关的示例代码:imag-page.zip