tabMark


简介:

本插件用于多窗口内容浏览,用户通过滑动切换各个窗口,或者通过点击顶部menu栏切换各个窗口.各窗口内容支持本地网页文件和网络的url链接.通过rd.require("tabMark")方法获取该对象.每require一次,就会获取一个新的tabMark对象.在使用中注意作用域以及重复require.

方法:

对象:

回调方法:

setDataSource


设置数据源.此方法要在调用show之前设置.优先级最高.

tabMark.setDataSource(dataSources);
说明:

通过此方法,设置插件所需要的数据源.包括menu标题,每个menu对应的窗口的内容url,以及menu的样式等参数.详细内容参考dataSources对象.

参数:
  • dataSources: ( dataSources ) 必选 数据源,详细内容请点击链接查看.
返回值:

无返回值

示例:
    //注意  在整篇文档中,此对象只创建一次. 请不要重复创建.
     var  tabmark  = rd.require("tabMark");
        var  dataSources = {
            titleFont:12.0, //文字大小
            titleHighlightFont:15.0,//文字高亮大小
            titleColor:"#000000",//文字颜色
            titleHighlightColor:"#FF0000",//文字高亮颜色
            vernierColor:"#000000",//游标颜色
            naviBgColor:"#D1D1D1",//导航条背景色
            btnHeight:36.0,//导航条(按钮)高度
            manyBtn:false,//true:多按钮模式(自适应按钮宽度)  false:自动等距分割
            editButtonImg:"abc.png",//编辑按钮图片
            interval: true, //分割线,android不支持
            naviHidden:false, //是否隐藏导航条
            defaultIndex:4,//默认开启的页面 
            dataSource:[
                        {menu:'百度1',
                        url:'device.html'
                        },
                        {menu:'新浪2',
                        url:'alert.html'
                        },
                        {menu:'腾讯3',
                        url:'windowTest.html'
                        },
                        {menu:'搜狐4',
                        url:'refresh.html'
                        },
                        {menu:'新浪1',
                        url:'refresh.html'
                        },
                        {menu:'腾讯1',
                        url:'refresh.html'
                        },
                        {menu:'搜狐1',
                        url:'refresh.html'
                        },
                        {menu:'网易5',
                        url:'video.html'
                        }
                        ]
        }
    tabmark.setDataSource(dataSources);

setFrame


设置尺寸及位置.

tabMark.setFrame(rect);
说明:

通过此方法,设置插件将要显示的位置及尺寸.

参数:
  • rect: ( rect ) 必选 frame,如果width为0,延伸到屏幕右边,如果height为0,延伸到屏幕下面
返回值:

无返回值

示例:
var rect = {x:0,y:0,width:0,height:0};
tabMark.setFrame(rect);

show


显示插件,暂不支持横屏

tabMark.show();
说明:

通过此方法,显示插件.

参数:

无.

返回值:

无返回值

示例:
tabMark.show();

hide


隐藏插件.

tabMark.hide();
说明:

通过此方法,隐藏已经显示的插件.

参数:

返回值:

无返回值

示例:
tabMark.hide();

remove


移除插件.

tabMark.remove();
说明:

通过此方法,移除插件.

参数:

返回值:

无返回值

示例:
tabMark.remove();

addEditCallback


添加编辑按钮点击事件回调.

tabMark.addEditCallback(editCallback);
说明:

当编辑按钮被设置时,可以为编辑按钮添加回调事件,通过此回调通知开发者编辑按钮被点击.

参数:
  • editCallback: ( editCallback ) 必选 编辑按钮被点击回调方法,详细内容请点击链接查看.
返回值:

无返回值

示例:
    function editCallback(){
      alert('点击了编辑按钮');
    }

    tabmark.addEditCallback(editCallback);

addScrollCallback


添加滚动事件回调.

tabMark.addScrollCallback(scrollCallback);
说明:

当内容区域切换时,通过此方法添加的回调函数通知开发者.

参数:
  • scrollCallback: ( scrollCallback ) 必选 内容滚动回调方法,详细内容请点击链接查看.
返回值:

无返回值

示例:
function scrollCallback(index){
    alert(index);
}
tabmark.addScrollCallback(scrollCallback);

showContentAtIndex


切换内容.

tabMark.showContentAtIndex(index);
说明:

通过此方法,切换当前显示内容.也可以通过滑动内容视图或者点击导航栏选项实现.

参数:
  • index: ( Number ) 必选 视图位置 取值范围 1~内容视图个数.
返回值:

无返回值

示例:
tabMark.showContentAtIndex(1);

addIgnoreArea


添加忽略手势窗口区域(如页面有其他滑动效果,与tabmark产生手势冲突),需要在tabMark.setFrame之前执行

addIgnoreArea(menuName,IgnoreParams)
说明:

该方法只用于安卓,iOS不需要执行此方法.

参数:
  • menuName: (String) 必选 tab menu名称(对应dataSource对象的menu属性),设置某个tab窗口忽略手势
  • IgnoreParams: (IgnoreParams ) 必选 窗口区域信息
返回值:

无返回值

示例:
var IgnoreParams = {
            x:0,
            y:0,
            width:500,
            height:500
        };


tabMark.addIgnoreArea("tab menu name",IgnoreParams);
平台支持:
  • android(支持)

Rect


JSON对象,frame参数

Rect 
{
    property Number x;
    property Number y;
    property Number width;
    property Number height;
}
说明:

坐标系统,左上角为(0,0),位于第四象限

属性:
  • x: ( Number ) 必选 x轴开始坐标 仅支持整型
  • y: ( Number ) 必选 y轴开始坐标 仅支持整型
  • width: ( Number ) 必选 如果width为0,延伸到屏幕右边 仅支持整型
  • height: ( Number ) 必选 如果height为0,延伸到屏幕下面 仅支持整型

IgnoreParams


JSON对象,用于addIgnoreArea方法的参数.

IgnoreParams
{
        property Number x;
        property Number y;
        property Number width;
        property Number height;
}
说明:

该参数被用于addIgnoreArea方法.仅用于安卓.dff

属性:
  • x : (Number) 必选 区域坐标x值.
  • y : (Number) 必选 区域坐标x值.
  • width : (Number) 必选 区域宽度.
  • height : (Number) 必选 区域高度.

dataSources


说明:

数据源.数组类型.用于设置本插件的数据源.包括menu栏的文字,图片,以及窗口的显示内容.

属性:
  • titleFont : ( String ) 必选 导航栏文字大小
  • titleHighlightFont : ( String ) 必选 选中状态,导航栏文字大小
  • titleColor : ( String ) 必选 导航栏文字颜色
  • titleHighlightColor : ( String ) 必选 选中状态,导航栏文字颜色
  • vernierColor : ( String ) 必选 游标颜色
  • naviBgColor : ( String ) 必选 导航栏背景色
  • btnHeight : ( Number ) 必选 导航栏高度(每个按钮的高度)
  • manyBtn : ( Boolean ) 必选 多按钮状态,true(自适应按钮宽度) false:(自动等距分割)
  • editButtonImg : ( String ) 必选 编辑按钮的图片 当manyBtn为true,并且EditButtonImg有值时,编辑按钮才会显示
  • interval : ( Boolean ) 必选 是否显示分割线 true:显示 false:不显示,Android不支持
  • naviHidden : ( Boolean ) 必选 导航栏隐藏. true:隐藏 false:不隐藏导航栏
  • defaultIndex : ( Number ) 必选 设置默认显示第几个视图内容
  • dataSource : ( Array ) 必选 内容视图数组.
    • menu : ( String ) 必选 内容视图的标题.用于显示在导航栏.
    • url : ( String ) 必选 内容视图的url.

editCallback


编辑按钮点击监听回调

    function editCallback(){

    }
说明:

当点击编辑按钮时,通过此方法通知

参数:

scrollCallback


内容滚动(切换)回调.当内容视图切换时,通过此回调函数通知.

function scrollCallback(index){

}
说明:

通过此回调函数返回内容视图在数组中的位置.

参数:
  • x : (Number) 必选 内容视图在数组中的位置.