Как работать с несколькими элементами DOM с помощью iScroll (при использовании jQTouch) - PullRequest
Новая
       36

Как работать с несколькими элементами DOM с помощью iScroll (при использовании jQTouch)

4 голосов
/ 19 июня 2011

У меня есть наценки как 

<div id="home" class="current">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller">
            <ul id="thelist" class="plastic"><!-- li items --></ul>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>   
    <!-- Events Details -->
<div id="events">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller"> <!-- stuffsss --></div>
    </div>
    <div class="footer">Footer</div>
</div>

Чтобы iScroll (http://cubiq.org/iscroll) работал), мне нужно #scroller в качестве идентификатора (согласно коду JavaScript, который я использую для инициализации iScroll. 

//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

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

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

Может кто-нибудь помочь мне изменить коды так, чтобы это работало, реализуя классы вместо идентификатора ??

Ответы [ 3 ]

4 голосов
/ 23 августа 2011

Роб прав, но вы можете изменить свой код на классы скроллера, как вы сказали.Затем инициализируйте ваши скроллеры в уникальных оболочках следующим образом: 

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
2 голосов
/ 19 июля 2011

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

0 голосов
/ 29 августа 2012

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

https://stackoverflow.com/a/7584694/1232232

, но для того, чтобы это работало, вам необходимо присвоить идентификаторы вашим классифицированным (контейнерам div), таким как 

<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div> 
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>

Примечание: Помните, что нельзя назначать один и тот же идентификатор нескольким элементам, всегда используйте для этого классы.

...