如何在android phonegap中爲動態div加載iscroll

我在android phonegap中創建了應用程序。在我的應用程序中，我在動態加載的div中添加了附加列表。如何使用iscroll爲動態div添加滾動條。我想用iscroll.how做到這一點我的代碼是如何在android phonegap中爲動態div加載iscroll

HTML代碼中動態的div添加滾動條：

  <div class="sidemenu" ></div> 

     </div>

風格：

#scroller 
{ 
    top:90px; 
    position:absolute; z-index:1; 
    width:90%; 
    height:40px; 
    background-color:#FFFFFF; 
} 
li 
{ 
list-style:none; 
}

腳本：

iscroll：

var myScroll; 
     function loaded() { 
      myScroll = new iScroll('scroller', { 
       useTransform: false, 
       vScroll: true, 
       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(); 
       } 
      }); 
     } 
     document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
     document.addEventListener('DOMContentLoaded', setTimeout(function() { loaded(); }, 0), false); 


     /** scrollbar for dynamic div*/ 
    function doIscrollRefresh() { 
     setTimeout(function() { 
      myScroll.refresh(); 
     }, 0); 

    }

動態DIV：我已經從retrived值localdatabase和所附到的div動態

function list1(alphabet) 
{ 
       doIscrollRefresh(); 
      document.addEventListener("deviceready", onDeviceReady, false); 
      function onDeviceReady() 
      { 

        var db = window.openDatabase("createdb", "1.0", "PhoneGap Demo", 200000); 

        db.transaction(queryDB, errorCB,successCB); 

       } 
       function queryDB(tx) 
      { 
        var a=alphabet; 
        tx.executeSql("SELECT Textvalue FROM TextValue WHERE Textvalue LIKE '" + a + "%'",[], querySuccess, errorCB); 
      } 

      function querySuccess(tx,results) 
       { 
        $(".sidemenu").append("<li>"+"<label style='background-color:#C1CDD9' >"+alphabet+ "</label>"+"</li>"); 
        for (i = 0; i < results.rows.length; i++) 
        { 
         $(".sidemenu").append("<li>"+"<a id='"+i+"' href='#'>" +results.rows.item(i).Textvalue + "</a>"+ "<hr/>"+ "</li>"); 
        } 
        $(".sidemenu").append("<hr/>"); 
       } 
      function errorCB(err) 
      { 
         alert("Error processing SQL: "+err.code); 
      } 
      function successCB() 
      { 
       //alert("appended"); 
      } 
}

它顯示在logcat.the錯誤的錯誤被myScroll未定義不是對象。請告訴我solution.how到addthe滾動動態div.please指南me.thanks提前

來源

2012-04-12 nathi

.page { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.header { 
    position: absolute; 
    top: 0; 
    height: 42px; 
    width: 100%; 
    color: #333; 
    text-shadow: 0 1px 0 white; 
    border: 1px solid #F7C942; 
    border-left-width: 0; 
    border-right-width: 0; 
    background: #FADB4E; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FCEDA7), to(#FBEF7E)); 
    background-image: -webkit-linear-gradient(#FCEDA7, #FBEF7E); 
    background-image: -moz-linear-gradient(#FCEDA7, #FBEF7E); 
    background-image: -ms-linear-gradient(#FCEDA7, #FBEF7E); 
    background-image: -o-linear-gradient(#FCEDA7, #FBEF7E); 
    background-image: linear-gradient(#FCEDA7, #FBEF7E); 
    z-index: 2; 
} 

.content { 
    position: absolute; 
    top: 42px; 
    bottom: 66px; 
    padding-left: 4%; 
    padding-right: 4%; 
    width: 92%; 
    border-width: 0; 
    overflow: hidden; 
    color: #333; 
    text-shadow: 0 1px 0 white; 
    z-index: 1; 
} 

.scroller { 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    height: 64px; 
    width: 100%; 
    z-index: 2; 
    border: 1px solid #B3B3B3; 
    border-left-width: 0; 
    border-right-width: 0; 
    background: #EEE; 
    color: #3E3E3E; 
    font-weight: bold; 
    text-shadow: 0 1px 1px white; 
    background-image: -webkit-linear-gradient(#F0F0F0, #DDD); 
    background-image: -moz-linear-gradient(#F0F0F0, #DDD); 
    background-image: -ms-linear-gradient(#F0F0F0, #DDD); 
    background-image: -o-linear-gradient(#F0F0F0, #DDD); 
    background-image: linear-gradient(#F0F0F0, #DDD); 
} 

var Page = document.createElement('div'); 
    $(Page).attr('id', 'City'); 
    $(Page).addClass('page'); 

var Page = document.createElement('div'); 
    $(Page).attr('id', 'City'); 
    $(Page).addClass('page'); 

    //Header 
    var Header = document.createElement('div'); 
    $(Header).addClass('header'); 
    $(Header).attr('align', 'center'); 

//Content 
    var Content = document.createElement('div'); 
    $(Content).addClass('content'); 
    $(Content).attr('id', 'Wrapper'); 

    //Scroller 
    var Scroller = document.createElement('div'); 
    $(Scroller).addClass('scroller'); 

Content.appendChild(Scroller); 

    //Footer 
    var Footer = document.createElement('div'); 
    $(Footer).addClass('footer'); 

    Page.appendChild(Header); 
    Page.appendChild(Content); 
    Page.appendChild(Footer); 

    document.body.appendChild(Page); 

    myScroll = new iScroll("Wrapper"); 

    setTimeout(function() { 
     myScroll.refresh(); 
    }, 500);

來源

2012-05-22 08:57:47

喜我不是舒爾，這將是事情，但如果iscroll說你iscroll沒有定義它，因爲你調用loaded（）;之後啓動並實例化你的動態代碼，這樣iscroll就不能找到你的ellement！

我建議你回撥的加載功能後，您dynamique DIV是展示和包裝

回想起剛纔的加載（）;函數或使用iScroll.refresh（）;當你的愛人已經顯示時，這個功能就會啓動。

function querySuccess(tx,results) 
      { 
       $(".sidemenu").append("<li>"+"<label style='background-color:#C1CDD9' >"+alphabet+ "</label>"+"</li>"); 
       for (i = 0; i < results.rows.length; i++) 
       { 
        $(".sidemenu").append("<li>"+"<a id='"+i+"' href='#'>" +results.rows.item(i).Textvalue + "</a>"+ "<hr/>"+ "</li>"); 
       } 
       $(".sidemenu").append("<hr/>"); 
    ******************************************************************** 
     loaded(); 

/* or you can use*/ 

    myScroll.refresh(); 

********************************************************************* 
      }

重要的提醒是調用或刷新iscroll後您的內容顯示，並有風格

祝你好運！

來源

2014-07-11 13:43:58 user3829430

如何在android phonegap中爲動態div加載iscroll

回答

相關問題