資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile Square-UI 主題外掛設計移動表單控制元件？
使網頁對移動裝置友好對於自定義表單控制元件來說是一項具有挑戰性的任務。jQuery 為我們提供了許多方便地執行此任務的選項。由於智慧手機如今非常流行，因此能夠建立視覺上具有吸引力的介面的自定義表單控制元件非常重要。JavaScript 的 jQuery 庫可以幫助構建響應式且引人入勝的設計。在本文中，我們將學習如何使用 jQuery Mobile Square-UI 主題外掛設計移動表單控制元件。
示例
此程式碼演示瞭如何使用 jQuery Query Mobile Square-UI 主題外掛設計移動表單。我們首先使用 HTML 的標準元素在程式碼中包含了必要的庫和樣式表。我們使用 script 標籤包含 JavaScript 程式碼。我們使用預設選項初始化了 Square-UI 主題外掛。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.css">
<style>#myForm{margin:1em;}label{display:block;margin-bottom:.5em;}input[type="text"],select{width:100%;margin-bottom:.5em;}</style>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<label for="country">Country:</label>
<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.js"></script>
<script>
$(document).on("pagecreate",function(){
$.mobile.square.defaults.activeBtnClass="ui-btn-square ui-btn-active";
$.mobile.square.defaults.activeToggleClass="ui-btn-square ui-btn-active";
$.mobile.square.defaults.checkIcon="fa fa-check";
$.mobile.square.defaults.radioOnIcon="fa fa-dot-circle-o";
$.mobile.square.defaults.radioOffIcon="fa fa-circle-o";
$.mobile.square.defaults.sliderClass="ui-slider-square";
$.mobile.square.defaults.sliderHandleClass="ui-btn-up-square";
$.mobile.square.defaults.sliderHighlightClass="ui-btn-corner-all ui-btn-up-square";
$.mobile.square.defaults.sliderTrackClass="ui-btn-down-square";
$.mobile.square.defaults.textButtonClass="ui-btn-square";
$.mobile.square.defaults.textButtonActiveClass="ui-btn-square ui-btn-active";
$.mobile.square.init();
});
</script>
</body>
</html>
使用 Field set 建立表單控制元件
field set 充當一組控制元件的容器。我們可以使用複選框、單選按鈕等在該標籤下建立自定義表單控制元件。使用此 field set 的主要優點是將相關的表單控制元件分組並提供視覺語義表示。
示例
我們在以下程式碼中使用了 field set 標籤來建立自定義表單控制元件。我們使用 type 屬性將輸入框的型別設定為複選框。我們使用 label 屬性定義複選框的標籤。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Example of Fruits Selection</h3>
</div>
<div role="main" class="ui-content">
<fieldset data-role="controlgroup">
<input type="checkbox" name="fruit[]" id="apple" checked="checked"/>
<label for="apple">Apple</label>
<input type="checkbox" name="fruit[]" id="banana" checked="checked"/>
<label for="banana">Banana</label>
<input type="checkbox" name="fruit[]" id="orange" checked="checked"/>
<label for="orange">Orange</label>
</fieldset>
</div>
</div>
</body>
</html>
建立自定義滑塊
滑塊是重要的元素，尤其是在處理移動裝置的應用程式中。它有許多應用，例如設定首選項、過濾和排序、多媒體控制等。
示例
在以下程式碼中，我們使用 jQuery Mobile Square-UI 主題外掛建立了一個滑塊。我們建立了一個預設值為 50、範圍為 0 到 100 的滑塊。我們將輸入型別設定為“range”以建立滑塊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"href="css/jquery.mobile.squareui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
.section-heading {
padding: 10px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2 class="section-heading">Slider example</h2>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
</body>
</html>
使用可摺疊輸入
可摺疊輸入是現代網站中流行的輸入欄位。它允許我們將相關內容分組並在預設情況下隱藏它們。這使得整體使用者介面更具互動性和組織性。例如，我們可能需要在表單中選擇我們的國家/地區。在這種情況下，由於可用的大量選項，使用複選框或純文字作為輸入將很不方便。在這種情況下，我們可以使用可摺疊輸入。
示例
在以下程式碼中，我們使用 select 標籤建立可摺疊輸入。option 標籤充當 select 標籤的子元素。它包含使用者可用的所有選項。我們還建立了一個提交按鈕。通常，使用者在完成填寫表單以進行提交後必須進行提交。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/squareui/1.0.1/dist/square-ui.css">
</head>
<body>
<form>
<div data-role="collapsible">
<h3>Country</h3>
<div data-role="fieldcontain">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Select a country --</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select>
</div>
</div>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/flatlogic/squareui/ui/1.0.1/dist/square-ui.js"></script>
<script>
$(document).on("pagecreate", function() {
$.mobile.square.init();
});
</script>
</body>
</html>
結論
使用 jQuery Mobile Square-UI 主題外掛設計移動表單是提高移動應用程式使用者體驗的一種簡單有效的方法。純 CSS 需要更多程式碼行才能實現相同的效果。我們強烈建議讀者進一步瞭解 Square-UI 主題外掛，以便更深入地理解該主題。
104 次瀏覽
