jqueryツールタブ tab/tab_jquery

便利で使いやすいのですが、個人的には UI のパフォーマンスがあまり良くないように感じています。今日偶然目にした jquery tools は、jquery に基づいた UI パフォーマンス フレームワークで、その UI 関数の表示形式が flex に似ています。 。このフレームワークは、タブ (タブ/タブ) オーバーレイ (オーバーレイ)、ツールヒント (プロンプト ボックス)、スクロール可能 (スクロール情報バー)、エクスポーズ (強調表示)、フラヘンベッド (ビデオ再生埋め込み) の 6 つの主要なカテゴリの機能を提供します (公式 Web サイトではこれら 6 つの主要な機能カテゴリにはそれぞれ独自の独立したサポート パッケージがあり、ユーザーはそれぞれのニーズに応じてダウンロードできるため、ページの読み込みに対する js ファイルのダウンロードの影響が軽減されます。スピードの影響。機能はそれほど包括的ではありませんが、少数ながら洗練されていると言えます。これらはすべて現在一般的に使用されている機能であり、jquery uiのいくつかの欠点を十分に補い、jqueryのUI機能を一定まで強化できます。範囲。実際、私が最も高く評価しているのは、開発コストを効果的に管理しながらユーザー エクスペリエンスを大幅に向上できるフレックスライクなスタイルです。
今日はjqueryツールのタブを詳しく調べて、公式ドキュメントに基づいてまとめてみましょう。
まず、操作のターゲット HTML コードを指定します:

コードをコピーします コードは次のとおりです:

• tab1
  
• tab2


• tab3< /a>





タブは Web 上で最も人気のあるユーザー インターフェイス コンポーネントであり、それには十分な理由があります。それらは直感的に使用でき、何よりもページをより使いやすく整理できます。 /p>
テーブル コンテンツテーブル 2 を開く




ファウシバス・オルシ・ルクタスとウルトリス・キュビリア・キュラエ。



tab3 content

>この関数は jqueryObject.tabs(
1. $("ul.tabs-t").tabs("div.tabsContent>div") //このメソッドはタブを単純に整理できます
2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //このメソッドは設定オブジェクトを使用してタブを整理し、さまざまなタブ表示に適しています。
3. $("ul.tabs-t").tabs("div.tabsContent>div" ,callback function) //コールバック関数を通じてタブに対してさらなる操作を実行します。
以下は、2 の構成オブジェクト パラメーターの実装と説明です。




コードをコピーします


コードは次のとおりです:

current:'current',//为当前tab的增加的class名称，默认为current
effect:"fade",//每个tab的panel内容显示方式为从整体逐渐显示
//effect:"slide",//点击tab的panel出现在当前tab的panel下面，并覆盖掉当前panel
//effect:"horizontal",//当前tab的panel逐渐从右向左收缩并最终消失，点击panel的内容占据相应位置，比较适合水平导航
fadeInSpeed:1000,//设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒
event:"mouseover",//指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有“mouseover”,"dbclick"
history:true,//类似javascript的history功能，默认为false,当用户点击浏览器的前进后后退按钮后，如果此处设置为true,那么就会回退到上次点击的tab，而不是跳转到其他页面去
initialIndex:1,//设置默认显示的tab
tabs:"a",//设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器
api:false,//设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。
onBeforeClick:function( index){
//alert(this.getCurrentTab().text());//返回当前tab的名称
return true;
},//在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引
onClick:function(index){
return true;
}//在tab被点击的时候调用的函数，其他用法同onBeforeClick

更直观的说明如下：

属性名称	默认值	描述
current	'current'	为当前tab的增加的class名称
effect	default'	fade':每个tab的panel内容显示方式为从整体逐渐显示;面，并覆盖掉当前panel
		'slide':点击tab的panel出现在当前tab的panel下
		horizontal':当前tab的panel逐渐从右向左收缩并最终消失，点击panel的内容占据相应位置，比较适合水平导航
fadeInSpeed	200	设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒
event	'click'	指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有“mouseover”,"dbclick"
history	FALSE	类似javascript的history功能当用户点击浏览器的前进后后退按钮后，如果此处设置为true,那么就会回退到上次点击的tab，而不是跳转到其他页面去
initialIndex	0	设置默认显示的tab
tabs	a'	设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器
api	FALSE	设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。
onBeforeClick	null	在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引
onClick	null	在tab被点击的时候调用的函数，其他用法同onBeforeClick

此外，tabs也提供了获取tabs的一系列方法，具体实现及说明如下：

复制代码 代码如下:

var api=$("ul.tabs-t").tabs();//先通过获取tab容器获取tab
//api.next();//跳转到下一个tab
//api.click();
//alert(api.getConf().tabs);//返回api的配置对象，这里获取配置对象的tabs属性的值
api.getCurrentPane();//获取当前的panel
api.getCurrentTab();//获取当前tab
api.getIndex();//获取当前tab的index
//alert(api.getPanes());//获取所有的panel
//alert(api.getTabs());//获取所有的tab
api.prev();//跳转到上一个tab
api.onBeforeClick=function(){
return true;
}//同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
api.onClick=function(){
return true;
}//同配置对象的Click，一个对象可以绑定多个Beforeclick事件

 更直观的说明如下：

方法	返回值	描述
getConf()	API	返回api的配置对象
getCurrentPane()	jQuery	获取当前的panel
getCurrentTab()	jQuery	获取当前tab
getIndex()	integer	获取当前tab的index
getTabs()	jQuery	获取所有的tab
getPanes()	jQuery	获取所有的panel
next()	API	跳转到下一个tab
prev()	API	Jump to the previous tab
onBeforeClick()	API	Same as BeforeClick of the configuration object, one object can be bound to multiple Beforeclick events
onClick()	API	//Same as the Click configuration object, one object can be bound to multiple Beforeclick events

Finally, take a few screenshots of its official website as the end of this article.

1.Normal tabs

2. Horizontally expanded tabs

3. Class prompt box

4.Guide