butang mudah alih jQuery

Apl mudah alih dibina pada titik mudah dan klik perkara yang anda mahu paparkan.

Membuat butang dalam jQuery Mobile

Dalam jQuery Mobile, butang boleh dibuat dalam tiga cara:

Menggunakan <button> ;
menggunakan <input> elemen
menggunakan <a> elemen <🎜 dengan data-role="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>

Jalankan Instance»Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

<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>

Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

<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">
    <a href="#" class="ui-btn">按钮</a>
  </div>

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

</body>
</html>

Run Instance»Klik "Run Instance butang " untuk melihat Contoh Dalam Talian

Butang Navigasi

Untuk memaut antara halaman melalui butang, gunakan elemen <a> dengan atribut data-role="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">
    <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>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Butang Sebaris

Secara lalai, butang mengambil keseluruhan lebar skrin. Jika anda mahukan butang yang hanya selebar kandungan, atau jika anda mahu memaparkan dua atau lebih butang bersebelahan, tambah 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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

gabungan butang

jQuery Mobile menyediakan cara mudah untuk mengumpulkan butang bersama-sama.

Sila gunakan atribut data-role="controlgroup" dan data-type="horizontal|vertical" bersama-sama untuk menentukan sama ada untuk menggabungkan butang secara mendatar atau menegak:

Contoh

<!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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

	默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

Butang Kembali

Untuk mencipta butang belakang, gunakan atribut data-rel="back" (ini mengabaikan nilai href bagi sauh):

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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Lebih banyak butang pautan contoh

类	描述	实例
ui-btn-b	修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。	尝试一下
ui-corner-all	为按钮添加圆角	尝试一下
ui-mini	制作小按钮	尝试一下
ui-shadow	为按钮添加阴影	尝试一下

Jika anda perlu menggunakan lebih banyak gaya, pisahkan setiap kelas gaya dengan ruang, seperti: class="ui- btn ui-btn-inline ui-btn-corner-all ui-shadow"

	如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" 默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

Secara lalai, butang <input> mempunyai bucu bulat dan kesan bayang. <a> Elemen <butang>

Untuk set kelas CSS yang lebih lengkap, lihat Manual Rujukan Kelas CSS Mudah Alih jQuery kami.

Bab seterusnya menunjukkan cara menambah ikon pada butang.

<🎜>

butang mudah alih jQuery

Membuat butang dalam jQuery Mobile

Butang Navigasi

Instance

Butang Sebaris

Instance

gabungan butang

Contoh

Butang Kembali

Instance

Lebih banyak butang pautan contoh

Laman web PHP Cina