jQuery 移动滚动视图 [英] jQuery Mobile Scrollview

问题描述

所以我想制作一个可滚动的列表:

<ul data-role="listview" id="mainList" ><asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static"><项目模板><li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)"><div id="divPic" runat="server" class="pic"><h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2><p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p><input type="hidden" Id="brand" runat="server"/><input type="hidden" Id="cat" runat="server"/>
</ItemTemplate></asp:中继器>

封闭在:<.section class="ex_list" style="float: right; width:70%;overflow:hidden"> 标签

我使用以下脚本:

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

除了jqm和jq.问题是在 PC 上滚动不起作用(但还不错)，但在 iPad 上，除了列表视图之外，整个站点都在滚动.用户还可以滚动网站并看到灰色背景，直到 safari 停止滚动.

此外，这两个 JS 使 'toggleClass()' jQuery 函数不起作用.

解决方案

我刚刚在 android(2.2 和 3.2)和 iphone(不是 ipad)上实现了这个，以便滚动视图正常工作，你需要包含 css 文件，以及 jquery 缓动 脚本.

脚本必须按以下顺序包含:

1. jquery
2. jquery.mobile
3. jquery.easing
4. jquery.mobile.scrollview
5. 滚动视图

css 文件给你滚动条，jquery.easing 给你平滑动画(本身就是一个令人印象深刻的项目)，jquery.mobile.scrollview 完成了繁重的工作，scrollview 抓取页面并添加足够的标记让 scrollview 接管.

我确定我不需要告诉你它是实验性的"是有原因的(滚动列表视图时的奇怪行为，它还破坏了点击按钮和铬浏览器文本区域的能力 -我没有测试过其他浏览器)，但是我在移动设备上发现它的问题很少.我真的很喜欢它使我能够始终将标签保留在页面顶部.嵌套多个滚动视图也很酷.

我不能说我注意到 toggleClass 函数有任何问题，但这可能与滚动视图浏览和添加标记有关.

注意:从最新版本的 jQuery mobile rc2 开始，按钮和文本输入应该可以工作.

编辑

从 jQuery Mobile 1.1.0 开始，它是 建议 使用 固定标题data-position="fixed" 页眉(或页脚)中的属性并完全删除滚动视图.

我自己尝试过，效果更好(对于 Android 2.2+ 和 iOS5 - 黑莓操作系统未经我测试，但博客声称它应该适用于 BB7).它比 js 解决方案运行得更快更流畅，并且图形错误更少.请务必删除所有额外的 js、css 和所有对 data-scroll 的引用，因为它会干扰/破坏一切.

对于不受支持的版本和操作系统，您可能仍然需要滚动视图 js/css 等，但根据我的经验，不支持固定标头的地方太慢而无法运行 js 版本.

So I'm trying to make a scrollable list:

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y">
    <ul data-role="listview" id="mainList" >
        <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static">
            <ItemTemplate>
                <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)">
                    <div id="divPic" runat="server" class="pic">
                        <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2>
                        <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p>
                        <input type="hidden" Id="brand" runat="server"/>
                        <input type="hidden" Id="cat" runat="server"/>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

enclosed in: <.section class="ex_list" style="float: right; width:70%;overflow:hidden"> tag

I use following scripts:

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

In addition to jqm and jq. Problem is that on PC scrolling doesn't work (yet it's not so bad), but on iPad whole site is being scrolled in addition to listview. User can also scroll OVER the site and see gray bg, until safari stops scrolling.

EDIT: In addition these 2 JS's make 'toggleClass()' jQuery function not work.

解决方案

I just finished implementing this on android(2.2 and 3.2) and on iphone (not ipad) for scrollview to work properly, you need to include the css file, and the jquery easing script.

Scripts must be included in this order:

1. jquery
2. jquery.mobile
3. jquery.easing
4. jquery.mobile.scrollview
5. scrollview

The css file gives you the scroll bars, jquery.easing gives the smooth animation (an impressive project by itself), jquery.mobile.scrollview does the heavy lifting, scrollview scrapes the page and adds enough markup for the scrollview to take over.

I am sure I don't need to tell you that it's is 'Experimental' for a reason (bizarre behaviour while scrolling through a listview, it also breaks the ability to click on buttons and in text areas on chromium-browser - I haven't tested other browsers), however I have found very few problems with it on mobile devices. I really like that it enables me to keep the tabs at the top of the page all the time. Nesting many scrollviews is pretty cool as well.

I can't say that I have noticed any problems with toggleClass function, however that might have something to do with scrollview going through and adding markup.

NOTE: As of the most recent version of jQuery mobile rc2, the buttons and text inputs should work.

EDIT

As of jQuery Mobile 1.1.0, it is recommended to use the fixed headers using the data-position="fixed" attribute in the header (or footer) and completely remove scrollview.

I have tried this myself and it works much better (for Android 2.2+ and iOS5 - BlackBerry OS not tested by me, but the blog claims it should work for BB7). It runs faster and smoother than the js solution and has fewer graphical bugs. Be sure to remove all the extra js, css and all references to data-scroll as it interferes/breaks everything.

For unsupported versions and OS's you might still need the scrollview js/css etc, but in my experience the places that don't support the fixed headers were too slow to run the js version anyway.

这篇关于jQuery 移动滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！