1

何日もこれを理解しようとしてきました（初心者の試みだと思います！）ので、あなたの助けは大歓迎です。

jscript ウィジェットは [続行] ボタンを表示します。ユーザーがボタンをクリックすると、メッセージ (契約ドキュメントへのハイパーリンクを含む) を表示するモーダル ダイアログと、ユーザーが契約を読んだことを確認するためのチェックボックスが必要です。ダイアログを閉じた後、[checkbox = 0続行] ボタンをクリックすると同じダイアログが開きます (チェックボックスがクリックされるまでループします: checkbox = 1)。

これまでにまとめたコードは次のとおりです...

ダイアログの場合:

<a href="#" id="sdHc3" rel="simpleDialog3">Click to open dialog</a>  
<span style="display:none;" id="checkboxStatus"></span>

<div style="display:none;" id="simpleDialog3">
    <h3>Terms and Conditions</h3>
    <form id="checkboxForm">
        Please check box to confirm that you have read the <a href="assets/docs/agreement.html">agreement</a>: <input type="checkbox" class="chckbx" value="1" />
    </form>
    <p><a href="#" class="close">Close</a></p>
</div>


<script type="text/javascript">
$('#sdHc3').simpleDialog({
    showCloseLabel: false,
    open: function () {
        $('#checkboxStatus').html('');
    },
    close: function () {
        var c = [];
        $('#checkboxForm :checkbox:checked').each(function () {
            c.push($(this).val());
        });
        $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
    }
});
</script>

ウィジェットボタンのクリックを検出する場合：

<script type = "text/javascript">
document.body.onmousedown = function (e) {
    var query = window.location;
    var anchor1=query.hash.substring(1); //anchor without the # character
    if( ($(event.target).hasClass("gwt-Button")) && (anchor1=="step3"))
    {
        alert("Widget button clicked");
    }
}
</script>

「ダイアログ」コードは正常に機能し、ウィジェット ボタンのクリック検出コードも正常に機能します。これらをどのようにまとめて目標を達成するかは、現在私にとって謎です。前もって感謝します！

4

1 に答える 1

1

そのため、ウィジェット ボタンがクリックされたときに、入力がチェックされているかどうかを確認し、チェックされていない場合は、次のようにダイアログを再度表示する必要があります。

$(document).ready(function() {
    // detect button click
    $('.gwt-Button').click(function(ev) {
        ev.preventDefault();
        var anchor = window.location.hash.substring(1); // remove # character
        if (anchor != "step3") {
            return; // not step 3
        }
        if ($('#checkboxForm .chckbx').is(':checked')) {
            // checked
        }
        else {
            $('#sdHc3').click(); // trigger dialog again
        }
    });

    // setup dialog
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function () {
           $('#checkboxStatus').html('');
        },
        close: function () {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function () {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
        }
    });
});
于 2012-09-05T00:41:07.260 に答える