2009-07-21 15 views
0

Ich benutze Asp.net MVC und ich habe versucht, Ajax UI Tabs in jquery zu verwenden.Wie verwende ich Jquery UI Tabs Konstruktormethoden?

auf der Demo-Seite: http://jqueryui.com/demos/tabs/#ajax

Es hat diese

über Ajax externe Inhalte Fetch für die Tabs durch ein href Wert in den Registerkarten einstellen. Während die Ajax-Anfrage auf eine Antwort wartet, ändert sich die Registerkarte Etikett zu "Laden ...", kehrt dann zum normalen Etikett zurück, sobald geladen ist.

Ich sehe nie, dass die Registerkarten zum Laden in ihrer Demo wechseln. Also habe ich mich entschieden, ein eigenes Beispiel zu erstellen. In meiner asp.net mvc-Anwendung setze ich eine href auf eine Aktionsansicht, die eine Teilansicht lädt. In dieser Aktionsansicht lege ich einen Schlaffaden von "5000".

Noch nie sehe ich dieses "Laden ...." über das sie reden, auch wenn ich die Anfrage verlangsamte und überprüfte.

ich an den Konstruktormethoden suchte dann und ich nicht, wie sie zum Beispiel verwenden, war ich an der Spinner Option suchen, um es

Spinner

Typ hat: String Default: 'Laden …'

der HTML-Inhalt dieser Zeichenkette wird während Remote in einem Tab-Reiter gezeigt Inhalt wird geladen. Übergeben Sie eine leere Zeichenfolge , um dieses Verhalten zu deaktivieren. Codebeispiele

Initialisieren Sie eine Registerkarte mit dem Drehfeld Option angegeben.

$('.selector').tabs({ spinner: 'Retrieving data...' }); 

Erhalten oder den Spinner Option, nach init.

//getter 
var spinner = $('.selector').tabs('option', 

'Spinner'); // setter $ ('. Selector'). Tabs ('option', 'spinner', 'Daten abrufen ...');

Also tat ich, was gesagt wurde, und ich legte diese Zeile in meine jQuery und änderte es in das echte Div, das ich habe.

Ich sehe diesen Spinner auch nicht, also weiß ich nicht, was ich vermisse. Muss ich etwas anderes machen?

Mein JavaScript-Code:

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<link href="../../images/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> 

<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 


    <script type="text/javascript"> 
     $(function() { 

      // Tabs 
     $('#tabs').tabs({ spinner: 'Retrieving data...' }); 


     }); 
     </script> 

bearbeiten

Dank "redSquares" post Ich weiß jetzt, warum nicht von mir funktioniert, aber ich benutze Html.ActionLink. Wie kann ich meinen Html.ActionLink so gestalten, dass er das Span-Tag hat? Oder muss ich meinen eigenen HTML-Helfer machen?

+0

sehen, dass eine neue Frage ist :) Es wäre besser, diese Antwort zu akzeptieren und eine neue Frage zu stellen. Hilft Menschen, die diese Website durchsuchen und über Google finden Sie die richtige Information – redsquare

+0

Aber um die nächste Frage zu beantworten schauen Sie unter http://stackoverflow.com/questions/402605/create-an-actionlink-with-html-elements-in-the- Link Text – redsquare

Antwort

2

Sie müssen diese Spinner Teil setzen, wo immer Sie sind die ersten Zungen beginnen, wahrscheinlich in Ihrem Dokument bereit Funktion. Setzen Sie {spinner: 'Daten abrufen ...'} in die tabs.tabs (x).

Meistens wird es so schnell laden Sie werden es nicht sehen, und das ist ein gutes Problem zu haben.

Sie können ein Beispiel dafür in Aktion bei sneakyness.com, einem aktuellen Projekt

0

Sie müssen eine Spanne innerhalb des Ankers setzen. Nette Dokumentation, die das erklärt!

beispiel

<ul> 
    <li><span><a href="someUrl"><span>Spinner Needs this</span></a></li> 
    <li><a href="shomeUrl1"><span>Spinner Needs this</span></a></li>  
</ul> 

Demo here