Latest web development tutorials

jQuery를 모바일 콘텐츠 목록


jQuery를 모바일 목록 아이콘

기본적으로 각 목록 항목은 화살표 아이콘 "캐럿-R"(오른쪽 화살표)를 포함합니다. 당신은 데이터 아이콘 속성을 사용할 수 있습니다이 아이콘을 변경하려면 :

<상향 링크 데이터 역할 = "리스트 뷰">
<리> <a보기 </a> 기본값은 오른쪽 화살표 </A> </ 리>는
<리 데이터 아이콘 = "플러스"> <a의보기 </a> 데이터-아이콘 = "플러스"</A> </ 리>
<a의보기 </a> 데이터-아이콘 = "마이너스"<= "마이너스"리 데이터 아이콘> </A> </ 리>
</A> </ 리> = "삭제"<a의보기 </a> 데이터-아이콘 <리 데이터 아이콘 = "삭제">
<리 데이터 아이콘 = "위치"> <a의보기 </a> 데이터-아이콘 = "위치"</A> </ 리>
<a의보기 </a> 데이터-아이콘 = "false"를 </A> </ 리> <= "false"를 리 데이터 아이콘>
</ UL>

»시도
주의 데이터 아이콘 = "false"로 아이콘을 제거합니다.

더 완벽한 jQuery를 모바일 버튼 아이콘, 우리의 방문하시기 바랍니다 jQuery를 모바일 아이콘 참조 설명서를 .


16 × 16 아이콘

당신이 기준 16x16px 아이콘 목록에 추가 할 경우 목록 항목에서 <IMG> 요소를 추가하고 "UI-리튬 아이콘"카테고리를 사용할 수 있습니다 :

<상향 링크 데이터 역할 = "리스트 뷰">
<리> <a보기 </a> <IMG SRC = "us.png"고도 = "USA"클래스 = "UI-리튬 아이콘"> 미국 </A> </ 리>
</ UL>

»시도

jQuery를 모바일 목록 미리보기

16x16px보다 큰 이미지, 링크의 <IMG> 요소를 추가합니다.

jQuery를 모바일은 자동으로 80x80px 할 수있는 이미지를 확장 :

<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>

»시도

정보의 목록을 추가하는 표준 HTML을 사용하여

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>

»시도


jQuery를 모바일 목록 아이콘

목록에서 <IMG> 요소는 클래스를 사용 = "UI-리튬 아이콘"16x16px 아이콘을 추가합니다 :

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>

»시도


분할 버튼

목록 JQuery와 모바일, 그 동작 내용에 대한 두 가지 선택을 할 필요가 종종 다음 옵션에 대한 필요성이 버튼 세그먼트를 연결한다. 분할의 방법은 <A> 요소를 추가 <LI> 요소를 달성하기 위해, 그것은 페이지를 분할하는 효과를 얻을 수있다.

jQuery를 모바일 자동으로 아이콘이 사용자의 링크 텍스트 (있는 경우) 아이콘을 가리킬 때 표시되는, 제 2 링크 파란색 화살표 아이콘을 설정합니다 :

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>

»시도

링크 더 풍부한 기능을하는 일부 페이지 및 대화 상자를 추가합니다 :

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

»시도


버블 디지털

버블 번호 등 사서함으로 숫자 관련리스트 아이템을 표시하기 위해 사용된다 :

숫자를 클래스 "UI-리튬 수"속성을 설정 <SPAN>와 같은 인라인 요소를 사용하여, 거품 번호를 추가하고 추가하려면 :

<ul data-role="listview">
<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>

»시도

참고 : 디지털 거품의 정확한 표시, 당신은 프로그램을 수정해야합니다. 이는 다음 장에서 설명한다.


예

더 많은 예제

팝 목록
팝의 목록을 만드는 방법

기본 링크 아이콘리스트 항목을 변경할
어떻게 기본 링크 아이콘 목록 항목을 (오른쪽 화살표 기본) 설정합니다.

접을 수있는 팝업 목록
팝의 축소 목록을 만드는 방법.

목록 접이식
어떻게 표시 / 숨기기 목록을 만들 수 있습니다.

더 많은 형식
어떻게 일정을 만들 수 있습니다.