API Docs for: 0.2
Show:

JC.Tab Class

Tab 选项卡
响应式初始化, 当鼠标移动到 Tab 时, Tab 会尝试自动初始化 class = ".js_autoTab" 的 HTML 标签
需要手动初始化, 请使用: var _ins = new JC.Tab( _tabSelector );

require: JC.BaseMVC

JC Project Site | API docs | demo link

Tab 容器的HTML属性

tablabels
声明 tab 标签的选择器语法
tabcontainers
声明 tab 容器的选择器语法
tabactiveclass
声明 tab当前标签的显示样式名, 默认为 cur
tablabelparent
声明 tab的当前显示样式是在父节点, 默认为 tab label 节点
tabactivecallback
当 tab label 被触发时的回调
tabchangecallback
当 tab label 变更时的回调
tabQueryKey = url arg name
从URL默认选中tab, value = tab index, index 从0开始
tabTriggerDefault
页面初始化完毕时,是否实例化,并初始化当前选中标签

Label(标签) 容器的HTML属性(AJAX)

tabAjaxUrl
ajax 请求的 URL 地址
tabajaxmethod
ajax 请求的方法( get|post ), 默认 get
tabajaxdata
ajax 请求的 数据, json
tabajaxcallback
ajax 请求的回调
tabIframeUrl
iframe 显示的URL

Constructor

JC.Tab

(
  • _selector
  • _triggerTarget
)

Parameters:

  • _selector Selector | String

    要初始化的 Tab 选择器

  • _triggerTarget Selector | String

    初始完毕后要触发的 label

Example:

       <link href='../../../modules/JC.Tab/res/default/style.css' rel='stylesheet' />
       <script src="../../../lib.js"></script>
       <script src="../../../config.js"></script>
       <script>
           JC.debug = 1;
           requirejs( [ 'JC.Tab' ], function(){
               JC.f.httpRequire();
               JC.Tab.ajaxCallback =
                   function( _data, _label, _container ){
                       _data && ( _data = $.parseJSON( _data ) );
                       if( _data && _data.errorno === 0 ){
                           _container.html( JC.f.printf( '<h2>JC.Tab.ajaxCallback</h2>{0}', _data.data ) );
                       }else{
                           Tab.isAjaxInited( _label, 0 );
                           _container.html( '<h2>内容加载失败!</h2>' );
                       }
                   };
           });
           function tabactive( _evt, _container, _tabIns ){
               var _label = $(this);
               JC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
               if( JC.Tab.isAjax( _label ) && ! JC.Tab.isAjaxInited( _label ) ){
                   _container.html( '<h2>内容加载中...</h2>' );
               }
           }
           function tabchange( _container, _tabIns ){
               var _label = $(this);
               JC.log( 'tab change: ', _label.html(), new Date().getTime() );
           }
           function ajaxcallback( _data, _label, _container ){
               _data && ( _data = $.parseJSON( _data ) );
               if( _data && _data.errorno === 0 ){
                   _container.html( JC.f.printf( '<h2>label attr ajaxcallback</h2>{0}', _data.data ) );
               }else{
                   Tab.isAjaxInited( _label, 0 );
                   _container.html( '<h2>内容加载失败!</h2>' );
               }
           };
       </script>
       <dl class="def">
           <dt>JC.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>JC.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

Properties

Methods

_init

() private

Tab 内部初始化方法

_init

() private

Tab 内部初始化方法

active

(
  • _label
)

把 _label 设置为活动状态

Parameters:

  • _label Selector

active

(
  • _label
)

把 _label 设置为活动状态

Parameters:

  • _label Selector

activeEvent

()

获取 Tab label 的触发事件名称

Returns:

string

getInstance

(
  • _selector
  • _setter
)
static

获取或设置 Tab 容器的 Tab 实例属性

Parameters:

  • _selector Selector
  • _setter JC.Tab

    _setter 不为空是设置

getInstance

(
  • _selector
  • _setter
)
static

获取或设置 Tab 容器的 Tab 实例属性

Parameters:

  • _selector Selector
  • _setter JC.Tab

    _setter 不为空是设置

init

(
  • _selector
)
Array of TabInstance static

初始化可识别的 Tab 实例

Parameters:

  • _selector Selector

Returns:

Array of TabInstance:

isAjax

(
  • _label
)
String | Undefined static

判断一个 label 是否为 ajax

Parameters:

  • _label Selector

Returns:

String | Undefined:

isAjax

(
  • _label
)
String | Undefined static

判断一个 label 是否为 ajax

Parameters:

  • _label Selector

Returns:

String | Undefined:

isAjaxInited

(
  • _label
  • _setter
)
static

判断一个 ajax label 是否已经初始化过
这个方法需要跟 Tab.isAjax 结合判断才更为准确

Parameters:

  • _label Selector
  • _setter Bool

    如果 _setter 不为空, 则进行赋值

Example:

   function tabactive( _evt, _container, _tabIns ){
       var _label = $(this);
       JC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
       if( JC.Tab.isAjax( _label ) && ! JC.Tab.isAjaxInited( _label ) ){
           _container.html( '<h2>内容加载中...</h2>' );
       }
   }

isAjaxInited

(
  • _label
  • _setter
)
static

判断一个 ajax label 是否已经初始化过
这个方法需要跟 Tab.isAjax 结合判断才更为准确

Parameters:

  • _label Selector
  • _setter Bool

    如果 _setter 不为空, 则进行赋值

Example:

   function tabactive( _evt, _container, _tabIns ){
       var _label = $(this);
       JC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
       if( JC.Tab.isAjax( _label ) && ! JC.Tab.isAjaxInited( _label ) ){
           _container.html( '<h2>内容加载中...</h2>' );
       }
   }

isIframe

(
  • _label
)
String | Undefined static

Parameters:

  • _label Selector

Returns:

String | Undefined:

isIframeInited

(
  • _label
  • _setter
)
static

判断一个 iframe label 是否已经初始化过
这个方法需要跟 Tab.isIframe 结合判断才更为准确

Parameters:

  • _label Selector
  • _setter Bool

    如果 _setter 不为空, 则进行赋值

Example:

   function tabactive( _evt, _container, _tabIns ){
       var _label = $(this);
       JC.log( 'tab ', _evt.type, _label.html(), new Date().getTime() );
       if( JC.Tab.isIframe( _label ) && ! JC.Tab.isIframeInited( _label ) ){
           _container.html( '<h2>内容加载中...</h2>' );
       }
   }

Properties

_model

private

Tab 模型类的实例

_model

private

Tab 模型类的实例

activeClass

String static

label 当前状态的样式

Default: cur

activeClass

String static

label 当前状态的样式

Default: cur

activeEvent

String static

label 的触发事件

Default: click

activeEvent

String static

label 的触发事件

Default: click

ajaxCallback

Function static

全局的 ajax 处理回调

Default: null

Example:

       $(document).ready( function(){
           JC.Tab.ajaxCallback =
               function( _data, _label, _container, _textStatus, _jqXHR ){
                   _data && ( _data = $.parseJSON( _data ) );
                   if( _data && _data.errorno === 0 ){
                       _container.html( JC.f.printf( '<h2>JC.Tab.ajaxCallback</h2>{0}', _data.data ) );
                   }else{
                       Tab.isAjaxInited( _label, 0 );
                       _container.html( '<h2>内容加载失败!</h2>' );
                   }
               };
       });

ajaxCallback

Function static

全局的 ajax 处理回调

Default: null

Example:

       $(document).ready( function(){
           JC.Tab.ajaxCallback =
               function( _data, _label, _container, _textStatus, _jqXHR ){
                   _data && ( _data = $.parseJSON( _data ) );
                   if( _data && _data.errorno === 0 ){
                       _container.html( JC.f.printf( '<h2>JC.Tab.ajaxCallback</h2>{0}', _data.data ) );
                   }else{
                       Tab.isAjaxInited( _label, 0 );
                       _container.html( '<h2>内容加载失败!</h2>' );
                   }
               };
       });

ajaxRandom

Bool static

ajax 请求是否添加随机参数 rnd, 以防止页面缓存的结果差异

Default: true

ajaxRandom

Bool static

ajax 请求是否添加随机参数 rnd, 以防止页面缓存的结果差异

Default: true

autoInit

Bool static

页面加载完毕后, 是否要添加自动初始化事件
自动初始化是 鼠标移动到 Tab 容器时去执行的, 不是页面加载完毕后就开始自动初始化

Default: true

autoInit

Bool static

页面加载完毕后, 是否要添加自动初始化事件
自动初始化是 鼠标移动到 Tab 容器时去执行的, 不是页面加载完毕后就开始自动初始化

Default: true