2020年9月9日 星期三

jQuery UI 學習筆記 (十四) : 文字輸入框的主題樣式

最近在測試 jQuery 時發現 jQuery UI 對大部分表單元素都有進行外觀美化, 例如呼叫 button() 可將原本很陽春的 HTML 按鈕改裝成有主題佈景的美美按鈕, 唯獨文字輸入元素 text input 與 textarea 沒有, 顯得與其他美美的表單元素格格不入, 例如下面這個原始的 HTML 網頁 :


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

其中第 18 個回覆的做法我覺得最適當, 就是幫 input 與 textarea 加上 jQuery 物件之 ui-widget 相關樣式類別 :

$('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 當靜態網頁伺服器真的好棒棒耶.

於

沒有留言:

張貼留言