0

リンクをクリックすると、[後でダウンロード] ボタンをクリックするとダイアログ ボックスがポップアップし、ボタンのチェック済み変数が切り替わります。次に、ダイアログボタンを閉じます

Javascript と Jquery は初めてで、自分が何をしているのかわかりません

    $(function download_box(checkbox) {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#opener" ).click(function() {
            $( "#dialog-download" ).dialog( "open" );
            return false;
        });

        $( "#dialog-download" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            width:325,
            modal: true,
            buttons: {
                "Download Now": function() {
                    var mycheckbox1 = document.getElementById(checkbox);
                    if(mycheckbox1.checked){
                        box.checked=false;
                    }
                    else{
                        box.checked=true;
                    }
                    $( this ).dialog( "close" );
                },              
                "Download Later": function() {
                    $('#c2').prop("checked", true);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

<form method="post" action="<?php echo $PHP_SELF;?>">
   <a id="opener" href="#" OnClick="download_box('#c1')">db1.csv:</a>
   <input id="c1" type="checkbox" name="download[]" value="db1.csv" />
   <!-- ... -->
   <input type="submit" value="submit" name="submit">
</form>
4

1 に答える 1

1

すべてのアンカー タグにオープナーのクラスを指定し、クリック関数をそのアンカーにバインドして、ダイアログのオプションを設定しました。オプションセットは、主にフォームに配置したいボタンとそれに対応する機能です。このメソッドを使用したのは、関数を少し動的にする必要があったため、最初にダイアログを作成するときに関数を宣言できなかったためです。ボタンはチェックボックスを切り替え、後でダウンロードするボタンはチェックボックスをクリックしてダイアログを閉じ、最後に閉じるボタンは単にダイアログを閉じます。

いくつかの注意点があります。ページごとに特定の ID を持つ要素は 1 つだけであるべきであるため、opener の ID を持つ 9 つのアンカー タグがあると問題が発生します。また、jquery を使用すると、関数を html 要素のイベントにバインドするのは非常に簡単です。これは、関数を html 内にインラインでアタッチする (onclick=download_box) よりも好ましい方法です。

HTML

<div id="dialog-download" title="Download Now?">
    <p><span style="float:left; margin:0 7px 20px 0;"></span>Download the file now or later?</p>
</div>    
<form method="post" action="<?php echo $PHP_SELF;?>">
<a class="opener" href="#">db1.csv:</a>
<input id="c1" type="checkbox" name="download[]" value="db1.csv" /><br />
<a class="opener" href="#" >db2.csv:</a>
<input id="c2" type="checkbox" name="download[]" value="db2.csv" /><br />
<a class="opener" href="#" >db3.csv:</a>
<input id="c3" type="checkbox" name="download[]" value="db3.csv" /><br />
<a class="opener" href="#" >db4.csv:</a>
<input id="c4" type="checkbox" name="download[]" value="db4.csv" /><br />
<a class="opener" href="#" >db5.csv:</a>
<input id="c5" type="checkbox" name="download[]" value="db5.csv" /><br />
<a class="opener" href="#" >db6.csv:</a>
<input id="c6" type="checkbox" name="download[]" value="db6.csv" /><br />
<a id="opener" href="#">db7.csv:</a>
<input id="c7" type="checkbox" name="download[]" value="db7.csv" /><br />
<a class="opener" href="#">db8.csv:</a>
<input id="c8" type="checkbox" name="download[]" value="db8.csv" /><br />
<a class="opener" href="#" >db9.csv:</a>
<input id="c9" type="checkbox" name="download[]" value="db9.csv" /><br />
<input type="submit" value="submit" name="submit">
</form>

Javascript

$(document).ready(function(){
    $("#dialog-download ").dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        width: 325,
        modal: true
    });
    $(".opener").click(function(){
        var that = this;
        var checkbox = $(that).next(":checkbox");

        $("#dialog-download").dialog("option", {
            buttons: {
                "Download Now": function(){
                    $(checkbox).prop("checked", !$(checkbox).attr("checked"));
                    $("#dialog-download").dialog("close");
                },
                "Download Later ": function(){
                    $(checkbox).prop("checked", true);
                    $("#dialog-download").dialog("close");
                },
                "Cancel": function(){
                    $("#dialog-download").dialog("close");
                }
            }
        });
        $("#dialog-download").dialog("open");
    });
});

作業例: http://jsfiddle.net/ccrAF/

于 2012-04-27T17:09:00.850 に答える