滑动器在Jquery Mobile中不起作用 [英] Swiper not working in Jquery Mobile
问题描述
我在Jquery Mobile上使用 swiper by idangero.us ...
i am using Swiper by idangero.us with Jquery Mobile...
在这里，我将 Scroll Container Swiper 用于内容滑块...
Here i am using Scroll Container Swiper for a content slider...
将代码嵌入在一起面临很多问题...
Just facing a lot of problem embedding the code together...
http://jsfiddle.net/keuKu/4/embedded/result/
滚动条未显示为演示中的滚动条，并且滚动条也未粘在我留下的标记上...
The scrollbar is not appearing as the one in demo and also the scroll is not sticking to the mark where i leave it...
$(function(){
/* Scroll container: */
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
})
})
推荐答案
工作示例: http://jsfiddle.净/Gajotres/B7hwh/
首先让我告诉你我做了什么.就绪文档(或其匿名版本)不应与jQuery Mobile一起使用，因为它在页面初始化期间不会正确触发.通常这不是问题，但是这里是问题.
First let me tell you what I have done. Document ready (or its anonymous verion) should not be used with jQuery Mobile because it will not trigger correctly during page initialization. Usually it is not a problem but here it is.
因为您需要它在特定页面内进行初始化，所以我已删除准备就绪的文档，并用正确的页面事件替换了它.我也将您的代码包装到HTML和BODY标签中，没有它，我无法使页面事件在jsFiddle中工作.
Because you need it to initialize inside a certain page I have removed document ready and replaced it with a correct page event. I have also wrapped your code into HTML and BODY tags, I can't make page events work in jsFiddle without it.
另一个更改，因为每次重新访问页面时都会触发pageshow，所以我使用了是否检查swiper是否已应用其代码的方法.我无法使用其他页面事件，因为swiper需要正确的页面宽度和高度，并且这些信息只能在pageshow事件期间成功计算.
Another change, because pageshow triggers each time page is revisited I have used if to check if swiper has already applied its code. I couldn't use other page events because swiper need correct page width and height and those info can only be successfully calculated during the pageshow event.
工作示例: http://jsfiddle.net/Gajotres/B7hwh/
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" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<a href="#slider" data-transition="slide" data-role="button">Go to Slider</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="slider">
<div data-role="header" data-position="fixed">
<a href="#page" class="ui-btn-left">Back</a>
<h1>Page One</h1>
</div>
<div data-role="content">
<div role="main" class="main">
<div class="swiper-container swiper-scroll-container">
<div class="swiper-wrapper" >
<div class="swiper-slide" style="background:#fff; padding:20px">
<div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
<p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
</div>
<div style="width:300px; float:left; margin-left:20px">
<p>Here goes some text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
<p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
</div>
<div style="width:500px; float:left; margin-left:20px">
<p>Here goes wide image</p>
<p><img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28_n.jpg" /></p>
</div>
<div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
<p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pageshow', '#slider', function(){
/* Scroll container: */
if($('.swiper-scroll-container .swiper-scrollbar-cursor-drag').length == 0) {
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
});
}
});
CSS:
.swiper-scrollbar {
width: 100%;
height: 4px;
border-radius: 10px;
position: absolute !important;
left:0;
bottom:auto;
top:0 !important;
-ms-touch-action: none;
background: none
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0,0,0,0.5);
border-radius: 10px;
}
这篇关于滑动器在Jquery Mobile中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
