HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 phonegap教程 查看内容

phonegap-jq.mobil页面内部scroll

2013-11-20 16:50| 发布者: HTML5| 查看: 4391| 评论: 0|原作者: 夜阑小雨|来自: 夜阑小雨

摘要: 本来想着scroll用iscroll-4 的工具但是jq.mobil有冲突。后来研究发现jq.mobi具有一个插件jq.scroller.js可以很好的实现滚动效果。具体下载地址可以去jq.mobil 网站下载。使用方法:1.引入js文件2.写入脚本var myScro ...

本来想着scroll用 iscroll-4 的工具

但是jq.mobil 有冲突。后来研究发现

jq.mobi具有一个插件

jq.scroller.js

可以很好的实现滚动效果。

具体下载地址可以去jq.mobil 网站下载。

使用方法:

1.引入js文件

2.写入脚本

 

var myScroller; 
$.ui.ready(function(){ 
    myScroller=$("#viewport").scroller();//此处id就是为需要滚动的区域id   

});

 

3.html

 

  <div id="wrapper">    
             <div id="viewport">

             <li>Pretty row 1</li> 
            <li>Pretty row 2</li> 
            <li>Pretty row 3</li> 
            <li>Pretty row 4</li> 
            <li>Pretty row 5</li> 
            <li>Pretty row 6</li> 
            <li>Pretty row 7</li> 
            <li>Pretty row 8</li> 
            <li>Pretty row 9</li> 
            <li>Pretty row 10</li> 
            <li>Pretty row 11</li> 
            <li>Pretty row 12</li> 
            <li>Pretty row 13</li> 
            <li>Pretty row 14</li> 
            <li>Pretty row 15</li> 
            <li>Pretty row 16</li> 
             </div> 
        </div>

4.css:

 

#wrapper { 
            margin-top:10px; 
            height:80%;//此处可以指定固定高度来实现小区域内的滚动或者省略 
            left:-9999px; 
            width:99.5%; 
            border:1px solid #333; 
        } 
         #viewport {      
        background:#FC9; 
         padding:0 10px; 
         }

作者:夜阑小雨
原文链接:phonegap-jq.mobil页面内部scroll
夜阑小雨版权所有,转载本网站文章时请保留此信息。


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-28 06:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部