3

さまざまなdivのサイズを変更するために、JqueryUIのサイズ変更可能なプラグインを利用しています。次のHTMLページ（JSが埋め込まれている）について考えてみます。

<html>
<head></head>
<body>
<div id="site">
    <div>This element is resizable</div>
    <br />
    <div style="width: 200px;">This is another resizable element</div>
</div>

<!-- javascript includes -->
<script>
$(function() {
    $("#site div").click(function() {

        console.log("Clicked");    
        if($(this).hasClass("selected")) {
            $(this).removeClass("selected");
        }
        else {        // Currently not selected, so let's select it        
            $(this).addClass("selected").resizable({
                start: function(event, ui) {
                    console.log("Start");
                },
                resize: function(event, ui) {
                    console.log("Resize");
                },
                stop: function(event, ui) {
                    console.log("Stop");
                }
            });
        }
    });
});
</script>
</body>
</html>

したがって、このサンプルコードで達成しようとしていることは非常に単純です。ユーザーが「#site」内にネストされたdivをクリックすると、そのdivが「選択済み」になります。したがって、この例では、divのクリックイベントが発生すると、「selected」というCSSクラスがクリックされたdivに追加されます。divをクリックするだけでなく、ユーザーはdivのサイズを変更できます。この問題は、ユーザーが選択したdivのサイズを変更したときに発生します。明らかに、クリックイベントは、ユーザーが最初にdivを選択したときに発生しますが、クリックイベントは、ユーザーがdivの端をクリックしてドラッグしてサイズを変更したときにも発生します。クリックイベントはクリックルーチンを呼び出し、divの選択を解除します。これは私がしたいことではありません。クリックイベントは、サイズ変更可能なすべてのイベントが発生した後にのみ発生します。

それで、私の質問は、ユーザーがdivをクリックして選択できるようにするだけでなく、divのサイズを変更できるが、divをドラッグしてサイズ変更したときに選択を解除できないようにするには、このシナリオをどのように処理できるかということです。あなたの助けに感謝します。前もって感謝します。

4

3 に答える 3

6

良い質問。サイズ変更可能は、イベントバブリングを利用しています。実際のサイズ変更ハンドルは、サイズ変更可能な内部要素です。したがって、イベントターゲットのクラスを確認すると、必要なものが得られます。

http://jsfiddle.net/bmvDs/1/

$('#test').click(function(e){
    if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle
        $(this).toggleClass('selected');
}).resizable();
于 2011-04-18T22:06:26.313 に答える
0

1つのオプションは、すべてのdivを最初からサイズ変更可能として設定し、クリック時にスタイルを処理することです。

$(function() {
    var resizables = $('#site div');
    resizables.resizable({

               start: function(event, ui) {
                    console.log("Start");

                    // Remove the selected class from all other divs first
                    resizables.each(function(){ $(this).removeClass('selected'); });

                    // Set this div as selected
                    ui.element.addClass('selected');
                    // Carry on doing whatever else you want to do

               },
               resize: function(event, ui) {
                    console.log("Resize");
               },
               stop: function(event, ui) {
                    console.log("Stop");
               }

    });
});
于 2011-04-18T21:56:21.197 に答える
0

jQuery .oneはあなたの友達です！これにより、クラス.fooの各要素をシングルクリックできます。

$(".foo").one("click", function() {
  alert("This will be displayed only once.");
});
于 2011-04-18T23:31:12.323 に答える