- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望使用 jQuery Mobile 创建这个常见的(在 iPhone 上)列表类型:
关键功能是从右侧向下运行的字母表,它将滚动到最接近的匹配项。
像这样的东西已经存在还是我需要自己动手?我无法在演示中找到它,尽管 List dividers让我在那里的一部分。
最佳答案
嗯,这是一项正在进行的工作,但我认为可以完成。例子:
#list-navigation {
color:#696969;
position:absolute;
right:0px;
top:0px;
z-index:200;
}
$('.scrollToSelected').bind('click', function() {
var view = $(this).attr('id');
var list = view.split('-');
var elem = $("#"+list[1]);
// not sure if this is offset or position
var position = elem.position();
var offset = elem.offset();
//alert('left: '+position.left + ", top: " + position.top);
//alert('left: '+offset.left + ", top: " + offset.top);
$.mobile.silentScroll(position.top);
//$.mobile.silentScroll(offset.top);
});
$('.showDetails').bind('click', function() {
$.mobile.changePage( "#details", { transition: "slideup"} );
});
<div data-role="page" id="list">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="a">A</li>
<li class="showDetails">
Adam Kinkaid
</li>
<li class="showDetails">Alex Wickerham</li>
<li class="showDetails">Avery Johnson</li>
<li data-role="list-divider" id="b">B</li>
<li class="showDetails">Bob Cabot</li>
<li data-role="list-divider" id="c">C</li>
<li class="showDetails">Caleb Booth</li>
<li class="showDetails">Christopher Adams</li>
<li class="showDetails">Culver James</li>
<li data-role="list-divider" id="d">D</li>
<li class="showDetails">David Walsh</li>
<li class="showDetails">Drake Alfred</li>
<li data-role="list-divider" id="e">E</li>
<li class="showDetails">Elizabeth Bacon</li>
<li class="showDetails">Emery Parker</li>
<li class="showDetails">Enid Voldon</li>
<li data-role="list-divider" id="f">F</li>
<li class="showDetails">Francis Wall</li>
<li data-role="list-divider" id="g">G</li>
<li class="showDetails">Graham Smith</li>
<li class="showDetails">Greta Peete</li>
<li data-role="list-divider" id="h">H</li>
<li class="showDetails">Harvey Walls</li>
<li data-role="list-divider" id="m">M</li>
<li class="showDetails">Mike Farnsworth</li>
<li class="showDetails">Murray Vanderbuilt</li>
<li data-role="list-divider" id="n">N</li>
<li class="showDetails">Nathan Williams</li>
<li data-role="list-divider" id="p">P</li>
<li class="showDetails">Paul Baker</li>
<li class="showDetails">Pete Mason</li>
<li data-role="list-divider" id="r">R</li>
<li class="showDetails">Rod Tarker</li>
<li data-role="list-divider" id="s">S</li>
<li class="showDetails">Sawyer Wakefield</li>
</ul>
<ul data-role="none" id="list-navigation">
<li>
<p id="list-1" class="scrollToSelected"><strong>1</strong></p>
<p id="list-2" class="scrollToSelected"><strong>2</strong></p>
<p id="list-3" class="scrollToSelected"><strong>3</strong></p>
<p id="list-a" class="scrollToSelected"><strong>A</strong></p>
<p id="list-b" class="scrollToSelected"><strong>B</strong></p>
<p id="list-c" class="scrollToSelected"><strong>C</strong></p>
<p id="list-d" class="scrollToSelected"><strong>D</strong></p>
<p id="list-e" class="scrollToSelected"><strong>E</strong></p>
<p id="list-f" class="scrollToSelected"><strong>F</strong></p>
<p id="list-g" class="scrollToSelected"><strong>G</strong></p>
<p id="list-h" class="scrollToSelected"><strong>H</strong></p>
<p id="list-i" class="scrollToSelected"><strong>I</strong></p>
<p id="list-j" class="scrollToSelected"><strong>J</strong></p>
<p id="list-k" class="scrollToSelected"><strong>K</strong></p>
<p id="list-l" class="scrollToSelected"><strong>L</strong></p>
<p id="list-m" class="scrollToSelected"><strong>M</strong></p>
<p id="list-n" class="scrollToSelected"><strong>N</strong></p>
<p id="list-o" class="scrollToSelected"><strong>O</strong></p>
<p id="list-p" class="scrollToSelected"><strong>P</strong></p>
<p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
<p id="list-r" class="scrollToSelected"><strong>R</strong></p>
<p id="list-s" class="scrollToSelected"><strong>S</strong></p>
<p id="list-t" class="scrollToSelected"><strong>T</strong></p>
<p id="list-u" class="scrollToSelected"><strong>U</strong></p>
<p id="list-v" class="scrollToSelected"><strong>V</strong></p>
<p id="list-w" class="scrollToSelected"><strong>W</strong></p>
<p id="list-x" class="scrollToSelected"><strong>X</strong></p>
<p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
<p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="details">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Details</li>
<li><a href="#list" data-direction="reverse">List</a></li>
</ul>
<br />
<p>
Here are the details you were looking for
</p>
</div>
</div>
关于jquery-mobile - jQuery Mobile 是否有现有的按字母顺序排列的列表小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7933063/
我需要在给定的列表上生成排列。我设法这样做 let rec Permute (final, arr) = if List.length arr > 0 then for x i
我正在尝试运行我的代码,以便它打印循环排列,尽管我目前只能让它执行第一个排列。它正确运行到我标记的点,但我看不出出了什么问题。我认为 while 循环中没有中断,但我不确定。确实需要一些帮助。 pac
我正在尝试计算不包含连续字母的排列数。我的代码通过了像“aabb”(答案:8)和“aab”(答案:2)这样的测试,但没有通过像“abcdefa”这样的情况(我的答案:2520;正确答案:3600)。这
我正在尝试使用 dplyr 的 arrange 根据条件对字符串进行排序。我想在一列上排列,但如果第二列等于一个值,则按升序排列,如果第二列等于另一个值,则按降序排列。 我发现了几个类似的问题(其中一
在 R 中,我使用 dplyr更具体地说 arrange() . 不知何故 arrange功能没有按预期工作。 在下面的示例中,我首先存储列的名称,然后将此变量作为参数传递给名为“my_functio
以下是我的 main.qml : Window { id: window visible: true width: 800 height: 480 title:
很难用谷歌搜索这个问题,因为我不确定这些概念叫什么,并且所有“两个数组/组的组合”SO 帖子都没有给我我期望的输出。 数组示例: var array1 = ['Bob', 'Tina']; var a
实现以下目标的最佳方法是什么?我有两个列表: val l1 = List("a", "b") val l2 = List(1, 2) 我想生成这个: List ( List(('a', 1)
我知道互联网上有很多针对我的具体问题的解决方案,但我一直在尝试以特定的方式解决它,但它不起作用,我真的无法理解出了什么问题。就我而言,我只想打印排列。这是我的代码: a = "abc"; functi
我有这样的代码来创建排列: --unique permutation perm :: [t] -> [[t]] perm [] = [[]] perm (x:xs) = [(y:zs) | (y,ys
有没有比使用基本公式 n!/(n-r)! 更好的方法?就像我们对 nCr(组合) nCr = (n-l)Cr + (n-1)C(r-1) 一样? 最佳答案 这样怎么样:nPr = (n−1)Pr +
此问答的动机是 How to build permutation with some conditions in R . 到目前为止,已经有一些很好的 R 软件包,例如 RcppAlgos 和 arr
我正在修改一本书中的排列示例。以下代码按预期工作。 perms([]) -> [[]]; perms(L) -> [[H|T] || H []; 它返回一个空列表。当我替换时,我得到了这个。
大约一周前,我问了一个关于帮助我解决这个问题的问题 Java permutations ,打印排列方法有问题。我已经整理了我的代码,并有一个现在可以工作的工作示例,尽管如果 5 位于数组中的第五个位置
我有一个包含重复元素的列表,即orig = [1,1,1,2,2,3]。 我想创建一个derangement b = f(orig),使得 b 中的每个位置值都与 orig 中的值不同: b[i] !
我想生成一个 array a 的排列而且我不想使用实用功能,例如 java.util.Collections() . 排列应该是随机的,并且每个排列都应该有可能发生 - 但不需要均等分布的概率。 以下
我有一个作业:用户输入一个字符串,例如 ABCD,程序必须给出所有排列。我不希望整个代码只是一个提示。这是我到目前为止在他们那里得到的,我没有得到任何实现。 以ABCD为例: 在本例中获取字符串长度的
我目前正在编写一个使用 itertools 的程序,其中的一部分似乎无法正常运行。我希望确定排列函数输出列表长度的输入等于它生成输出的列表长度。换句话说,我有 import itertools b =
我有一个列表 x=[1,2,3,4,5] 并且想查看这个列表的不同排列,一次取两个数字。 x=[1,2,3,4,5] from itertools import permutations y=list
我正在寻找 C 或 Python 代码来实现两个伪代码函数之一: function 1: list1 = [0,1,2] #any list of single-integer elements li
我是一名优秀的程序员,十分优秀!