2013-06-20 3 views
0

У меня есть список с jquerymobile datafilter, и я использую iscroll. После поиска с datafilter Я хотел бы перезагрузить Iscroll, поскольку он не меняет размер области прокрутки (Так что можно прокручивать от элементов)Как перезагрузить Iscroll после изменения данных jqm datafilter?

Это мой HTML:.

 <div id="mywrapper" class="wrapper"> 
      <div data-role="content" id="myscroller"> 
       <ul data-role="listview" id="lstvw_myitems" data-filter="true"></ul> 
      </div> 
     </div> 

I уже пытались связать событие изменения с изменением listvw_myitems, но оно, похоже, не вызвано.

Это то, что я пробовал:

$('#lstvw_myitems').change(function() { 
     loadIScroll('wrapper'); 
}); 

Есть ли какие-либо другие (JQuery) события, я мог бы попытаться поймать на ListView?

Это код Iscroll я использую. (Тайм-аут, чтобы исправить ошибку, когда iscroll грузил, другой код для предотвращения выбора при прокрутке.)

function loadIScroll(wrapperId){ 
setTimeout(function() { 
    var myScroll = new iScroll(wrapperId, {bounce: false, hScrollbar: false, vScrollbar: false, vScroll: true, useTransform: true, zoom: false, 
     onBeforeScrollStart: function(e){ 
      var target = e.target; 
      while (target.nodeType != 1) target = target.parentNode; 
      if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 
       e.preventDefault(); 
     } 
    }); 
    }, 1); 

}

Я m с использованием jqm 1.3 jq 1.9.1 и iscroll v4.2.5.

+0

Вы используете iScrol 4 или его JQuery Мобильная версия под названием iScrollView? – Gajotres

+0

Не могли бы вы разместить свой код, в котором вы связываете 'iScroller' –

+0

. Я думаю, что я использую обычный iScroll4, и я добавил код из loadIScroll. – DavidVdd

ответ

0

Вместо поиска событий в объекте списка я изменил свой код, чтобы искать входные данные в поле ввода поиска.

Вот пример:

$(document).on('pagebeforeshow',"*", function(e, data){ 
//bind keypress of datafilter to resize iscroll 
$('.ui-input-search > input').bind("keyup",function(){ 
    myScroll.refresh(); 
}); 

});

Примечания: Iscroll var должен быть доступен в объеме, чтобы его обновить. Это событие всегда вызывается из-за селектора *, используя другой селектор, было бы лучше. Я также не знаю, достаточно ли селектора «.ui-input-search> input» для охвата только тех полей ввода поиска.

Возможно, кто-то еще придумает лучшее решение!

0

Я пытаюсь это сделать. Его длинный список, и как только кто-то вводит данные, мой Iscroll не изменяет размер. Я попробовал ваш метод, и я не уверен на 100%, я понимаю. Любые советы я был бы великолепен.

Вот мой iscroll код:

var myScroll; 
var scroll_cookie = readCookie('scrollToAlt'); 
var back_cookie = readCookie('previousPagePath'); 
function loaded() 
    { 
    myScroll = new iScroll('wrapper', 
     {scrollbarClass: 'myScrollbar', 
      hideScrollbar:false, 
     }); 
     if ($('#scroller').height() <= $('#wrapper').height()){ 
      myScroll.destroy(); 
      myScroll = null; 
     } 
    } 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
document.addEventListener('DOMContentLoaded', loaded, false); 

$(document).on('pagebeforeshow',"*", function(e, data){ 
    //bind keypress of datafilter to resize iscroll 
    $('.ui-input-search > input').bind("keyup",function(){ 
    myScroll.refresh(); 
    }); 
}); 
+0

Вы уверены, что код не уничтожает Iscroll до обновления? – DavidVdd

Смежные вопросы