0

jqueryタブプラグイン内に配置したため、機能しないjquery datepickerのセットが誤動作しています。

コードは次のとおりです。メインページ（インデックス）：

   <?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 コード (datepickers を参照): tab 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 と同じ構造、ID などを持っている場合でも、ロード後にその新しい html にプラグインをバインドする必要があります。

loadこれは、ajax コンテンツが読み込まれた後に起動するタブのオプション内で行うことができます。cacheまた、各タブで ajax コンテンツを 1 回だけロードするオプションを確認することもできます。

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

tabsloadタブの初期化コードだけでなく、コード内の任意の場所でイベントにバインドすることもできます。

タブドキュメントのイベントタブを参照してください

于 2012-06-17T20:04:17.080 に答える
0

id の代わりに#tabs、クラスを使用しますdatepicker

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