測試 1 : 原始的 HTML 文字輸入元素效果 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.ui-widget {font-size:80%;}
</style>
</head>
<body>
<label for="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
});
</script>
</body>
</html>
此例的 text input 與 textarea 仍為 HTML 原始外觀, 不像按鈕可呼叫 button() 方法套用主題樣式, 在視覺上不甚搭配 :
解決辦法可參考下列文章 :
# jQuery UI styled text input box
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
例如 :
測試 2 : 套用 ui-widget 相關樣式類別之效果 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.ui-widget {font-size:80%;}
</style>
</head>
<body>
<label for="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
});
</script>
</body>
</html>
結果如下 :
可見 text input 與 textarea 元素外觀變美了, 邊框不僅變成圓角, 且套用了佈景主題樣式.
不過還有一個缺點 : text input 的高度似乎太小, 與按鈕的高度不協調, 這可以透過 height() 方法來設定, 例如 :
測試 3 : 設定 text input 元素高度與按鈕同高 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.ui-widget {font-size:80%;}
</style>
</head>
<body>
<label for="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
$('input').height($("button").innerHeight());
});
</script>
</body>
</html>
此例先呼叫 button 元素物件之 innerHeight() 取得元素本身 (內) 高度, 傳回值為高度 px 數值, 然後將其傳給 text input 元素物件之 height() 方法設定高度, 結果如下 :
這樣看起來就搭調多了. 最後我們為範例 3 加上主題布景選擇器 :
測試 3 : 外觀隨主題佈景切換之文字輸入框 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link id="theme" href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.ui-widget {font-size:80%;}
</style>
</head>
<body>
<label for="themes">布景</label>
<!-- 主題佈景選擇器 -->
<select id="themes">
<option value="base">base</option>
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="dark-hive">dark-hive</option>
<option value="dot-luv">dot-luv</option>
<option value="eggplant">eggplant</option>
<option value="excite-bike">excite-bike</option>
<option value="flick">flick</option>
<option value="hot-sneaks">hot-sneaks</option>
<option value="humanity">humanity</option>
<option value="le-frog">le-frog</option>
<option value="mint-choc">mint-choc</option>
<option value="overcast">overcast</option>
<option value="pepper-grinder">pepper-grinder</option>
<option value="redmond">redmond</option>
<option value="smoothness">smoothness</option>
<option value="south-street">south-street</option>
<option value="start">start</option>
<option value="sunny">sunny</option>
<option value="swanky-purse">swanky-purse</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
<option value="vader">vader</option>
</select>
<script>
$(function(){
$("#themes").selectmenu();
$("#themes").val("hot-sneaks");
$("#themes").selectmenu("refresh");
$('#themes').on('selectmenuchange', function() {
var theme=$(this).val();
var href="https://code.jquery.com/ui/1.12.1/themes/" + theme +
"/jquery-ui.min.css";
$("#theme").attr("href", href);
});
});
</script>
<br><br>
<label for="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
$('input').height($("button").innerHeight());
});
</script>
</body>
</html>
此例利用選擇器切換主題佈景觀察文字輸入框外框是否隨之改變, 結果如下 :
可見這樣的設定確實可讓 text input 與 textarea 華麗轉身.
以上範例全部放在 GitHub 個人網頁空間, 拿 GitHub 當靜態網頁伺服器真的好棒棒耶.
沒有留言 :
張貼留言