jquery mobile自定义列表视图格式

Posted 2023-05-09

【中文标题】jquery mobile自定义列表视图格式

【英文标题】：jquery mobile custom listview formatting

【发布时间】：2011-12-31 23:18:28

【问题描述】：

所以我正在开发一个使用 jquery 移动框架的网络应用程序，我希望有一种方法可以进一步自定义列表视图元素的外观。具体来说，我希望能够随意放置文本，并适当调整文本大小。我知道 jquery mobile 内置了 header 标签支持，以及一种让 class=ui-li-aside 的元素以较小的文本出现在列表元素右上角的方法。

但是，理想情况下，我想要一个选项略有不同的可重用列表视图元素。对于初学者，我想要一个 1 个字符的标题在列表元素中左对齐，字体基本上填满了列表项的整个高度。然后在右边，而不是右对齐并位于顶部的文本元素，我想要在中心垂直对齐并右对齐的东西。最后，我想要第三个文本元素，它与大 1 字符标题的左侧对齐，跨越列表视图元素的整个中间。

总的来说，我希望每个样式列表视图元素都能够像这样：（这实际上是 UITableViewCell 的图片，但要点是一样的）

计数气泡在查询移动设备中本地处理，只需要弄清楚如何为我要显示的其他三种类型的文本设置类

【参考方案1】：

ThemeRoller 似乎很适合自定义颜色、字体、边框……但不适用于以不同方式定位元素。我认为您需要编写自己的 .css 文件并覆盖 ui-li-heading、ui-li-aside 或 ui-li-desc 等类。 祝你好运

【讨论】：

我注意到 ui-li-aside 与 ui-li-desc 并排使用。两者之间的确切区别是什么？

AFAIK 的区别似乎是ui-li-aside 类用于右对齐的辅助组件，而ui-li-desc 用于左对齐的主要组件。

我实际上并不确定。似乎 ui-li-desc 被分配给 标签内的任何免费标签。在 jquery 渲染后，它也最终被分配给 ui-li-aside 组件。

看来，除了ui-li-heading，任何其他组件都获得了ui-li-desc 类。我认为您必须为每个组件创建自己的类并逐个定义它们。

【参考方案2】：

也许可以使用 JQM 1.0 附带的 ThemeRoller，我认为它是提供“可重用性”的最准确方法。但我认为你必须单独调整你想要的特殊特性，比如将文本高度填充到 100%。

http://jquerymobile.com/themeroller/

zY