更好的构建jQuery的标签 [英] Better Way to Build jQuery Tabs

问题描述

我利用在ASP.NET MVC 2 Web应用程序jQuery UI的标签。该应用程序的一部分，需要我做的错误检查，当我从切换标签了。我做的是通过包含选项卡中的aspx文件中的这个脚本。

I am utilizing jQuery UI Tabs in an ASP.NET MVC 2 web application. One part of the application requires that I do error checking when I switch away from the tab. I am doing that via this script within the aspx file that contains the tabs.

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            cache: true,
            select: function (event, ui) {
                var $tabs = $('#tabs').tabs();
                switch ($tabs.tabs('option', 'selected')) {
                    case 0:
                        $.post("User/Personal", $("#PersonalForm").serialize(), function (data, success) {
                            if (success) {
                                $("#PersonalForm").html(data);
                            }
                        });
                        break;

                    case 1:
                        $.post("User/Account", $("#AccountForm").serialize(), function (data, success) {
                            if (success) {
                                $("#AccountForm").html(data);
                            }
                        });
                        break;

                    default:
                        break;
                }

                return true;
            },
            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab. We will fix this as soon as possible.");
                }
            }
        });
    });
</script>

有额外的开关语句（为简便起见删除）。基本上，这code允许在通过数据注解的选项卡发生MVC验证 - 工程非常漂亮。在任何情况下，我想知道是否有可能有这个code产生的基础上我有我的文档中的任何标签。 （如果不是，我基本都code有史以来case语句用手switch语句，这似乎是一种浪费之内。）

There are additional switch statements (removed for brevity). Basically, this code allows the MVC validation to occur on the tabs via data annotations - works very nicely. In any case, I was wondering if it is possible to have this code "generated" based on whatever tabs I have within my document. (If it isn't, I basically have to code ever case statement within the switch statement by hand, which seems kind of a waste.)

此外，作为一个侧面说明，我使用的ASP控制每个选项卡来保存各种数据（这也是其中个体形式驻留）。这可能使该溶液中的差。

Also, as a side note, I am using ASP controls for each tab to hold the various data (which is also where the individual forms reside). That may make a difference to the solution.

推荐答案

这code，当用户离开一个选项卡，经过你离开的标签上的每个表格，并发送一个Ajax请求，因为您$ C $℃。不同的是，它的数字从哪里发送基于表单的动作属性而不是在switch语句中指定这一点。这意味着 PersonalForm 的action属性必须是用户/个人等。

This code, when the user leaves a tab, goes through each form on the tab you're leaving and sends an ajax request as in your code. The difference is that it figures out where to send it based on the form's action attribute instead of having to specify this in the switch statement. This means PersonalForm's action attribute has to be User/Personal and so on.

select: function(e, ui) {
    var tab_index = $('#tabs').tabs('option', 'selected');
    var panel_id = $("ul li a:eq(" + tab_index + ")", this).attr("href");
    var panel = $(panel_id); //the content of the tab

    //For each form in the panel, submit it via AJAX and update its html according to the answer
    $(panel).find("form").each(function() {
        var that = this;
        $.post( $(this).attr("action"), $(this).serialize(), function(data, success) {
            if (success) {
                $(that).html(data);
            }
        });
    });
}

当然，如果你有在页面上不超过一个形式，你可以跳过每个，如果有应提交这样，只有某些形式，你可以将类添加到它们过滤选择

Of course, if you have no more than one form on the page you can skip the each and if there are only certain forms that should be submitted this way, you can add a class to them to filter the selection

这篇关于更好的构建jQuery的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！