jquery назначение функции клика из плагина - PullRequest
Новая
       39

jquery назначение функции клика из плагина

0 голосов
/ 15 ноября 2010

Это старый проект, который я обновляю, поэтому он не самый красивый из кодов.

Я пытаюсь адаптировать плагин для своих конкретных потребностей, плагин, о котором идет речь, представляет собой простой плагин с разборной панелью.

Я хочу иметь возможность стилизовать каждую панель другим цветом в зависимости от rel, назначенного div.

это фактически php-код, который генерирует css и код для div, затем я вызываю jquery, чтобы применить плагин для складной панели.

все стилизовано нормально, но функция щелчка не работает, любые указатели были бы наиболее полезны: я думаю, что мне нужно где-то применить .delegate (), но не знаю, как это сделать.

URL: http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_rework.php Чтобы получить результаты теста: нажмите [выбрать все] над селектором выбора района и нажмите кнопку поиска.

код, который создает панель: 

//all this is wrapped in a php loop:
<style type="text/css">
            .C_<?php echo $myCurrentBorough ?>_color{
               color:<?php echo $row_rs_myBoroughs['color']; ?>;
               font-family: Arial, Helvetica, sans-serif;
               font-size:12px;
               letter-spacing:1px;
               text-transform:uppercase; 
               font-weight: bold;   
            }
            .collapsibleContainer<?php echo $myCurrentBorough ?>{
                     border: solid 0px <?php echo $row_rs_myBoroughs['color']; ?>;
                }

                .collapsibleContainerTitle<?php echo $myCurrentBorough ?>{
                     cursor:pointer;
                     color:#000000;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>
                }

                .collapsibleContainerTitle div<?php echo $myCurrentBorough ?>{
                     padding-top:5px;
                     padding-left:10px;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
                     color:#607882;
                }

                .collapsibleContainerContent<?php echo $myCurrentBorough ?>{
                     padding: 10px;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
                }

         </style>
        <?php if($boroughCounter > 0){?>

             <div class="collapsibleContainer<?php echo $myCurrentBorough; ?>" tabindex="<?php echo $myCurrentBorough; ?>" title="Locations Found In <?php echo $row_rs_myBoroughs['Borough_Name']; ?>" rel="<?php echo $myCurrentBorough; ?>">
            MY DIV CONTENT GOES HERE
               </div>
               <script type="text/javascript">
                        $(document).ready(function() {
                            $(".collapsibleContainer<?php echo $myCurrentBorough; ?>").collapsiblePanel();
                        });
                    </script>
                    <?php } //end check to see if locations exist in borough?>

Плагин jquery: 

    (function($) {
    $.fn.extend({
        collapsiblePanel: function() {
            // Call the ConfigureCollapsiblePanel function for the selected element
            return $(this).each(ConfigureCollapsiblePanel);
        }
    });

})(jQuery);

function ConfigureCollapsiblePanel() {
    $(this).addClass("ui-widget");
    // Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>");

    // Create a new div as the first item within the container.  Put the title of the panel in here.
    $("<div class='collapsibleContainerTitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));

    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
    $(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick());
}

function CollapsibleContainerTitleOnClick(myID) {
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
    $(".collapsibleContainerContent"+$(this).attr("rel")+"", $(this).parent()).slideToggle();
}

1 Ответ

2 голосов
/ 15 ноября 2010

Метод click вызывает функцию вместо передачи ссылки на функцию. Удалите (), и событие сработает.

ТЕКУЩИЙ КОД: $ (". collapsibleContainerTitle" + $ (this) .attr ("rel") + "", this) .click (CollapsibleContainerTitleOnClick () );

ФИКСИРОВАННЫЙ КОД: $ (". collapsibleContainerTitle" + $ (this) .attr ("rel") + "" this) .click (CollapsibleContainerTitleOnClick);

...