JQuery UI Tabs - Load AJAX Tab content -
All,
I'm using the jQuery UI nested tabs to consider this kind of structure There are 2 main tabs: Animals, Birds. Under the animal, two tabs "cats", "dogs" are both tabs "cat" and "dogs" should be loaded by AJX, when selected. So, the code for them is something like this:
& lt; Div id = "fragment-1" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ public / catstab" headline = "cat" & gt; & Lt; Span & gt; Cats & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ public / dogstab" title = "dog" & gt; & Lt; Span & gt; Dogs & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ("# tabs-loading-message") Show (); $ ('# fragment-1'). Tab ({cache: false, spinner: ''}) ;}); & Lt; / Script & gt;
The issue is, I want to maintain a normal device to load AJAX URLs. Formerly: When you click on cats or dogs, instead of going to content How can I get it? Just looking at the docs, noticing how to do it is as decided. Although the tab widget is not easy to use, and click the event for your own interpretation original tab functionality. You will need to define your CSS style, because it appears that the tab widget is for you. "
Cats "
div and " dogs "
div The loading should be reusable, if the call reload ("dogs")
from anywhere in the "dog"
tab, it's "dog" < / Code> tab content should be reloaded.
& lt; Div id = "fragment-1" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ public / catstab" headline = "cat" & gt; & Lt; Span & gt; Cats & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ public / dogstab" title = "dogs" & gt; & Lt; Span & gt; Dogs & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "normaldiv" & gt; & Lt; / Div & gt; & Lt; / Div & gt; $ (Document) .ready (function () {$ ('# fragment-1 a'). Click (function () {$ ('# commonDiv'). Load ($ (this) .attr ('href') );});}):
Comments
Post a Comment