jQuery 主題設定

在網頁上讓使用者快速更換成自己想要的風格，假如你很有才的想要自己寫jQuery ui然後自己套的不同種類的風格的話可以使用

<link id="theme" href="themes/hot-sneaks/jquery-ui.min.css" rel="stylesheet">

<select id="themes" onchange="javascript:change_theme();">
    <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>

  </select>

function change_theme() {
  var theme=$("#themes").val();
  var href="themes/" + theme + "/jquery-ui.min.css";
  $("#theme").attr("href", href);
  }

參考

https://stackoverflow.com/questions/3829687/change-the-href-of-a-css-link-via-jquery

這個方法會導致你的select button

同樣的也可以使用DropDownList或者RaidoButton也行。

而上述方法是以html傳統的下拉選單進行製作，jQuery同樣也有獨特的下拉選單

<link id="theme" href="themes/hot-sneaks/jquery-ui.min.css" rel="stylesheet">

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

  </select>

$("#themes").selectmenu();

$('#themes').on('selectmenuchange', function() {

  var theme=$(this).val();

  var href="themes/" + theme + "/jquery-ui.min.css";

  $("#theme").attr("href", href);

  });

使用jQuery的.on監聽，selectmenuchange事件後執行function

當中一定要使用$this，原因是this 指的是DOM(Document Object Model)中的this，也就是這個文件的元素(element)，而不是jQuery的物件

.val()參數簡介

有傳入值的時候是setter，沒傳入值是getter，因此若是想更改jQuery的預設值，則會變成。

$(#themes).selectmenu();

$(#themes).val("value");

$(#themes).selectmenu("refresh");

最後，可以將檔案移除，然後更改成CDN(Content Delivery Network , 內容傳遞網路)的作法，也就是把

href="URL" 改成URL 但是僅限於可以連外網的網站，只有內網的網站則接不到內容，會變成無法讀取

參考

http://yhhuang1966.blogspot.com/2019/03/jquery-ui.html