让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
讓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功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MVC中使用代码创建数据库（code f
- 下一篇： LiveGBS高性能GB28181国标流