資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile 建立迷你按鈕
概述
jQuery 透過在錨元素、輸入標籤或按鈕標籤中定義這些類來提供某些類，我們可以建立一個迷你按鈕。jQuery Mobile 具有自己的樣式和類，因此只需要將內容交付網路 (CDN) 連結與我們正在構建迷你按鈕的網頁連結起來。
有一些類可以透過它們在 jQuery Mobile 中建立按鈕，它們是：
ui-btn − 此類建立一個 jQuery Mobile 按鈕，透過在元素中定義此類，按鈕屬性將被繼承到該元素
ui-mini − 在元素中定義此類時，它會建立一個迷你按鈕。透過在元素中定義迷你類，它會建立一個元件的緊湊尺寸。
我們還可以使用一些屬性將迷你按鈕屬性新增到 HTML 元素。這些屬性是：
data-role= “button”
data-mini= “true”
內容交付網路 (CDN 連結)
將這些 CDN 連結新增到網頁的 head 標籤中，以使 jQuery Mobile 庫能夠與您的專案一起工作：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
演算法
步驟 1 − 在文字編輯器中建立一個 HTML 基本框架。
步驟 2 − 將上面給出的內容交付網路 (CDN) 連結新增到程式碼的 head 標籤中。
步驟 3 − 現在建立一個 HTML 按鈕標籤，在其內定義名為“ui-btn”和“ui-mini”的類。
步驟 4 − 迷你版本的按鈕已成功建立，可以在瀏覽器中看到。
示例
在此示例中，我們使用了 HTML 按鈕標籤，藉助 jQuery Mobile 建立了一個迷你按鈕。在按鈕標籤中定義了類，這些類是 ui-btn，它將使用 jQuery 屬性建立按鈕，另一個類是 ui-mini，此類將為建立的按鈕提供迷你屬性。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>jQuery mini button</title>
</head>
<body>
<h1 style="text-align: center;">JQuery Mini Button</h1>
<button style="width:15rem;margin: 0.8rem auto;" class=“ui-btn ui-mini”>
Mini Button (using button)
</button>
</body>
</html>
演算法
步驟 1 − 在文字編輯器中建立一個 HTML 基本框架。
步驟 2 − 將上面給出的內容交付網路 (CDN) 連結新增到程式碼的 head 標籤中。
步驟 3 − 建立一個 HTML 錨標籤 <a>，向其中新增一些屬性，以向錨元素提供迷你按鈕的屬性。
<a href="#" data-role="button" data-mini="true"></a>
步驟 4 − jQuery Mobile 迷你按鈕已成功建立，可以在瀏覽器中看到。
示例
在此示例中，我們使用了屬性來建立按鈕的迷你緊湊版本。透過使用錨標籤建立元素，並將 data-role 和 data-mini 屬性新增到該元素。這兩個屬性分別賦值為 button 和 true。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>jQuery Mini Button</title>
</head>
<body>
<h1 style="text-align: center;">JQuery Mini Button</h1>
<a href="#" style="width:15rem;margin: auto;" data-role="button" data-mini="true">
Mini Button (using anchor tag)
</a>
</body>
</html>
結論
jQuery Mobile 的迷你類提供了一個有吸引力且醒目的使用者介面。建立的普通 jQuery Mobile 按鈕包含具有較大字型大小和字型粗細的文字。迷你型別的類可用於導航欄和許多警報框或對話方塊中。迷你類為網頁的使用者介面提供了響應式特性。data-mini 屬性儲存布林值，當 data-mini 屬性被賦予 true 時，迷你版本屬性會反映到該特定元素，而當 data-mini 屬性被賦予 false 時，則不會為該元素分配任何屬性。
143 次檢視
