jQuery Mobile 独立滚动列表

发布于 2024-12-11 06:39:37 字数 1749 浏览 0 评论 0原文

我正在使用 jQueryMobile 框架创建一个移动 Web 应用程序，该框架需要并排向用户显示 2 个列表。这里的问题是，我希望列表彼此独立移动，以便用户可以从左侧列表中选择一个项目，并从右侧列表中选择另一个项目，而无需同时滚动两个列表。

我研究了以下移动插件：

asyraf9.github.com/jquery-mobile/

这是一个很好的解决方案，但它更以菜单/页面为中心，我希望这两个元素都在单个页面中列出。

我在想：

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
        <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
    <div class="ui-block-b" style="width:50%">
        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;">
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
</div>

还有其他人提出可行的解决方案吗？

谢谢

原文

I'm creating a Mobile Web Application using the jQueryMobile framework that requires 2 lists to be shown to the user side by side. The catch here is that I would like to have the lists move independent of one another so the user can pick and item from the left hand list, and another from the right hand list without scrolling both lists at the same time.

I've investigated the following plugin for mobile:

asyraf9.github.com/jquery-mobile/

which is a great solution, but it is more menu/page centric, and I would like to have both elements to be lists within a single page.

I was thinking something along the lines of:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
        <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
    <div class="ui-block-b" style="width:50%">
        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;">
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
</div>

Has anyone else come up with a workable solution?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风无影 2024-12-18 06:39:37

看看iScoll 4；它可能不是 jQuery，但它是一个很棒的移动滚动 JavaScript 插件。

您可以为每个 UL 添加一个 ID，并分别为每个 UL 添加一个卷轴，如下所示：

通过您的示例，您将遵循以下原则：

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
    var scroller_1;
    var scroller_2;
    function loaded() {
        scroller_1 = new iScroll('ul-1');
        scroller_2 = new iScroll('ul-2');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

我希望这会有所帮助！

Take a look at iScoll 4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.

You would add an ID to each UL and attach a scroll to each one separately like this:

With your example you would be something along these lines:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
    var scroller_1;
    var scroller_2;
    function loaded() {
        scroller_1 = new iScroll('ul-1');
        scroller_2 = new iScroll('ul-2');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

I hope this helps!

回复收藏 0 原文