0

我有一组出现故障的 jquery datepickers，因为我将它们放在 jquery tabs 插件中，所以它们无法正常工作。

以下是代码：主页（索引）：

   <?php
include 'all.php';
?>
<html>
    <head>
        <meta charset=iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="maskMoney.js"></script>

        <title>Financeiro</title>
    </head>

    <body>
        <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>


        <div>
<div id="tabs">
    <ul>
        <li><a href="financeiro_ver.php">Buscar saída</a></li>
        <li><a href="financeiro_criar.php">Criar saída</a></li>
    </ul>
</div>
            </div>
        <script type="text/javascript" src="view.js"></script>
        <script type="text/javascript" src="create.js"></script>
    </body>
</html>

选项卡的 javascript 代码（指日期选择器）：选项卡 1（“Buscar saída”）：

$(
    function(){
        $("#data1 , #data2").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

选项卡 2（“Criar saída”）：

$(
    function(){
        $("#data").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

问题：受人尊敬的 javascript 效果仅在第一次打开选项卡时发生，如果您更改选项卡并且更改回它会崩溃。

PS.：moneyMask 也不起作用（在制表符之前工作），但我认为它是同一个问题的一部分。

4

2 回答 2

2

您需要对选项卡进行更多配置，因为您正在 ajax 加载它们。

当您在页面中的任何位置加载新 html 时，您需要在加载后将插件绑定到该新 html，即使它与它所替换的 html 具有相同的结构、ID 等。

您可以在load加载 ajax 内容后触发的选项卡选项中执行此操作。您可能还想查看cache在每个选项卡中仅加载一次 ajax 内容的选项。

 $( "#tabs" ).tabs({
      load: function(event, ui) {
        var $curr_panel=$(ui.panel);
         $curr_panel.find( selector).datepicker()
     }
 });

您还可以tabsload在代码中的任何位置绑定到事件，而不仅仅是在选项卡初始化代码中。

请参阅选项卡文档中的事件选项卡

于 2012-06-17T20:04:17.080 回答
0

Insted of id#tabs使用一个类datepicker

<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker();
    });
</script>
于 2013-03-18T10:19:43.443 回答