jQuery Mobile 목록 내용
jQuery 모바일 목록 아이콘
기본적으로 각 목록 항목에는 화살표 아이콘 "carat-r"(오른쪽 화살표)이 포함됩니다. 이 아이콘을 수정하려면 데이터 아이콘 속성을 사용할 수 있습니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">默认是右箭头</a></li> <li data-icon="plus"><a href="#">data-icon="plus"</a></li> <li data-icon="minus"><a href="#">data-icon="minus"</a></li> <li data-icon="delete"><a href="#">data-icon="delete"</a></li> <li data-icon="location"><a href="#">data-icon="location"</a></li> <li data-icon="false"><a href="#">data-icon="false"</a></li> </ul> </div> </div> </body>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
 | data-icon=" false" 이면 아이콘이 제거됩니다. |
|---|
더 완전한 jQuery Mobile 버튼 아이콘을 보려면 jQuery Mobile을 방문하세요. 아이콘 참조 매뉴얼 .
16x16 아이콘
목록에 표준 16x16px 아이콘을 추가하려면 목록 항목에 <img> 요소를 추가하고 "ui-li-icon" 클래스를 사용할 수 있습니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
jQuery 모바일 목록 썸네일
16x16px보다 큰 이미지의 경우 링크에 <img> 요소를 추가하세요.
jQuery Mobile은 자동으로 이미지 크기를 80x80px로 조정합니다.
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
표준 HTML을 사용하여 목록 정보를 추가하세요.
예
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>包含缩略图的列表:</h2> <ul data-role="listview" data-inset="true"> <li> <a href="#"><img src="chrome.png"></a> </li> <li> <a href="#"><img src="firefox.png"></a> </li> </ul> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
jQuery 모바일 목록 아이콘
목록에서 클래스="ui-li-icon" 사용< ;img> 요소를 추가하여 16x16px 아이콘:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
분할 버튼
JQuery 목록에서 모바일에서는 콘텐츠 작업에 대해 서로 다른 두 가지 옵션을 만들어야 하는 경우가 있는데, 이때 옵션에서 링크 버튼을 분할해야 합니다. 분할을 달성하는 방법은 다른 요소를
jQuery Mobile은 자동으로 두 번째 링크를 파란색 화살표 아이콘으로 설정하고, 사용자가 마우스를 올리면 아이콘의 링크 텍스트(있는 경우)가 표시됩니다. 아이콘이 표시됩니다:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>拆分按钮</h2> <ul data-role="listview" data-inset="true"> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p> </a> <a href="#">文本信息</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p> </a> <a href="#">文本信息</a> </li> </ul> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
일부 페이지와 대화 상자를 추가하여 링크 기능을 더욱 풍부하게 만드세요.
인스턴스
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>请点击齿轮图标！</h2> <ul data-role="listview" data-inset="true"> <li data-role="divider">浏览器</li> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p> </a> <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p> </a> <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a> </li> </ul> </div> </div> <div data-role="page" id="download" data-dialog="true"> <div data-role="main" class="ui-content"> <h3>拆分按钮实例</h3> <p>该按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-shadow ui-corner-all ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">取消</a> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
풍선 번호
풍선 번호는 사서함의 이메일과 같은 목록 항목과 관련된 번호를 표시하는 데 사용됩니다.
풍선 번호를 추가해야 하는 경우 <span>과 같은 인라인 요소를 사용하고 클래스를 설정하세요. "ui-li -count" 속성을 지정하고 숫자를 추가하세요.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>我的邮箱</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li> <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li> <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li> </ul> </div> </div> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
참고: 버블 번호가 정확하면 프로그래밍 방법을 수정해야 합니다. 이에 대해서는 이후 장에서 설명하겠습니다.
더 많은 예시
팝업 목록
팝업 목록 만드는 방법
목록 항목의 기본 링크 아이콘 변경
목록 항목의 기본 링크 아이콘 설정 방법(기본값은 오른쪽 화살표)
접이식 팝업 창 목록
접이식 팝업 목록을 만드는 방법입니다.
접을 수 있는 목록
표시/숨기기 목록을 만드는 방법.
더 많은 콘텐츠 형식
캘린더 만드는 방법.
