便利で使いやすいのですが、個人的には UI のパフォーマンスがあまり良くないように感じています。今日偶然目にした jquery tools は、jquery に基づいた UI パフォーマンス フレームワークで、その UI 関数の表示形式が flex に似ています。 。このフレームワークは、タブ (タブ/タブ) オーバーレイ (オーバーレイ)、ツールヒント (プロンプト ボックス)、スクロール可能 (スクロール情報バー)、エクスポーズ (強調表示)、フラヘンベッド (ビデオ再生埋め込み) の 6 つの主要なカテゴリの機能を提供します (公式 Web サイトではこれら 6 つの主要な機能カテゴリにはそれぞれ独自の独立したサポート パッケージがあり、ユーザーはそれぞれのニーズに応じてダウンロードできるため、ページの読み込みに対する js ファイルのダウンロードの影響が軽減されます。スピードの影響。機能はそれほど包括的ではありませんが、少数ながら洗練されていると言えます。これらはすべて現在一般的に使用されている機能であり、jquery uiのいくつかの欠点を十分に補い、jqueryのUI機能を一定まで強化できます。範囲。実際、私が最も高く評価しているのは、開発コストを効果的に管理しながらユーザー エクスペリエンスを大幅に向上できるフレックスライクなスタイルです。
今日はjqueryツールのタブを詳しく調べて、公式ドキュメントに基づいてまとめてみましょう。
まず、操作のターゲット HTML コードを指定します:
タブは Web 上で最も人気のあるユーザー インターフェイス コンポーネントであり、それには十分な理由があります。それらは直感的に使用でき、何よりもページをより使いやすく整理できます。 /p>
テーブル コンテンツテーブル 2 を開く
ファウシバス・オルシ・ルクタスとウルトリス・キュビリア・キュラエ。
属性名称 | 默认值 | 描述 |
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 | 类似javas |
initialIndex |
0
|
设置默认显示的tab |
tabs |
a'
|
设置tab对应的标签元素,默认为"a",这里也可以设为"li",该处相当于jquery的选择器 |
api |
FALSE
|
设置当前tab所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。 |
on |
null
|
在tab被点击之前调用的函数,如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象,对于该对象的操作,参见tab相关方法;改返回函数有一个参数,为当前tab的索引 |
on |
null
|
在tab被点击的时候调用的函数,其他用法同on |
更直观的说明如下:
方法 | 返回值 | 描述 |
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 |
on |
API
|
Same as BeforeClick of the configuration object, one object can be bound to multiple Beforeclick events |
on |
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.
2. Horizontally expanded tabs
4.Guide