問題タブ [jquery-ui-tabs]

ページでJavaScript関数を実行したいのですが、タブが表示されている場合のみです。

実際に2つの質問があります。私はajaxタブを使用していないので、タブが表示された後にのみコードを実行したい場合は、JavaScriptを「load」または「show」コールバックに入れますか？

上記の答えに応じて、私のコードは次のことを達成するためにどのように見えるでしょうか？

こんな感じにしたい

• タブ1が表示/ロードされたとき
• ->ここにJavaScriptを挿入
• tab2が表示/ロードされたとき
• ->ここに別のJavaScriptを挿入
• tab3が表示/ロードされたとき
• ->ここに別のJavaScriptを挿入
• 等

見つけることができるすべてのチュートリアルを調べ、ここで質問を調べ、jQuery UI Tabs ソースを読みましたが、まだこれを理解できません。

私の目標は、ナビゲーション番号に fx フェードとマウスオーバー効果を加えた、回転するコンテンツ ボックスを作成することです。

ここでほぼ動作するバージョンを見ることができます:
http://www.chesapeakelifemag.com/index.php/cl_new/index

ご覧のとおり、マウスオーバーは機能し、回転は機能しますが、効果は表示されません。これは私が取り組んでいるコードです

すべて 1 つの .tabs() 関数に入れる必要がある大量の引数をつなぎ合わせているように感じますが、それを試みると、マウスオーバー、fx、または回転の機能が壊れます。

誰か答えがありますか？

最愛のブラウザー IE (すべてのバージョン) と jquery のタブ UI コントロールに問題があります。ajax オプションを使用して、タブのコンテンツを読み込みます。問題は、同期的にそれを行う必要があるため、次のリクエストが非同期になることです。私にはうまくいかないか、非常にバグがあります。しかし、これは問題ではありません。問題は、IE が jquery コードを実行するたびにロックダウンする前に ui-state-processing を適用しないことです。ここでの IE の動作は、他のすべてのブラウザとは異なるようです。リクエストが処理されて処理が完了すると、クラスがタブ要素に適用され、すぐに消えてすべてが完了すると、奇妙な原因になります。

誰かこれが何であるか考えていますか? 既知の問題?

ところで、async オプションを true に設定すると完璧に動作します。

ティー

タブ内でアコーディオンを使用すると問題が発生しました。最初は非アクティブなアコーディオンは、タブが選択されたときにコンテンツを正しくレンダリングしません。読んでみると、非アクティブなタブには最初に display:none が設定されているため、アコーディオン内の div の高さが正しく計算されないことが原因であることがわかります。提案された解決策はどれもうまくいきません。誰かがこれを克服したり、回避したりしましたか?

問題のコード例を次に示します。

Web アプリケーションを作成しており、タブ ウィジェットを使用して、ほとんどの Web ブラウザーにあるタブ機能を複製したいと考えています。ユーザーができるようにしたい: タブを移動 (ソート) し、タブを動的に作成し、タブを動的に閉じる。

私が見つけた問題は、タブを閉じるにはそのインデックスが必要であり、他のタブを動的に開いたり、閉じたり、並べ替えたりできるという事実を考慮すると、閉じたいときにタブのインデックスを取得/取得する必要があることです。

jQuery UIの.tabs（）を使用してAJAXを介してコンテンツを取得しようとしていますが、デフォルトの動作では、ページ全体のコンテンツを取得します。特定の#idや複数の#idからコンテンツを取得するにはどうすればよいですか？

load:イベント（http://docs.jquery.com/UI/Tabs#event-load）を使用する必要があると感じていますが、これを理解するための支援が必要です。

例：

タブ付きコンテンツを取得および表示しているタブのあるページ。コンテンツの特定の領域を取得するために、最初の#the_tabsリンクの後に#contentを配置して取得しようとしましたが、ページ全体がまだ読み込まれています。

前のマークアップによって取得されているページ：

JS（セットアップ用）：

jQuery タブを使用するページに取り組んでいます。ほぼ完成ですが、ちょっと気になる点がありました。タブのコンテンツが使用可能なウィンドウの高さよりも長い場合、コンテンツの先頭まで自動的に下にスクロールします。画面の背後にあるのは、コンテンツの ID を指す単なるタグであるため、これは理にかなっています。ただし、タブ バーを表示するには上にスクロールする必要があるため、これはかなり面倒です。

window.scroll(0, 0) を tabsshow イベントに追加しようとしましたが、何もしませんでした。

jQuery タブをクリックしたときにページの上部にとどまる方法を知っている人はいますか?

次のように、現在選択されているタブの（数値）インデックスを取得できることを知っています。

イベント ハンドラの外部で、現在選択されているタブの ID を取得する方法はありますか? 「ID」によって、イベント リスナー コールバックに引数として渡される ui オブジェクトの文字列プロパティ (ui.panel.id) を参照していますが、コールバックの外でそれを実行しようとしています。

独自のソリューションをハックできることはわかっていますが、最初に車輪を再発明しないようにしたいと考えています。

タブの順序を変更してもコードが壊れないように、インデックスよりも ID を使用したいと考えています。これにより、少なくとももう少し堅牢で読みやすくなります。

これが私が理解できなかった何らかの方法で以前にカバーされていたら申し訳ありません。

私は JavaScript/Jquery にやや慣れていないので、通常は何時間も無駄に時間を費やして、物事を理解するまで戦いますが、知識が不足しているため、未知のより簡単な解決策が利用可能である可能性があるため、物事が複雑になっている可能性があります。

2 種類のデザインを切り替えるポートフォリオ ページの JQuery UI タブを既に正常に実装しています。その後、私が気に入った AJAX を使用してそれぞれを読み込むことができましたが、私の状況では、コンテンツを分離する以外にどのように役立つかはわかりません。

次に、ul.tabs の代わりにテキスト リンクの使用に切り替えたいと考えました。私は常にタブからスタイルを取り除き、基本的なテキスト リンクとして表示させてきましたが、これを行うより直接的な方法があると考え、リンクをタブ付き領域からサイドバーに移動したいと考えました。ただし、テキスト リンクに AJAX を読み込ませる方法がわかりませんでした。

それを理解しようとした後、UI タブは私が必要とするものでさえあるのだろうかと思いました。2 つのコンテンツ セット間で前後にフェード インおよびフェード アウトする方法としてのみ使用しました。

これを行うためのはるかに簡単な方法があると思いますか？

2 つのテキスト リンク、Ajax で読み込まれる 2 つの html ファイル、変更間のフェードイン。それだけです。

これが私がhtmlを望む方法です-

アクティブな li a にクラスを追加するのもいいと思います。そうすれば、スタイルを変えてテキスト カーソルを与えることができます。

ほんの数行の JavaScript/JQuery でこれを行うことはできますか?

また、JavaScript が無効になっている場合、両方の html ファイルを一度にロードする noscript メソッドはありますか?

無知で申し訳ありません。私はとても幸せで、助けに感謝します。

アップデート：

タブは気にしません。それらは素晴らしく、非常に使いやすいです。しばらくの間、彼らに私のポートフォリオを管理してもらいました。私は機能をほとんど使用していないことを知っており、重量に値するものではありません.

このサイトはしばらくダウンしていたので、あなたがくれたコードを自分で見つけようとして行き詰まりました。あなたが持っていたように、私はそれをうまく機能させることができませんでした。追加機能は私を混乱させました。クリックする前に何が追加されているのかわかりませんでした。しかし、試行錯誤を繰り返して、ほぼ完璧に機能させることができましたが、非表示セクションのフェードインとフェードアウトはすべてめちゃくちゃでした. 見える部分は完璧でした。

これが私が思いついたものです。私が言ったように、私は学習プロセスに深く関わっているので、何らかの理由で間違っている場合はこのコードを許してください.

フェードの問題を解決しようとするのをあきらめて、別のものに移りました。必要に応じてスタイルを設定できるように、クラスをクリックするたびにクラスを追加および削除できたときは、かなり誇りに思っていました。

提供されたコードを使用してページをロードしたところ、機能しているように見えます。フェードを追加するだけです。

読み込まれる html ページは、特定の方法で作成する必要がありますか? 現在、元のページ内にあった要素のグループだけで、他には何もありません。単独で見ると、CSS スタイルやその他の要素はありません。私は何かが欠けていますか、それとも JS が無効になっている人にとってはこれだけですか?

私はあなたの助けに感謝します。楽しく学べます。少し前に html と css をマスターしましたが、そろそろこれを学ぶ時が来ました。最初は恐ろしくもありましたが、徐々に概念を理解し始めていると思います。

再度、感謝します。

jquery UI タブの各インデックスに関数をバインドするにはどうすればよいですか?

たとえば、3 部構成のスライド サインアップを作成しています。ステップ 1 はフォームであり、検証があります。そのためのコードをステップ 1 のロード内に配置し、タブにクラスを追加して #2 と #3 を無効にします。 1 のときは #1 を無効にし、#2 のときは #3 を無効にします