4

ここで初めて、そしてプログラマーよりもWebデザイナーの方が多いので、優しくしてください！; o）とにかく、タイトルが示すように、開いているダイアログウィンドウがあり、その中に日付ピッカーがあります。ユーザーが日付ピッカーを開いてから、ダイアログウィンドウの閉じるボタンをクリックすると、日付ピッカーも閉じられます。

これが私が現在持っているものです：

        <!--// Modal Windows -->        
        $.ui.dialog.defaults.bgiframe = true;
        $(function() {
            $('#advanced_search').dialog({
                autoOpen: false,
                width: 600,
                height: 400,
                modal: true,
                resizable: false,
                draggable: false,
                title: 'Advanced Search',
            });
            $('.adv_search').click(function() {
                $('#advanced_search').dialog('open');
            });
        });

        <!--// Date Picker -->
        $("#advanced_search .start_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });
        $("#advanced_search .end_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });

しかし、私はこれを行う方法について少し混乱しています。誰かアドバイスがありますか？よろしくお願いします！

ありがとうフィル

4

1 に答える 1

4

次のように、ダイアログにクローズコールバックを追加します。

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        } 
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});

これは、ダイアログが実際に開かれるまで、少し優れた、より単純なセレクターと日付ピッカーが作成されない包括的なアプローチです。したがって、ユーザーがダイアログにアクセスしない場合は、実行されるスクリプトが少なくなります。

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        }, 
        open: function(event, ui) {
          $(".start_date, .end_date", ui).datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
          });
        }
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});
于 2010-01-20T14:58:22.233 に答える