Latest web development tutorials

jQuery를 모바일 버튼

모바일 응용 프로그램은 표시 할 것들의 간단한 클릭에 내장되어 있습니다.



jQuery를 모바일에서 버튼 만들기

jQuery를 모바일에서 버튼은 세 가지 방법으로 생성 할 수 있습니다 :

  • 사용 <버튼> 요소
  • 사용 <입력> 요소
  • 데이터 역할 = "버튼"의와 요소를 <A> 사용

<버튼>

<button>按钮</button>

»시도

<입력>

<input type="button" value="按钮">

»시도

<A>

<a href="#" data-role="button" >按钮</a>

»시도

램프 jQuery를 모바일에서 버튼이 자동으로 모바일 장치에 그들을 더 매력적이고 가용성 확인, 스타일링 것입니다. 우리는 당신이 데이터 역할 = 링크의 "버튼"을 <A> 요소를 사용하는 것이 좋습니다의 <입력> 또는 <버튼>을 사용하는 페이지 사이의 요소는 제출을 형성한다.

탐색 버튼

페이지의 단추 링크를 통해 들어, 데이터 역할 = "버튼"속성 <A> 요소를 사용 :

예

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

»시도

인라인 버튼

기본적으로 버튼을 이용하여 화면의 전체 폭을 차지한다. 당신은 버튼으로 만 넓은 콘텐츠를 원하는, 또는 당신이 옆에 두 개 이상의 버튼 측을 표시하려면, "true"로 데이터 인라인 =를 추가하는 경우 :

예

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

»시도

버튼의 조합

jQuery를 모바일 버튼을 결합하는 간단한 방법을 제공합니다.

데이터 역할을 넣어주세요 = "controlgroup는"속성 및 데이터 유형 = "수평 | 수직"버튼의 수평 또는 수직 조합 여부를 지정 함께 사용 :

예

<div data-role="controlgroup" data-type="horizontal" >
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>

»시도

램프 기본적으로 버튼을 수직 컴포지션, 그들 사이에 여백과 공간의 조합입니다. 그들이 함께 결합 될 때 아름다운 모양을 만들 수 있도록 그리고 첫 번째와 마지막 버튼은 반올림됩니다.

뒤로 단추

백 버튼을 만들려면 (앵커 HREF 값을 무시) = "다시"속성 데이터 확인해를 사용 :

예

<a href="#" data-role="button" data-rel="back" >返回</a>

»시도

더 많은 링크 버튼 인스턴스

범주 기술 예
UI-btn을-B 버튼 색상이 검은 색 수정, 글꼴 흰색 (기본 회색 배경, 블랙 폰트)입니다. 시험
UI 코너 - 모든 버튼 둥근 모서리를 추가하려면 시험
UI 미니 작은 버튼 만들기 시험
UI 그림자 버튼 그림자를 추가합니다 시험

주의 당신과 같은 더 많은 스타일, 공백으로 구분하여 각각의 스타일 클래스, 필요한 경우 : 클래스 = "UI-btn을 코너 - 모든 UI 그림자 UI-btn을 UI-btn을 인라인"

기본적으로 <입력> 버튼 모서리와 그림자 효과를 반올림합니다. Ra 및 <버튼> 요소는하지 않습니다.

보다 완벽한 CSS 클래스는, 우리의 참조하시기 바랍니다 jQuery를 모바일 CSS 클래스 참조 설명서를 .

다음 섹션에서는 버튼에 아이콘을 추가하는 방법을 보여줍니다.