css - JQuery 移动版 : Replace thumbnail with data element-6ren

css - JQuery 移动版 : Replace thumbnail with data element

转载作者：行者123 更新时间：2023-11-28 14:14:17

25

4

在 JQuery 移动 ListView 中，如何用数据元素替换左侧缩略图？

假设我有一份日常锻炼技巧 list 。我想显示提示的“日”，而不是左侧的图像。像这样:

4 举起一些重物 -->
3 做一些深蹲 -->
2 做一些俯卧撑 -->
1 拉伸(stretch)你的肌肉 -->

假设在“tips”模型中，有一个“Day”字段，就像有一个内容字段一样。日是一个数字。

所以，而不是这个当前代码(用于将 img 放在左边)

<div data-role="content" data-theme="d" >
  <div class="content-primary">
    <ul data-role="listview" >
      <% @all_challenges.each do |tip| %>
        <li><a href="#">
                <img src="/images/icondock/accept2.png" class="ui-li-icon">
                <h3><%= tip.outboundtitle %></h3>
            </a>
                <ul><!-- Second page with full tip -->
                    <li>
                        <br />
                        <p><%= tip.outgoing %></p>
                    </li>
                </ul>
        </li>
    <% end %>
</ul>

我想用数据元素替换该行:<%= tip.day %>

我想不通的是如何让 JQuery Mobile 让我在左侧保留 32X32 的大空间，但不希望那里有图像。我想在那里放一个大数字(天)。

如果我用 <%= tip.day %> 替换 img src 行，它只是将数字放在提示的 TOP 上，并且两者都是左对齐的。两行。

有什么想法吗？

最佳答案

刚刚创建了一个带有硬编码值的示例。希望这就是您要找的。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
    .day{
        margin-top: -15px;
        font-size:1.5em;
        color:red;
    }
    #list .ui-link-inherit{
        padding-left:30px;
    }
</style>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
    <h1>Test Page</h1>
</div>
<div data-role="content"> 
    <ul id="list" data-role="listview" data-inset="true">
        <li><a href="#"><div class="day ui-li-icon ui-li-thumb">4</div>Lift some weights</a></li>
        <li><a href="#"><div class="day ui-li-icon ui-li-thumb">3</div>Do some squats</a></li>
        <li><a href="#"><div class="day ui-li-icon ui-li-thumb">2</div>Do some pushups</a></li>
        <li><a href="#"><div class="day ui-li-icon ui-li-thumb">1</div>Stretch your muscles</a></li>
    </ul>
</div>
</body>
</html>

此处演示 - http://jsfiddle.net/5PPs4/

如果有帮助请告诉我

关于css - JQuery 移动版 : Replace thumbnail with data element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9176533/

25

4

0

文章推荐： javascript - TypeError : xxx.包含不是React中的函数

文章推荐： javascript - cryptojs 和 golang 给出不同的 sha3 哈希值

c - 链接描述文件中 *(.data)、*(.data*) 和 *(.data.*) 之间的区别
只是想知道这些结构之间有什么区别(text、data、rodata、bss 等)在链接描述文件中: .data : { *(.data) } .data : { *(.data*) }
haskell - 从 Data.Data.Data 了解 gfoldl 的类型签名
Data 定义为其核心功能之一 gfoldl : gfoldl :: (Data a) => (forall d b. Data d => c (d -> b) -> d -> c b)
aem - data-sly-use、data-sly-resource、data-sly-include 和 data-sly-template 之间有什么区别？
以下之间有什么区别:data-sly-use、data-sly-resource、data-sly-include 和数据-sly-模板？我正在阅读 Sightly AEM 上的文档，我非常困惑。
spring-data - 休眠搜索与 spring-data-solr ， spring-data-elasticsearch
我有一个 Spring Boot、Spring Data JPA (hibernate) Web 应用程序，并且想引入文本搜索功能。我理解以下内容 hibernate search 或 spring
c - 错误: Expected expression before 'DATA/* : typedef struct DATA DATA */
我不知道我的代码有什么问题。我读了其他有同样问题的人的一些问题，但没有找到答案。当我尝试编译时出现以下错误: ||In function 'main':| |35|error: expected ex
r - as.data.frame.default(data): cannot coerce class “” formula“” to a data.frame中的错误
我不太确定为什么会收到此错误或其含义。我的数据框称为“数据”。 library(dplyr) data %>% filter(Info==1, Male==1) %>% lm(CFL_
html - data-value、data-title、data-original-title、original-title等的用途和用法是什么？
我一直在 GitHub 等更现代的网站上看到这些属性，它们似乎总是与自定义的弹出窗口一致，如 title 属性。 Option 1 Option 2 Option 3 Option 4 我在 HTML
core-data - Swift - 用 iCloud Core Data 替换 Core Data
如何用 iCloud Core Data 替换我现有的 Core Data？这是我的持久商店协调员: lazy var persistentStoreCoordinator: NSPersistent
html - data-value、data-title、data-original-title、original-title等的用途和用法是什么？
我一直在 GitHub 等更现代的网站上看到这些属性，它们似乎总是与自定义的弹出窗口一致，如 title 属性。 Option 1 Option 2 Option 3 Option 4 我在 HTML
android -/data/data/是安装路径的可靠假设吗？
我正在通过 this project 在 Android 上摆弄 node.js ，我需要一种方法将 js 文件部署到私有(private)目录(以隐藏源代码，防止用户篡改)，该目录也物理存在于文件系
core-data - SwiftUI ImagePicker 将 (Image -> UIImage --> Data) 保存到 Core Data
大家好我有点沮丧，所以我希望得到一些帮助。我的项目在 SwiftUI 中。我想使用图像选择器将图像保存到 Core Data。我实现了让 ImagePicker 工作，但我正在努力转换 Image -
r - 尽管 data.frame 可以，但为什么 data.table 没有从表中创建 data.table？
我有以下数据和代码: mydf grp categ condition value 1 A X P 2 2 B X P 5
r - mlogit.data() 错误 : Assigned data `ids` must be compatible with existing data
我一直在努力解决这个问题，但我根本找不到任何解决问题的方法。希望这里有人可以提供帮助。我正在尝试为具有以下结构的某些数据创建个人选择矩阵: # A tibble: 2,152 x 32 a
haskell - Data.Map 与 Data.Map.Strict 和 Data.Map.Lazy
我了解 Data.Map.Lazy 和 Data.Map.Strict 是不同的。但是，当您导入 Data.Map 时，您究竟导入了什么:严格的、惰性的还是两者的组合？最佳答案懒人。看着docs
c - 如何让 DBCursor->get(...) 识别我为 key.data 和 data.data 分配的内存
我正在开发一个 C 程序，用于从 BerkeleyDB DBTree 数据库中提取数据值与特定模式匹配的记录。我创建数据库，打开它，将键的 DBT 和数据的另一个 DBT 清零，将 DBT 标志设置为
mysql : Previous Row data if data on another row is equal to data on current row
所以我有以下成员(member)历史表 User_ID | Start date | End Date | Type(0-7) | ---------------------------
r - 基准 data.frame (base), data.frame(package dataframe) 和 data.table
随着最近推出的包dataframe ，我认为是时候正确地对各种数据结构进行基准测试，并突出每种数据结构的优势。我不是每个人的不同优势的专家，所以我的问题是，我们应该如何对它们进行基准测试。我尝试过的
javascript - Vue+Laravel : How to mounted data from api if data in form array in one of tuple data
我有来自 API 的数据，但无法将数组中的数据设置为 vue.js 中的 this.data这是来自 API 的数据(JSON) 你能告诉我这个语法吗 {"id":1613, "name_org":"
javascript - Vue.js 中 'data:' 、 'data: ()' 和 'data()' 之间有什么区别
在 Vue.js到目前为止，我已经找到了两种定义数据的方法:data: {} 和 data() { return; }. data: { defaultLayout: 'default' }
spring-data-rest - 如何在Spring Data Rest中添加自定义拦截器(spring-data-rest-webmvc 2.3.0)
我正在研究Spring Data Rest Services，并在自定义拦截器中遇到一些问题。之前我使用spring-data-rest-webmvc 2.2.0并以以下方式添加了拦截器。 publi

首页

博学

6Ren·AI

商城

css - JQuery 移动版 : Replace thumbnail with data element