草庐IT

jQuery Mobile 独立滚动列表

coder 2023-08-12 原文

我正在使用 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>

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

谢谢

最佳答案

看看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>

希望对您有所帮助!

关于jQuery Mobile 独立滚动列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7844408/

jQueryMobilegtlt34htmluser-interfacejquery-mobile

有关jQuery Mobile 独立滚动列表的更多相关文章

  1. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  2. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  3. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  4. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  5. Ruby:如何将数组拼接成 Lisp 风格的列表？ - 2

    这是我发现自己偶尔想做的事情。假设我有一个参数列表。在Lisp中，我可以像这样`(imaginary-function,@args)为了调用将数组从一个元素转换为正确数量的参数的函数。Ruby中是否有类似的功能？或者我只是在这里使用了一个完全错误的成语？ 最佳答案 是的!它被称为splat运算符。a=[1,44]p(*a) 关于Ruby:如何将数组拼接成Lisp风格的列表？，我们在StackOverflow上找到一个类似的问题： https://stackov

  6. ruby-on-rails - Ruby on Rails 将列表拆分或切片为列 - 2

    @locations=Location.all#currentlistingall@locations=Location.slice(5)orLocation.split(5)使用Ruby，我试图将我的列表分成4列，每列限制为5个；然而，切片或拆分似乎都不起作用。知道我可能做错了什么吗？任何帮助是极大的赞赏。 最佳答案 您可能想使用in_groups_of:http://railscasts.com/episodes/28-in-groups-of这是RyanBates在railscast中的示例用法:

  7. Ruby 删除可枚举列表中的重复项 - 2

    ruby中有没有一个很好的方法来删除可枚举列表中的重复项(即拒绝等) 最佳答案 对于数组你可以使用uniq()方法a=["a","a","b","b","c"]a.uniq#=>["a","b","c"]所以如果你只是(1..10).to_a.uniq或%w{antbatcatant}.to_a.uniq因为无论如何，几乎所有您实现的方法都将作为Array类返回。 关于Ruby删除可枚举列表中的重复项，我们在StackOverflow上找到一个类似的问题： h

  8. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业，每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用，但是当我查看创建新作业的View时，我看到的只是一个文本框，我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验？ 最佳答案 想象一下，您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  9. ruby-on-rails - 独立测试 Rails 部分 View - 2

    我在标准rails2.1项目中使用Test/Unit。我希望能够独立于任何特定的Controller/操作来测试分部View。好像ZenTest'sTest::Rails::ViewTestCase会有所帮助，但我无法让它工作，与view_testhttp://www.continuousthinking.com/tags/view_test类似Google出现的大部分内容似乎都已经过时了，所以我猜它并不真正适用于Rails2.1非常感谢任何帮助。谢谢，罗兰 最佳答案 我们正在使用RSpec在我们的Rails2.1项目中，我们可以做

  10. ruby - 如何在 Ruby 中创建数字列表并将其反向附加到它 - 2

    给定一个最小整数和最大整数，我想创建一个数组，它从最小值到最大值以二为单位计数，然后倒退(再次以二为单位，重复最大数)。例如，如果最小数是1，最大数是9，我想要[1,3,5,7,9,9,7,5,3,1].我试图尽可能简洁，这就是我使用单行代码的原因。在Python中，我会这样做:range(1,10,2)+range(9,0,-2)在我刚刚开始学习的Ruby中，到目前为止我所想到的是:(1..9).inject([]){|r,num|num%2==1?r这行得通，但我知道必须有更好的方法。这是什么？ 最佳答案 (1..9).step

随机推荐