1

您好,我会实现一个基本的滑块。我想使用http://flexslider.woothemes.com/index.html来做到这一点

在我的文件 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>
4

1 回答 1

1

首先你不能$(window).load(function() {在 jQuery Mobile 应用程序中使用。就像文档准备就绪一样,它会在显示整页之前触发。与普通的 Web 开发不同,jQuery Mobile 使用不同的逻辑。它使用 ajax 将所有内容加载到 DOM 中。为了解决这个问题,jQuery Mobile 开发人员创建了页面事件

还有另一个问题,因为这个自定义页面处理正确的页面高度只能在 pageshow 事件期间获得,所以你的初始化代码应该是这样的:

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

但我认为这不是一个真正的问题。你真正的问题是你的页面结构。正如我告诉过你的,jQuery Mobile 使用 ajax 将页面加载到 DOM 中。但是只有第一页完全加载,其他每个 html 页面都只会部分加载。基本上 jQuery Mobile 只会加载 DIVdata-role="page". 阅读本文以了解如何解决此问题。

最后,这就是 jQuery Mobile 应该如何使用 flexslider: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();             
});
于 2013-05-31T14:16:23.460 回答