2013-05-31 41 views
1

你好,我會實現一個基本的滑塊。我想這樣做,使用http://flexslider.woothemes.com/index.htmlflexslider實現基本滑塊無法解析文件jquery.flexslider.js

在我的文件application.htlm我已經添加怎麼說的越來越開始鏈接 http://www.woothemes.com/flexslider/

但顯示圖像不正常基本滑塊的代碼。 我注意到在文件應用中看到我 無法解析jquery.flexslider.js文件爲什麼?

這是我所有的application.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlDKLvBpApFUJJVjSXbZ-  BV40B3xBVtYY&sensor=true&language=it" type="text/javascript"> 
    </script> 
    <meta charset="utf-8"> 
    <title>SmartEconomy Project</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" /> 
    <%= javascript_include_tag :defaults %> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script> 
    <%= csrf_meta_tag %> 
    <!-- Place somewhere in the <head> of your document --> 
    <link rel="stylesheet" href="flexslider.css" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> 
    <script src="jquery.flexslider.js"></script> 
    <!-- Place in the <head>, after the three links --> 
    <script type="text/javascript" charset="utf-8"> 
    // Can also be used with $(document).ready() 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 


     }); 
    }); 
</script> 


<script> 
    $(document).on("click", ".show-page-loading-msg", function() { 
     var $this = $(this), 
       theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme, 
       msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text, 
       textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible, 
       textonly = !!$this.jqmData("textonly"); 
     html = $this.jqmData("html") || ""; 
     $.mobile.loading('show', { 
      text: msgText, 
      textVisible: textVisible, 
      theme: theme, 
      textonly: textonly, 
      html: html 
     }); 
    }) 
      .on("click", ".hide-page-loading-msg", function() { 
       $.mobile.loading('hide'); 
      }); 
    </script> 

    <script type=text/javascript> 

    function getLatLon(){ 

     var address=document.getElementById("Address").value; 

    // var address=document.getElementsByName("address").value; 

     var cat=address.concat(','); 


     var user1Location = cat 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
      address: user1Location 
     }, function(locResult) { 
      console.log(locResult); 
      var lat1 = locResult[0].geometry.location.lat(); 
      var lng1 = locResult[0].geometry.location.lng(); 

      $("#demo").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>" 
        +"<input type='hidden' id='latitude' name='promotion[lang]' value='"+lat1+"'>"+ 
        "<input type='hidden' id='longitude' name='promotion[long]' value='"+lng1+"'>"); 

     }); 



    // var vett = [ 
    // ['blabla',37.44,54.33,1], 
    // ['casds',4334.44,323.2,2] 
    // ]; 
    } 


    </script> 
    </head> 

<body> 

<div data-role="header" id="ale" data-theme="a"> 
<h1> SmART_eConomY </h1> 

<!-- Place somewhere in the <body> of your page --> 
<div class="flexslider"> 
<ul class="slides"> 
    <li> 
    <%= image_tag "facebook.png" %> 
    </li> 
    <li> 
    <img src="slide2.jpg" /> 
    </li> 
    <li> 
    <img src="slide3.jpg" /> 
    </li> 
    </ul> 
    </div> 

    <div data-role="controlgroup" data-type="horizontal"class ="ui-btn-left" > 

    <%= link_to 'Sign up', new_user_registration_url ,'datatheme'=>'c','data- role'=>'button','data-icon' => 'plus','data-iconpos'=>'left', 'data-transition'=>'fade'%> 
<%= link_to 'Sign in', new_user_session_url,'data-role'=>'button','data-icon' =>  'plus', 'data-iconpos'=>'left', 'data-transition'=>'slidedown' %> 

</div> 
<div data-role="controlgroup" data-type="horizontal"class ="ui-btn-right" > 

    <a href="users/auth/facebook" data-ajax="false" class="auth_provider"> 
    <%= image_tag "facebook.png", :alt => "Facebook" %></a> 
    </div> 

    </div> 

    <div data-role="navbar" data-theme="b" data-iconpos="bottom" > 
<ul> 
    <li><%= link_to "Home",promotions_path,'data-icon'=>'home','data-theme'=>'c','data- mini'=>'true',"data-ajax"=>"false"%></li> 
    <li><%= link_to "Add Good",new_good_url,'data-icon'=>'plus','data-theme'=>'c','data- mini'=>'true',"data-ajax"=>"false"%></li> 
    <li><%= link_to "Create Promo", new_promotion_url,'data-icon'=>'plus','data-t theme'=>'c','data-mini'=>'true',"data-ajax"=>"false"%></li> 
    <li><%= link_to "Add Category",new_category_url,'data-icon'=>'plus','data-theme'=>'c','data-mini'=>'true',"data-ajax"=>"false"%></li> 
    <li><%= link_to "Search Promo",:promo_search,'data-icon'=>'search','data-theme'=>'a','data-mini'=>'true',"data-ajax"=>"false" ,'target'=>'_parent','class'=>'show- page-loading-msg', 'data-theme'=>'c','data-textonly'=>'false', 'data-textvisible'=>'true', 'data-msgtext'=>'Map is loading, sorry for latency' ,'data-icon'=>'search','data-iconpos'=>'right'%></li> 
    </ul> 
    </div><!-- /navbar --> 

<% if user_signed_in? %> 
    <div class="ui-bar ui-bar-b" data-role="header"> 
    <%= link_to "Profile",:accountsettings,'data-icon'=>'gear','data- role'=>'button','data-mini'=>'true'%> 
    <h1> Signed in as <%= current_user.email %>. Not you?</h1> <%= link_to "Sign out", :signout,'data-icon'=>'delete','data-role'=>'button','data-mini'=>'true'%> 
    <h2 class="notice" <%= notice %> class="alert"><%= alert %> </h2> 
    </div> 
    <% end %> 
    <div class="ui-bar ui-bar-b" data-role="header"> 
    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %><p/> 
    </div> 

<%=yield %> 

</body> 
</html> 
+0

刪除這一點,因爲你是加載較新的版本稍微高一些: Michael

+0

您能否詳細說明您的問題,正是關於flexslider?所以有人可以提供幫助。 – Daenarys

+0

我跟着入門,但他沒有告訴我的滑塊,但只有圖像正常 – javierZanetti

回答

1

首先,你不能在jQuery Mobile的應用程序中使用$(window).load(function() {。就像準備好文檔一樣,它會在整個頁面顯示之前觸發。與正常的web開發不同,jQuery Mobile使用不同的邏輯。它使用ajax將所有內容加載到DOM中。爲了補救這個jQuery Mobile開發者創建了page events

還有另外一個問題,因爲處理正確的頁面高度此自定義頁面的只能在pageshow事件被收購,所以你的初始化代碼應該是這樣的:

$(document).on('pageshow', '#index', function(){ 
    $('.flexslider').flexslider();    
}); 

但我認爲這不是一個真正的問題在這裏。你真正的問題是你的頁面結構。正如我告訴你,jQuery Mobile使用Ajax將頁面加載到DOM中。但是隻有第一頁完全加載,其他所有的HTML頁面將只加載一部分。基本上jQuery Mobile將加載只有DIV data-role="page"。閱讀this找出如何解決這個問題。

最後,這是多麼flexslider應與jQuery Mobile的使用:http://jsfiddle.net/Gajotres/mMcdD/

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" />   
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
     <script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>   
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="b" data-role="header"> 
       <h1>Index page</h1> 
      </div> 

      <div data-role="content"> 

       <div class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
         </li> 
         <li> 
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
         </li> 
         <li> 
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
         </li> 
         <li> 
          <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div>  
    </body> 
</html> 

的Javascript:

$(document).on('pageshow', '#index', function(){ 
    $('.flexslider').flexslider();    
});