UXC.Tab Class
Tab 菜单类
DOM 加载完毕后
, 只要鼠标移动到具有识别符的Tab上面, Tab就会自动初始化, 目前可识别: .js_autoTab( CSS class )
需要手动初始化, 请使用: var ins = new UXC.Tab( _tabSelector );
Tab 容器的HTML属性
tablabels: 声明 tab 标签的选择器语法
tabcontainers: 声明 tab 容器的选择器语法
tabactiveclass: 声明 tab当前标签的显示样式名, 默认为 cur
tablabelparent: 声明 tab的当前显示样式是在父节点, 默认为 tab label 节点
tabactivecallback: 当 tab label 被触发时的回调
tabchangecallback: 当 tab label 变更时的回调
Label(标签) 容器的HTML属性(AJAX)
tabajaxurl: ajax 请求的 URL 地址
tabajaxmethod: ajax 请求的方法( get|post ), 默认 get
tabajaxdata: ajax 请求的 数据, json
tabajaxcallback: ajax 请求的回调
require: jQuery
Constructor
UXC.Tab
-
_selector
-
_triggerTarget
Parameters:
Example:
<link href='../../../comps/Tab/res/default/style.css' rel='stylesheet' />
<script src="../../../lib.js"></script>
<script>
UXC.debug = 1;
UXC.use( 'Tab' );
httpRequire();
function tabactive( _evt, _container, _tabIns ){
var _label = $(this);
UXC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
if( UXC.Tab.isAjax( _label ) && ! UXC.Tab.isAjaxInited( _label ) ){
_container.html( '<h2>内容加载中...</h2>' );
}
}
function tabchange( _container, _tabIns ){
var _label = $(this);
UXC.log( 'tab change: ', _label.html(), new Date().getTime() );
}
$(document).ready( function(){
UXC.Tab.ajaxCallback =
function( _data, _label, _container ){
_data && ( _data = $.parseJSON( _data ) );
if( _data && _data.errorno === 0 ){
_container.html( printf( '<h2>UXC.Tab.ajaxCallback</h2>{0}', _data.data ) );
}else{
Tab.isAjaxInited( _label, 0 );
_container.html( '<h2>内容加载失败!</h2>' );
}
};
});
function ajaxcallback( _data, _label, _container ){
_data && ( _data = $.parseJSON( _data ) );
if( _data && _data.errorno === 0 ){
_container.html( printf( '<h2>label attr ajaxcallback</h2>{0}', _data.data ) );
}else{
Tab.isAjaxInited( _label, 0 );
_container.html( '<h2>内容加载失败!</h2>' );
}
};
</script>
<dl class="def">
<dt>UXC.Tab 示例 - 静态内容</dt>
<dd>
<div class="le-tabview js_autoTab" tablabels="ul.js_tabLabel > li > a" tabcontainers="div.js_tabContent > div"
tabactiveclass="active" tablabelparent="li"
tabactivecallback="tabactive" tabchangecallback="tabchange"
>
<ul class="le-tabs js_tabLabel">
<li class="active"><a href="javascript:">电视剧</a></li>
<li><a href="javascript:">电影</a></li>
<li><a href="javascript:">综艺</a></li>
<li><a href="javascript:">热点</a></li>
</ul>
<div class="views js_tabContent">
<div class="view-item active">1. 集地议送能拿距还杨雷火,永鲜提只风超洋轻绿动视落清各只江执口。</div>
<div class="view-item">2. 相送黄血富打万念却烟会华它表本雷烟形烟消卷效难标否标滑固小实。</div>
<div class="view-item">3. 理往局背剧养认被站推简沉形括於穿短,精白自没路绿往优八益是入。</div>
<div class="view-item">4. 鲁杆格滑那双来班五材实死听顶脱本续克修先课丝另乡型茶父报孔图。</div>
</div>
</div>
</dd>
</dl>
<dl class="def">
<dt>UXC.Tab 示例 - 动态内容 - AJAX</dt>
<dd>
<div class="le-tabview js_autoTab" tablabels="ul.js_tabLabel2 > li > a" tabcontainers="div.js_tabContent2 > div"
tabactiveclass="active" tablabelparent="li"
tabactivecallback="tabactive" tabchangecallback="tabchange"
>
<ul class="le-tabs js_tabLabel2">
<li class="active"><a href="javascript:">电视剧</a></li>
<li><a href="javascript:" tabajaxurl="data/test.php" tabajaxmethod="post"
tabajaxdata="{a:1,b:2}" tabajaxcallback="ajaxcallback" >电影</a></li>
<li><a href="javascript:" tabajaxurl="data/test.php" tabajaxcallback="ajaxcallback" >综艺</a></li>
<li><a href="javascript:" tabajaxurl="data/test.php" >热点</a></li>
</ul>
<div class="views js_tabContent2">
<div class="view-item active">1. 集地议送能拿距还杨雷火,永鲜提只风超洋轻绿动视落清各只江执口。</div>
<div class="view-item"></div>
<div class="view-item"></div>
<div class="view-item"></div>
</div>
</div>
</dd>
</dl>
Item Index
Methods
- _init
- active
- getInstance static
- isAjax static
- isAjaxInited static
Properties
- _model
- activeClass static
- activeEvent static
- ajaxCallback static
- ajaxRandom static
- autoInit static
Methods
_init
()
private
Tab 内部初始化方法
active
-
_label
把 _label 设置为活动状态
Parameters:
-
_label
Selector
getInstance
-
_selector
-
_setter
获取或设置 Tab 容器的 Tab 实例属性
Parameters:
-
_selector
Selector -
_setter
UXC.Tab_setter 不为空是设置
isAjax
-
_label
判断一个 label 是否为 ajax
Parameters:
-
_label
Selector
Returns:
isAjaxInited
-
_label
-
_setter
判断一个 ajax label 是否已经初始化过
这个方法需要跟 Tab.isAjax 结合判断才更为准确
Parameters:
-
_label
Selector -
_setter
Bool如果 _setter 不为空, 则进行赋值
Example:
function tabactive( _evt, _container, _tabIns ){
var _label = $(this);
UXC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
if( UXC.Tab.isAjax( _label ) && ! UXC.Tab.isAjaxInited( _label ) ){
_container.html( '<h2>内容加载中...</h2>' );
}
}
Properties
_model
private
Tab 模型类的实例
ajaxCallback
Function
static
全局的 ajax 处理回调
Default: null
Example:
$(document).ready( function(){
UXC.Tab.ajaxCallback =
function( _data, _label, _container, _textStatus, _jqXHR ){
_data && ( _data = $.parseJSON( _data ) );
if( _data && _data.errorno === 0 ){
_container.html( printf( '<h2>UXC.Tab.ajaxCallback</h2>{0}', _data.data ) );
}else{
Tab.isAjaxInited( _label, 0 );
_container.html( '<h2>内容加载失败!</h2>' );
}
};
});
ajaxRandom
Bool
static
ajax 请求是否添加随机参数 rnd, 以防止页面缓存的结果差异
Default: true
autoInit
Bool
static
页面加载完毕后, 是否要添加自动初始化事件
自动初始化是 鼠标移动到 Tab 容器时去执行的, 不是页面加载完毕后就开始自动初始化
Default: true