3

KynetxのjQueryUI統合を使用して、ページでjQueryUI効果を正常に実行できました。

ただし、サイドタブ内からエフェクトを機能させるのに問題があります。これが私のアプリケーションのルールです。私は誰かが私が欠けているものを指摘できることを望んでいます：

global {
  css  <<
         #tester 
         { 
             margin-left: 10px; 
             margin-top: 10px; 
             width: 80px; 
             height: 80px; 
             background: green; 
             position: relative; 
         }
       >>;
 }

rule tab is active {
select when pageview ".*" setting ()

 pre { 
        results = <<  
           <div id='tester'></div>
            >>;        
}
{
     sidetab() with pathToTabImage = "http://dl.dropbox.com/u/10762217/search-tab-images/tab2.png" 
               and tabColor = "transparent"
               and topPos = "50px"
               and message = results
               and divCSS = {
                             "z-index": 10000,
                             "backgroundColor": "#ffffff",
                             "width": "200px",
                             "padding": "0px",
                             "imageHeight": "162px",
                             "imageWidth": "53px",
                             "-moz-border-radius": "5px"
                            };
              watch("#tester", "click");
           }



 }



 rule jeffect_on_click is active {
     select when web click "#tester"
        jquery_ui:effect("#tester","bounce","normal");


 }
}

私は必ず含めるようにしました

use javascript resource jquery_ui_js

私のメタタグで。

4

1 に答える 1

4

あなたは何も見逃していません。現在、ランタイム、特にwatch()アクションが.live()イベントハンドラーを登録するために使用します。 sidetab()が付加されたすべてのイベントハンドラーを食べます.live()。クリックハンドラーをオブジェクトにアタッチすることで実際に機能sidetab()するため、それらを食べてから、イベントがバブルアップするのを監視します。に達すると、セレクターに一致する要素からイベントが登録されているかどうかを確認し、登録されている場合は、ハンドラーを起動します。を呼び出すことでこれを強制終了します。これにより、イベントのバブリングが停止するため、イベントがに到達することはなく、ハンドラーが起動することはありません。.live()documentdocumentsidetab()event.stopPropagation()document

これを修正するには、イベントハンドラーをjQueryユーティリティ関数に登録します.bind()。はすでに存在する要素のハンドラーのみを登録しますが、呼び出す前に.bind()サイドタブ内の要素が存在することに注意する限り、問題はありません。.bind()

このようなもの：

$K("#tester").bind("click", function() {
  $K(this).effect("bounce", { "times" : 3 }, 300);
});

それをアプリ全体のコンテキストに入れましょう。

この例を単純にemitするために、ハンドラーをアタッチし、クリックするとdivがバウンスするために必要なjavascriptを使用します。この例は要点としても利用できます：

ruleset a369x111 {
    meta {
        name "Sidetab->Events"
            description <<
                Sidetab jQuery
            >>
            author "AKO"
            logging on

            use javascript resource jquery_ui_js

    }
    global {
        css  <<
            #tester { 
                margin-left: 10px; 
                margin-top: 10px; 
                width: 80px; 
                height: 80px; 
                background: green; 
                position: relative; 
            }
        >>;
    }

    rule tab {
        select when pageview ".*"

            pre { 
                results = << 
                    <div id="tester"></div>
                >>;        
            }
        {
            sidetab() with pathToTabImage = "http://dl.dropbox.com/u/10762217/search-tab-images/tab2.png" 
                and tabColor = "transparent"
                and topPos = "50px"
                and message = results
                and divCSS = {
                    "z-index": 10000,
                    "backgroundColor": "#ffffff",
                    "width": "200px",
                    "padding": "0px",
                    "imageHeight": "162px",
                    "imageWidth": "53px",
                    "-moz-border-radius": "5px"
                };
                emit <|
                    $K("#tester").bind("click", function() {
                        $K(this).effect("bounce", { "times" : 3 }, 300);
                    });
               |>;
        }



    }
}
于 2010-11-29T22:00:46.143 に答える