将 iDangero.us Swiper与jQuery Mobile一起使用时需要刷新页面
Need to refresh page when using iDangero.us Swiper with jQuery Mobile
我目前正在尝试将iDangerous Swipeper添加到使用jQuery Mobile构建的页面中,但为了显示滑动器,我需要重新加载页面。我见过一些情况,人们对这些有一些问题,但他们的解决方案不适用于我下面的问题。
我尝试了几种不同的东西:pageshow,pageinit,pagebeforeshow,mobileinit。还有触发器("创建"),触发器("刷新"),并尝试在jQuery Mobile js之前或之后添加脚本。
我目前正在使用 jQuery Mobile 1.4.1 alpha 2 和 Swipeper 2.1.0。
我的问题:为了使脚本正常工作,脚本的正确顺序是什么,上面的页面事件中的哪一个应该解决问题?谢谢你的时间。
我的滑动器HTML如下:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " id="productImage" /></div>
</div>
<div class="swiper-slide"><div class="picture">
<img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
<div class="swiper-slide"><div class="picture">
<img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
</div>
</div>
我的jQuery和jQuery Mobile文件加载在页面底部。
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
$(document).on('pagecreate', function(){
$( "#leftPanel" ).trigger( "updatelayout" );
$.mobile.defaultDialogTransition = 'slide';
$.mobile.defaultPageTransition = 'slide';
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
var mySwiper = new Swiper('.swiper-container',{
centeredSlides: true,
slidesPerView: 2,
watchActiveIndex: true
});
});
</script>
你可以
试试这个:
$('#productinfo').live('pageinit',function(event){
swiper function...
});
我在尝试解决其他问题时遇到了这个问题的解决方案。我正在构建的网站是使用 php 生成的。html 已经嵌入,因此所有产品信息页面都具有相同的 ID #product_info,并且包含滑动器的div 始终具有 #product_image 的 ID。例如,通过向 id #product_image 添加一个 php 函数:
#product_image<?php echo $product_id; ?>
并给予与
var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{
我能够消除重新加载页面的需要。希望对某人有所帮助。
相关文章:
- 强制模板刷新ember.js
- 如何通过ajax刷新JSF填充的javascript变量
- 转义符不能与innerHTML一起使用
- 如何解决Yii中的页面刷新问题
- Jquery提交表单而不刷新
- 刷新页面后会出现警报
- 刷新后保留对网页的更改
- 如何在不刷新页面的情况下更新显示框
- 重定向时角度刷新浏览器
- 高亮显示与数组字符串一起使用时文本插件中断
- 如何防止jQueryonclick事件中的Ruby方法在页面刷新时执行
- Javascript,输出结果后页面不断刷新
- $(document).height()在刷新时随机化值(Safari 5.1.10)
- 刷新父窗口后无法关闭窗口
- 刷新页面时hasClass不起作用
- ngHide 指令仅在页面刷新后与 ngRoute 模块一起使用
- 将 iDangero.us Swiper与jQuery Mobile一起使用时需要刷新页面
- 两个图像刷新java脚本没有一起运行
- Javascript只在页面刷新后与ip一起工作,在使用dns进行刷新访问之前
- 自动HTML页面刷新保留滚动位置,与锚一起工作