-1

嗨，我是 javascript 和 jquery 的新手，我正在构建一个 phonegap 应用程序。

在我的应用程序中，我正在尝试使用网站http://www.x-services.nl/category/phonegap-cordova中演示的 iscroll 和 iscrollview 实现拉动刷新功能

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event Info</title>
<style>

.ui-page {
        -webkit-backface-visibility: hidden;
    } 



#navgroup {text-align:center;}
#navgroup div {display:inline-block;}


        .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
        .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
        #chat .ui-icon { background:  url(images/icons/09-chat-2.png) 50% 50% no-repeat; background-size: 24px 22px; }
        #email .ui-icon { background:  url(images/icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
        #login .ui-icon { background:  url(images/icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
        #beer .ui-icon { background:  url(images/icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
        #coffee .ui-icon { background:  url(images/icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
        #skull .ui-icon { background:  url(images/icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }



</style>


<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.5.4.min.css">
<link rel="stylesheet" type="text/css" href="css/jqm-icon-pack-fa.css">

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" > </script>
<script type="text/javascript" src="scripts/mobiscroll.custom-2.5.4.min.js" ></script>

<script type="text/javascript" src="scripts/iscroll.js" ></script>
<script type="text/javascript" src="scripts/jquery.mobile.iscrollview.js" ></script>
<script type="text/javascript" src="scripts/indexinfo.js"></script>


<!--  script type="text/javascript" src="scripts/date.js"></script> -->
<script src="phonegap.js"></script>
<script type="text/javascript">


</script>

</head>
<body id="body">
<div id="plistview" data-role="page" >

    <script src="scripts/date.js"></script>
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header" data-theme="a">
    <!--  <a id="calendarlink" href="calendarview.html" data-icon="" class="ui-btn-left" data-ajax="false">Calendar</a> 
    <a id="calendarlink" data-role="button" href="#" data-icon="calendar" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>
    <a id="filterlink" data-role="button" href="#pfilterview" data-icon="filter" class="ui-btn-right" data-transition="slideup" data-prefetch="true"></a>   
    -->

    <div class="ui-btn-right">
        <a id="calendarlink" href="calendarview.html"  data-role="button" data-icon="calendar"  data-iconpos="notext" data-theme="c" data-inline="true" data-transition="slide">Calendar</a>
        <a href="#" data-role="button" data-icon="list" class="ui-btn-active" data-iconpos="notext" data-theme="c" data-inline="true">list</a>  
        <a href="#pfilterview" data-role="button" data-icon="filter" data-iconpos="notext" data-theme="c" data-transition="slideup" data-inline="true">filter</a>
    </div>
    <h1>Event Info</h1> 

</div>
         <p id="paragraph"></p>

<div id="middlecontent" data-role="content" data-iscroll>         
    <div class="iscroll-pulldown">
       <span class="iscroll-pull-icon"></span>
       <span class="iscroll-pull-label"
             data-iscroll-loading-text="News is being refreshed"
             data-iscroll-pulled-text="Release to refresh the news">
         Refresh the news
       </span>
     </div>

    <div id="eventlist"> 
    <!--  <a id="getpreviouseventsbutton" href="#" data-role="button" data-mini="true" >Get previous events</a> -->
    <br>            
        <ul id="upcomingevents" data-role="listview"  data-inset="true">
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>            
        </ul>
        <br>        
           <!-- <a id="getmoreeventsbutton" href="#" data-role="button" data-mini="true" >Get next month events</a>   -->   
    </div>


<br> <br> <br> <br>
</div>


<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">       
        <div id="navgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">

            <a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a>
            <a id="calendarlink" href="calendarview.html" data-role="button" data-icon=""  data-transition="slide">Month</a>          
        </div>
         <!--  <div data-role="controlgroup" data-type="horizontal"> 
        <ul>
            <li><a id="listlink" href="#" data-role="button" data-icon="" class="ui-btn-active ui-state-persist" >List</a></li>
            <li><a id="calendarlink" href="calendarview.html" data-role="button" data-icon="" class="ui-btn-center"  data-transition="slide">Calendar</a></li>      
        </ul>
        -->
    </div>

</div>
</div>

<div id="pfilterview" data-role="page" >

<script type="text/javascript">

$(document).one("pageshow",'#pfilterview',function(){
    console.log("category list is loading");

    $.ajax({
        beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
        complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
        url: 'http://linuxweb.symsoft.local/ycal/index.php/event/Categories?callback=test',
        dataType: 'jsonp',
        success: function( arr ) {              
                for(var i=0;i<arr.length;i++){

                            $('#categories').append( '<label><input class="selectedcategory" value="'+arr[i].category+'" name="'+arr[i].category+'" type="checkbox">'+arr[i].category+'</label>').trigger( "create" );                                                                                                                              

                }// this logic assumes that the data is in ascending order by date      

                //code to fill the event list page ends  
        //$('#upcomingevents').listview('refresh');
        },
        error: function( data ) {
          console.log( "error" );
          alert( "ERROR:  " + data );
        }
      });   
});

$(document).on('click','#apply',function(e){
    e.preventDefault();
    filteredcategories=[];
    $('#categorylist :checked').each(function() {
        filteredcategories.push($(this).val());
         });

    console.log("filtered values -> "+filteredcategories);  
    updatelistview();

});

$(document).ready(function(){
    $('#selectbutton').toggle(function(){
        $('input:checkbox').prop('checked',true).checkboxradio("refresh");
        $(this).val('Deselect all').button('refresh');
    },function(){       
        $('input:checkbox').prop('checked',false).checkboxradio("refresh");
        $(this).val('Select all').button('refresh');        
    })
});


</script>

    <div data-role="header" data-position="fixed" data-tap-toggle="flase">
    <a href="#plistview" id="apply" ..data-icon="" class="ui-btn-left" data-transition="slidedown">Cancel</a>
    <a href="#" id="apply" data-icon="" class="ui-btn-right" data-transition="slidedown">Apply</a>
    <h1>Filter</h1>
    </div>
    <div data-role="content">       
        <div id="categorylist">                 
        <form id="categories">
        <input class="check" id="selectbutton" type='button' value="Select All">            
        </form>
        <br><br>
        <a href="#plistview" id="apply" data-icon="" data-role="button" data-mini="true"  data-transition="slidedown">Apply</a>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="flase">

    </div>
</div>


</body>

</html>

我得到 ReferenceError: iScroll is not defined jquery.mobile.iscrollview.js 第 259 行，它指向 iscrollview.js 我无法找出这个参考错误的原因。

该行是 _subclass(IScroll,iScroll) iScroll is undefined 。这里 iScroll var 是一个超构造函数类型 var 我无法理解这个原因的原因

4

2 回答 2

1

我不知道为什么，但在 1973 行的 iscroll.js 中是 window.IScroll = IScroll;

我认为这是错误的。

右边是window.iScroll = IScroll;

我改变并为我工作。

于 2014-01-09T13:26:04.383 回答
0

我不会将此称为“奇怪的错误”，因为您似乎没有在应用程序中包含您<script>在顶部标签中引用的所有 JS 文件。

于 2013-07-01T01:24:28.877 回答