본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Text Formatting & Counts(텍스트와 리스트 카운트)

by 대소니 2011. 6. 29.
프레임웍크는 HTML 의미적 마크업을 통해 해더/설명, 보조정보, 카운트와 같은 일반적인 목록 패턴에 대한 텍스트 서식 규칙을 포함하고 있습니다.
-  리스트 항목 오른쪽에 숫자 indicator를 추가하기 위해, ui-li-count의 class를 갖는 요소안에 number로 감쌉니다.
-  텍스트 계층을 추가하려면, 제목의 폰트를 강조하고 강조를 사용하지 않는 구문을 사용합니다.
-  보조 정보는 ui-li-aside의 class를 갖는 요소를 감싸서 리스트 항목의 오른쪽에 추가되어집니다.


<div class="content-primary">
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="index.html">
   
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
   
</a></li>
<li><a href="index.html">
   
    <h3>jQuery Team</h3>
    <p><strong>Boston Conference Planning</strong></p>
    <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
    <p class="ui-li-aside"><strong>9:18</strong>AM</p>
   
</a></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li><a href="index.html">
    <h3>Avery Walker</h3>
    <p><strong>Re: Dinner Tonight</strong></p>
    <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
    <p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li><a href="index.html">
    <h3>Amazon.com</h3>
    <p><strong>4-for-3 Books for Kids</strong></p>
    <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
    <p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a></li>
<li><a href="index.html">
    <h3>Mike Taylor</h3>
    <p><strong>Re: This weekend in Maine</strong></p>
    <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
    <p class="ui-li-aside"><strong>6:24</strong>AM</p>
</a></li>
<li><a href="index.html">
    <h3>Redfin</h3>
    <p><strong>Redfin listing updates for today</strong></p>
    <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
    <p class="ui-li-aside"><strong>5:52</strong>AM</p>
</a></li>
    <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
    <li><a href="index.html">
        <h3>Angela Smith</h3>
        <p><strong>Link Request</strong></p>
        <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
        <p class="ui-li-aside"><strong>6:24</strong>AM</p>
    </a></li>
    <li><a href="index.html">
        <h3>Mike Taylor</h3>
        <p><strong>This weekend in Maine</strong></p>
        <p>Sounds good, let me check into our plans.</p>
        <p class="ui-li-aside"><strong>6:24</strong>AM</p>
    </a></li>
</ul>
</div><!--/content-primary -->       



<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->


댓글1

  • 알 수 없는 사용자 2011.06.30 09:42

    유용한 정보군요. 많은 분들께 도움되길 바랍니다.
    답글