jQuery Mobile 클...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
jQuery Mobile 클래식 튜토리얼
←
→
작가：php.cn  업데이트 시간：2022-04-11 13:58:34

jQuery 모바일 버튼


모바일 앱은 표시하려는 항목을 간단히 포인트 앤 클릭하는 방식으로 구축되었습니다.

jQuery Mobile에서 버튼 만들기

jQuery Mobile에서는 다음 세 가지 방법으로 버튼을 만들 수 있습니다.

  • <button> 요소 사용

  • <input> 요소 사용 data-role="button"

  • <button>

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="header">
    <h1>按钮</h1>
  </div>
  <div data-role="main" class="ui-content">
    <button class="ui-btn">按钮</button>
  </div>
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 
</body>
</html>

인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하면 온라인 인스턴스

<input>

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="header">
    <h1>按钮</h1>
  </div>

  <div data-role="main" class="ui-content">
    <input type="button" value="按钮">
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 



</body>
</html>

Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

<a>

예

<!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="header">
    <h1>按钮</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn">按钮</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

jQuery Mobile에서는 버튼 스타일이 자동으로 지정됩니다. 그들을 만들기 위해 모바일 장치 및 가용성에 더 매력적입니다.
페이지 간 연결에는 <a> 요소와 data-role="button"을 사용하고, 양식 제출에는 <input> 요소를 사용하는 것이 좋습니다. lamp

탐색 버튼

버튼을 통해 페이지를 연결하려면 data-role="button" 속성과 함께 <a> 요소를 사용하세요.

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="header">
    <h1>按钮</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎!</p>
    <a href="#pagetwo" class="ui-btn">访问第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>按钮</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>再见!</p>
    <a href="#pageone" data-role="button">返回第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼

인라인 버튼

기본적으로 버튼은 전체 화면 너비를 차지합니다. 콘텐츠 너비만큼만 버튼을 원하거나 두 개 이상의 버튼을 나란히 표시하려면 data-inline="true"를 추가하세요.

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="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>普通 / 默认按钮:</p>
    <a href="#pagetwo" class="ui-btn">访问第二个页面</a>
    <p>内联按钮:</p>
    <a href="#pagetwo" class="ui-btn ui-btn-inline">访问第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>内联按钮 (一个接一个显示):</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a>
    <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a>
    <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

Running Instance »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.


버튼 결합

jQuery Mobile은 버튼을 그룹화하는 쉬운 방법을 제공합니다.

버튼을 수평 또는 수직으로 결합할지 여부를 지정하려면 data-role="controlgroup" 속성과 data-type="horizontal|vertical"을 함께 사용하십시오.

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="header">
    <h1>组合按钮</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="controlgroup" data-type="horizontal">
      <p>水平组合按钮:</p>
      <a href="#" class="ui-btn">按钮 1</a>
      <a href="#" class="ui-btn">按钮 2</a>
      <a href="#" class="ui-btn">按钮 3</a>
    </div><br>
    
    <div data-role="controlgroup" data-type="vertical">
      <p>垂直组合按钮 (默认):</p>
      <a href="#" class="ui-btn">按钮 1</a>
      <a href="#" class="ui-btn">按钮 2</a>
      <a href="#" class="ui-btn">按钮 3</a>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

lamp기본적으로 조합 버튼은 여백과 공백이 없는 수직 조합입니다. 그리고 첫 번째 버튼과 마지막 버튼만 모서리를 둥글게 처리하여 결합 시 멋진 모습을 연출합니다.

뒤로 버튼

뒤로 버튼을 만들려면 data-rel="back" 속성을 사용하세요(이것은 앵커의 href 값을 무시합니다):

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="header">
    <h1>访问第二个页面</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#pagetwo" class="ui-btn">访问第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>返回按钮实例</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn" data-rel="back">返回</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

추가 링크 버튼 예제

ClassDescriptionExample
ui-btn-b버튼 색상 수정 검정색으로, 글꼴은 흰색입니다(기본값은 회색 배경, 검정색 글꼴). 사용해 보세요
ui-corner-all버튼에 둥근 모서리 추가 사용해 보세요
ui-mini작은 버튼 만들기 사용해 보세요
ui -shadow for 버튼 그림자 추가 사용해 보세요

Note더 많은 스타일을 사용해야 하는 경우 각 스타일 클래스를 공백으로 구분하세요. 예: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

기본적으로 <입력> 버튼에는 둥근 모서리와 그림자 효과가 있습니다. <a> <button> 요소가 없습니다.

더 완전한 CSS 클래스 세트를 보려면 jQuery Mobile CSS 클래스 참조 매뉴얼을 확인하세요.

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

←
→

PHP 중국어 웹사이트

집집강의강의기사기사Q&AQ&A사전사전수동수동다운로드다운로드찾다찾다APP다운로드 APP다운로드