オンライン実行 ボタンクリックすると、テーマを差し替えてそれぞれのテーマでのボタン表示になります。 ▼ こんな感じです
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
var css_type = [
"base","ui-lightness","ui-darkness","smoothness","start","redmond",
"sunny","overcast","le-frog","flick","pepper-grinder","eggplant",
"dark-hive","cupertino","south-street","blitzer","humanity","hot-sneaks",
"excite-bike","vader","dot-luv","mint-choc","black-tie","trontastic","swanky-purse"
]
var cnt = 0;
// ボタン
$("#button_control")
.button()
.text("base")
.css({"padding": "10px", "width": "400px" })
.click(function(){
if ( cnt >= css_type.length-1 ) {
cnt = -1;
}
cnt++;
css_target = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/";
css_target += css_type[cnt];
css_target += "/jquery-ui.css";
$("#link").prop("href", css_target );
$(this).text(css_type[cnt]);
});
});
</script>
<a id="button_control"></a>
|
|
【jQuery UIの最新記事】
- jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する
- jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
- jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する
- jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法
- jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す
- jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用
- jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする
- jQuery UI の slider と Google のホスティング
- jQuery UI の タブの表示切替でのアニメーション方法
