JQuery UI эффекты в боковой таблице Kynetx - PullRequest
Новая
       1

JQuery UI эффекты в боковой таблице Kynetx

3 голосов
/ 24 ноября 2010

У меня успешно получен эффект jQuery UI на странице с использованием интеграции Kynetx с jQuery UI.

Однако у меня возникают проблемы с получением эффекта для работы из боковой вкладки.Вот правила для моего приложения.Я надеюсь, что кто-то может указать, что мне не хватает: 

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

в мой метатег.

1 Ответ

4 голосов
/ 30 ноября 2010

Вы ничего не упускаете.В настоящее время среда выполнения, в частности действие watch(), использует .live() для регистрации обработчиков событий.sidetab() съедает все обработчики событий с .live().sidetab() съедает их, потому что .live() на самом деле работает, прикрепляя ваш обработчик щелчков к объекту document, а затем следит за появлением события.Когда он достигает document, он проверяет, было ли зарегистрировано событие из элементов, соответствующих вашему селектору, и, если это так, запускает ваш обработчик.sidetab() убивает это, вызывая event.stopPropagation(), который останавливает всплытие события, поэтому оно никогда не достигает document, поэтому ваш обработчик никогда не будет запускаться.

Это можно исправить, зарегистрировав обработчик событий с помощью служебной функции jQuery, .bind()..bind() будет регистрировать обработчик только для тех элементов, которые уже существуют, но если вы позаботитесь о том, чтобы элементы внутри вашей боковой таблицы существовали до того, как вы позвоните .bind(), вы будетебыть в порядке.

Примерно так: 

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

Давайте рассмотрим это в контексте всего приложения, не так ли?

Чтобы этот пример был простым, мы просто emit javascript, необходимый для прикрепления нашего обработчика и получения отказов div при нажатии.Этот пример также доступен как гист : 

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);
                    });
               |>;
        }



    }
}
...