JQuery mobile: заменить миниатюру элементом данных - PullRequest
Новая
       0

JQuery mobile: заменить миниатюру элементом данных

0 голосов
/ 07 февраля 2012

В мобильном списке JQuery, как я могу заменить левое уменьшенное изображение элементом данных?

Скажем, у меня есть список советов по ежедневным упражнениям.Вместо изображения слева я хочу показать «День» чаевых.Вот так:

4 Поднимите несколько весов ->3 Делай приседания ->2 Делать отжимания ->1 Растянуть мышцы ->

Предположим, что в модели "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 слева, но не ожидатьизображение там.Я хочу поместить туда большое число (день).

Если я заменю строку img src на <% = tip.day%>, то просто поместим число в TOP чаевые, и оба оставлены выровненнымиДве строки.

Есть идеи?

1 Ответ

0 голосов
/ 07 февраля 2012

Только что создал образец с жестко закодированными значениями. Надеюсь, это то, что вы ищете. 

<!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/

Дайте мне знать, если это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...