让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%显示的图片的高度。

 

效果如下:

image1

代码如下:  

 

<!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浏览器窗口时,图片就显示 正常。本来想通过判断加载第一张图片是否完成的。使用的代码如下,但是依旧解决不了这个问题。不知道大家是否有更好的解决办法。

 

 
目录
相关文章
|
10月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
140 5
|
12月前
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
1653 3
|
11月前
|
JavaScript 前端开发 API
深入了解jQuery:简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery:简化Web开发的强大工具
82 0
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
113 3
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
106 1
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
123 0
|
前端开发 JavaScript UED
JSF 携手 jQuery 上演奇幻大戏,颠覆 Web 开发世界,你敢错过吗?
【8月更文挑战第31天】在Web开发领域,JavaServer Faces(JSF)与jQuery均是不可或缺的强大工具。JSF以组件为基础进行开发,而jQuery则以高效简洁的DOM操作及丰富的插件库著称。结合两者,能为Web应用注入新活力,实现复杂交互与动态效果。通过引入jQuery库并集成至JSF应用中,可轻松实现如动画、表单验证等功能,提升用户体验。本文通过具体示例展示了如何利用jQuery增强JSF应用,包括页面元素的动态显示与隐藏等效果,使开发过程更为便捷高效,激发更多创意可能。
77 0
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?