如何使用Jquery UI Tabs构造函数方法？

I am using Asp.net MVC and I been trying to use Ajax UI tabs in jquery.

我正在使用Asp.net MVC,我一直在尝试在jquery中使用Ajax UI选项卡。

On the demo site: http://jqueryui.com/demos/tabs/#ajax

在演示网站上:http://jqueryui.com/demos/tabs/#ajax

It has this

它有这个

Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.

通过在选项卡链接中设置href值,通过Ajax获取选项卡的外部内容。当Ajax请求等待响应时,选项卡标签会更改为“正在加载...”,然后在加载后返回到正常标签。

I never see the tabs change to loading in their demo. So I decided to try to make my own example.In my asp.net mvc application I set a href to a action view that loads up a partial view. In this action view I put a sleep thread of "5000".

我从未在他们的演示中看到标签更改为加载。所以我决定尝试自己创建一个示例。在我的asp.net mvc应用程序中,我将href设置为一个加载局部视图的动作视图。在这个动作视图中,我放了一个“5000”的睡眠线程。

Yet I never see this "loading...." they talk about, even with me slowing down the request and checking.

然而,即使我放慢了请求和检查的速度,我也从未看到过这种“加载......”。

I then was looking at the constructor methods and I don't get how to use them for instance I was looking at the spinner option it has

然后我看着构造函数方法,我不知道如何使用它们,例如我正在查看它有的spinner选项

spinner

Type: String Default: 'Loading…'

类型:字符串默认值:'正在加载'

The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. Code examples

加载远程内容时,此字符串的HTML内容显示在选项卡标题中。传入空字符串以停用该行为。代码示例

Initialize a tabs with the spinner option specified.

使用指定的微调器选项初始化选项卡。
$('.selector').tabs({ spinner: 'Retrieving data...' });
Get or set the spinner option, after init.

在init之后获取或设置微调器选项。
//getter
var spinner = $('.selector').tabs('option',
'spinner'); //setter $('.selector').tabs('option', 'spinner', 'Retrieving data...');

'微调'); // setter $('。selector')。tabs('option','spinner','Retrieving data ...');

So I did what was said and I put that line in my jquery and changed it to the real div that I have.

所以我做了所说的话,我把那条线放在我的jquery中,并把它改成了我所拥有的真正的div。

I don't see this spinner either so I don't know what I am missing. Do I have to do something else?

我也没有看到这个旋转器所以我不知道我错过了什么。我还需要做别的吗?

My JavaScript code:

我的JavaScript代码:

<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>

Edit

Thanks to "redSquares" post I now know why mine is not working but I use Html.ActionLink. So how can I form my Html.ActionLink to have the span tag? Or do I have to make my own Html helper?

感谢“redSquares”帖子,我现在知道为什么我的不工作但是我使用的是Html.ActionLink。那么如何构建我的Html.ActionLink以获得span标签?或者我是否必须制作自己的Html助手?

2 个解决方案

#1

You need to put that spinner part wherever you're first starting tabs, probably in your document ready function. Put { spinner: 'Retrieving data...' } inside of the tabs.tabs(x).

您需要将该微调器部件放在您首次启动选项卡的位置,可能在您的文档就绪功能中。将{spinner:'正在检索数据...'}放在tabs.tabs(x)中。

Most times it will load so fast you won't see it, and that's a good problem to have.

大多数情况下它会加载得如此之快,你将无法看到它,这是一个很好的问题。

You can see an example of this in action at sneakyness.com, my current project

你可以在我目前的项目sneakyness.com上看到这个例子

#2

You need to put a span within the anchor. Nice of the docs to explain this!

您需要在锚点中放置一个范围。很好的文档来解释这个!

e.g

<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

#1