让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

项目中有两份代码，一份是Main Site，一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能，让多张图片循环显示。但是这个功能移植到Mobile Site中，出现了一些问题。

因为本身要实现scrollable功能，必须有特定的html结构和css。然后调用scrollable()方法才能实现这个功能。一个基本scrollable实现代码可以参考jQuery Tools的官方文档。参考地址：http://jquerytools.org/demos/scrollable/

.scrollable{position:relative;overflow:hidden;width:660px;height:90px;
}

可以看出我们必须设置最后可显示区域的宽和高。其实这个高度也就是所包含的图片的宽和高。在Mobile Site开发过程中，为了适应手机拥有不同的分辨率和大小尺寸。在开发过程必须对图片的width设置为100%，图片的height不设定。当用户使用不同的分辨率的手机查看站点时，浏览器自动缩放图片。但是问题就来了，我们要实现scrollabel功能，必须设置可见区域的宽度和高度。

所以需要在页面load之后就进行 resize操作。基本解决办法是在调用scrollable()方法之前就进行图片的resize操作。但是这个解决方案有一个很的问题就是如何去判定当前要显示的三张图片的第一章显示的默认宽高。因为我们将图片的width设置为100%，height需要等浏览器解析完成才能取得。如果本身图片不是放在应用程序的目录，是从第三方或者云存储平台过来的话，取得图片的height都是为0，所以我们在项目代码中加入1秒的延时，通过延时1秒才去读取浏览器默认使用width：100%显示的图片的高度。

效果如下：

代码如下：　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Scrollable with resizing for mobile web</title>

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width" /><style type="text/css">#mainContainer{margin: 0 auto;width: 100%;height: 100%;}#scrollable{/* required settings */position: relative;overflow: hidden;}.scrollable .items{/* this cannot be too large */width: 20000em;position: absolute;}.items div{float: left;}</style><!-- jQuery Library + UI Tools --><!--<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/jquery.tools.min.js"></script>--><script src="jquery.tools.min.js" type="text/javascript"></script>
</head>
<body><div id="mainContainer"><a class="prev browse left"></a><!-- root element for scrollable --><div class="scrollable" id="scrollable"><!-- root element for the items --><div class="items"><!-- 1--><div><img id="originalImg" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg"width="100%" /></div><!-- 2 --><div><img src="http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg" width="100%" /></div><!-- 3 --><div><img src="http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg" width="100%" /></div></div></div><!-- "next page" action --><a class="next browse right"></a></div><div>Hello World.</div><script type="text/javascript">
function widthUpdate() {//$("body").width()即取得当前viewport的宽度
            $("#scrollable .items div img").css("width", $("body").width());var ModuleHeight = $("#scrollable .items div img").outerHeight();if (ModuleHeight != 0) {$("#scrollable").css("height", ModuleHeight);}}$(window).resize(function () {widthUpdate();});$(function () {setTimeout(function () {widthUpdate();}, 1000);//scrollable for images
            setTimeout(function () {$(".scrollable").scrollable({ speed: 400, circular: true }).navigator().autoscroll();}, 2000);});</script>
</body>
</html>

不知道园子里面有人是否遇到过相同的问题。这个bug在本地测试问题好像不大，并且我们使用asp.net页面缓存。所以开发的时候根本发现不了这个问题。上线之后，用户可能是第一次访问我们的站点，那么我们之前的代码获得图片的高度为0，所以根本不显示图片，但是我们resize浏览器窗口时，图片就显示正常。本来想通过判断加载第一张图片是否完成的。使用的代码如下，但是依旧解决不了这个问题。不知道大家是否有更好的解决办法。

转载于:https://www.cnblogs.com/aaaba/archive/2013/04/13/3017904.html

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能相关推荐

【jquery模仿net控件】简单的datalist控件更新，及其简单应用
接上次的帖子:http://www.cnblogs.com/yexiaochai/archive/2012/01/22/2328729.html 简单的更新了一下代码,主要针对datalist,这次主 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
JQuery Highcharts图表控件使用说明
JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...
jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
jquery+bootstrap分页控件
jquery+bootstrap分页控件源码: (function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = para ...
jQuery取得列表控件选中的option对象
开发工具与关键技术:VS 后端作者:陈芝番撰写时间:2019.7.7 这个jQuery取得列表控件选中的option对象,比起原始表单控件清晰看到option对象,但还是各有各的特点,jQue ...
KingPager，自己做的分页控件，纯JS，支持所有语言
效果图如下: 简介: 1.JQuery分页控件,纯JS,支持任何语言 2.全部样式可通过CSS自定义(默认的就很好看) 3.非常灵活,1行代码即可实现分页调用示例: <html xmlns=& ...
java web 打印控件_web打印，web打印控件，dotnet web打印控件，java web打印控件，webprint...
webprint打印参数设置小插件,主要实现打印纸张,边距,打印机等的设置. 主要功能: 设置页眉页脚属性设置打印页面左右上下边距设置打印方向,打印份数,打印指定页打印模版和指定纸型绑定设置自 ...
.net OCX 无法获取“****”控件的窗口句柄，不支持无窗口的ActiveX控新解决方法...
2019独角兽企业重金招聘Python工程师标准>>> 朋友找我帮原来的软件加一个小功能,程序是用VB.NET 写的. 软件需要与外部串口设备通信,一只带串口功能的压力表. 应该时间 ...

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能相关推荐

最新文章

热门文章