Можем ли мы использовать один и тот же плагин jquery дважды на одной странице?

Question

Я пытался добавить модель слайдера на веб-страницу, и я хочу добавить ползунки в два разных элемента Div .. Я пытался переименовать элементы и имена классов .. но это не так ... Есть ли решение для этогоВозможно ли использовать плагин jquery дважды на одной и той же странице ??

Я пытаюсь добавить код плагина

      var currentPosition1 = 0;
                  var slideWidth1 = 900;
                  var slides1 = $('.slider1');
                  var numberOfSlides1 = slides1.length;

                  // Remove scrollbar in JS
                  $('#slidesContainer1').css('overflow', 'hidden');

                  // Wrap all .slides with #slideInner div
                  slides1
                    .wrapAll('')
                    // Float left to display horizontally, readjust .slides width
                    .css({
                      'float' : 'left',
                      'width' : slideWidth1
                    });

                  // Set #slideInner width equal to total width of all slides
                  $('#slideInner1').css('width', slideWidth1 * numberOfSlides1);

                  // Insert controls in the DOM
                  $('#slideshow1')
                    .prepend('Clicking moves left')
                    .append('Clicking moves right');

                  // Hide left arrow control on first load
                  manageControls1(currentPosition1);

                  // Create event listeners for .controls clicks
                  $('.control')
                    .bind('click', function(){
                    // Determine new position
                    currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1;

                    // Hide / show controls
                    manageControls1(currentPosition1);
                    // Move slideInner using margin-left
                    $('#slideInner1').animate({
                      'marginLeft' : slideWidth1*(-currentPosition1)
                    });
                  });

                  // manageControls: Hides and Shows controls depending on currentPosition
                  function manageControls1(position1){
                    // Hide left arrow if position is first slider2
                    if(position1==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() }
                    // Hide right arrow if position is last slider2
                    if(position1==numberOfSlides1-1){ $('#rightControl1').hide() } else{ $('#rightControl1').show() }
                  } 

в панель Div1

<div class="panel1">
    <div id="slideshow1">
       <div id="slidesContainer1">




          <div class="slider1">
                <table style="margin-bottom:50px;"><tbody id="facetPrsnRslt"></tbody></table>
           </div>
           <div class="slider1">
               <p>This is the END my Friend...</p>
           </div>
      </div>
    </div>


</div>

, есть еще одна панель div 2, я хочу добавить тот же плагин слайдера в panel2, но не повезло ...

Answer 1

Это зависит от плагина, мы не можем сказать, что все плагины могут быть использованы дважды в одном HTML-файле. Но этот конкретный плагин, кажется, работает. Интересно, если вы меняли класс или идентификатор, я видел исходный код плагина, и ему нужны классы для добавления CSS, но идентификатор контейнера - это то, что вы должны использовать для инициализации слайд-шоу

<div id="showcase1" class="showcase">
<!-- contents needed for the showcase -->
</div>
<div id="showcase2" class="showcase">
<!-- contents needed for the showcase -->
</div>

В JavaScript

$(document).ready( function() {
    $("#showcase1").awShowcase({ /* config of this showcase */ });
    $("#showcase2").awShowcase({ /* config of this showcase */ });
})

Вот пример в jsfiddle http://jsfiddle.net/6qkjbqdh/

Я заметил, что плагин использует старую версию jQuery (1.5.2), имейте в виду, что, возможно, версия, которую вы включили в свой проект, может быть более свежей и это может вызвать проблемы.

Привет

Answer 2

Итак, у вас есть набор кода, который делает то, что вы хотите, но хотите использовать его более чем в одном элементе? То, что у вас есть, это просто «пользовательский скрипт» - набор кодов, который делает то, что вы хотите ... и все, волшебство сделано. Если вы хотите сделать его многоразовым и масштабируемым, попробуйте создать плагин real , что может сделать:

$('set_of_elements').myOwnPlugin({option:'foo'});

Если вы хотите вникнуть в специфику разработки плагинов, загляните в эту статью , в которой это подробно объясняется (и поначалу это может сбивать с толку). Они, после ознакомления с основами, могут захотеть получить «шаблон» для построения структуры кода плагина. Я лично использую 2 шаблона, этот и этот . первый использует модифицированную версию, описанную в статье jQuery, другой использует подход ООП.