Css 用于机具的flexslider基本滑块可以'；t解析文件jquery.flexslider.js_Css_Ruby On Rails_Jquery Mobile_Slider_Flexslider

Css 用于机具的flexslider基本滑块可以'；t解析文件jquery.flexslider.js

css ruby-on-rails jquery-mobile

Css 用于机具的flexslider基本滑块可以'；t解析文件jquery.flexslider.js,css,ruby-on-rails,jquery-mobile,slider,flexslider,Css,Ruby On Rails,Jquery Mobile,Slider,Flexslider,你好，我会实现一个基本的滑块。我想使用在我的application.htlm文件中，我添加了代码“如何开始”链接但不使用基本滑块正常显示图像。我注意到，在文件应用程序中，请参见我无法解析文件jquery.flexslider.js为什么？这是我的application.html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="h

你好，我会实现一个基本的滑块。我想使用

在我的application.htlm文件中，我添加了代码“如何开始”链接

但不使用基本滑块正常显示图像。我注意到，在文件应用程序中，请参见我无法解析文件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>


智能经济项目
//还可以与$（document.ready（）一起使用
$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider({
});
});
$（文档）。在（“单击“，”。显示页面加载消息”，函数（）{
变量$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'{
文本：msgText，
textVisible:textVisible，
主题:主题,，
textonly:textonly，
html:html
});
})
.on（“单击“，”。隐藏页面加载消息”，函数（）{
$.mobile.load（'hide'）；
});
函数getLatLon（）{
var address=document.getElementById（“地址”）.value；
//var address=document.getElementsByName（“地址”）.value；
var cat=address.concat（'，'）；
var user1Location=cat
var geocoder=new google.maps.geocoder（）；
地理编码({
地址：user1Location
}，函数（locResult）{
console.log（locResult）；
var lat1=locResult[0]。geometry.location.lat（）；
var lng1=locResult[0]。geometry.location.lng（）；
$（“#demo”）.html（“纬度：+lat1+”经度：+lng1+””
+""+
"");
});
//var vett=[
//[blabla'，37.44,54.33,1]，
//[casds'，4334.44323.2,2]
// ];
}
智能经济








‘c’、‘数据-角色’=>‘按钮’、‘数据-图标’=>‘加’、‘数据-图标’=>‘左’、‘数据转换’=>‘淡入’%>
“按钮”、“数据图标”=>“加”、“数据图标”=>“左”、“数据转换”=>“向下滑动”%>

'主'，'data-theme'=>'c'，'data-mini'=>'true'，'data ajax'=>“false”%>
'plus'、'data-theme'=>'c'、'data-mini'=>'true'、“data-ajax”=>“false”%>
‘plus’、‘data-t主题’=>‘c’、‘data-mini’=>‘true’、‘data-ajax’=>‘false’%>
'plus'、'data-theme'=>'c'、'data-mini'=>'true'、“data-ajax”=>“false”%>
'搜索'，'data-theme'=>'a'，'data-mini'=>'true'，'data ajax'=>'false'，'target'=>'U parent'，'class'=>'show-page loading msg'，'data-theme'=>'c'，'data-textonly'=>'false'，'data-textvisible'=>'true'，'data-msgtext'=>'Map正在加载，抱歉延迟'，'data-icon'=>'search'，'data-iconpos'=>'right'>

'齿轮'，'数据-角色'=>'按钮'，'数据-迷你'=>'真实'%>
以身份登录。不是你？”删除“，”数据角色“=>”按钮“，”数据迷你“=>”真“%>

首先，您不能使用$（窗口）。加载（函数（）{
在jQuery移动应用程序中。与文档就绪一样，它将在显示完整页面之前触发。与正常的web开发不同，jQuery移动使用不同的逻辑。它使用ajax将所有内容加载到DOM中。为了纠正这一问题，jQuery移动开发人员创建了

还有另一个问题，因为这种自定义页面处理，只有在pageshow事件期间才能获得正确的页面高度，所以您的初始化代码应该如下所示：

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

但我认为这不是一个真正的问题。真正的问题是页面结构。正如我告诉过你的，jQuery Mobile使用ajax将页面加载到DOM中。但是只有第一个页面完全加载，其他html页面只加载一部分。基本上jQuery Mobile只加载带有数据角色=“page”的DIV
。阅读了解如何解决此问题

最后，这就是flexslider如何与jQuery Mobile配合使用：

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>

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

首先，您不能使用$（window.load（function（））{
在jQuery移动应用程序中。与文档就绪一样，它将在显示完整页面之前触发。与正常的web开发不同，jQuery移动使用不同的逻辑。它使用ajax将所有内容加载到DOM中。为了纠正这一问题，jQuery移动开发人员创建了

还有另一个问题，因为这种自定义页面处理，只有在pageshow事件期间才能获得正确的页面高度，所以您的初始化代码应该如下所示：

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

最后，这就是flexslider如何与jQuery Mobile配合使用：

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>

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

删除此项，因为您正在加载一个稍高一点的新版本：能否请您详细说明有关flexslider的问题？以便有人能够提供帮助。我遵循入门指南，但他没有向我显示滑块，而是仅显示图像normal@michael删除该选项不会改变任何内容row@javierZanetti-我应该澄清一下ed，它不会解决您的问题，但它是不需要的，因为您已经有了一个jquery