オンライン実行 ボタンクリックすると、テーマを差し替えてそれぞれのテーマでのボタン表示になります。 Google では、スクリプトのほうは全てのバージョンをホスティングしていますが、CSS のほうは 1.10.1 以前でないと base テーマが存在しません( 他のテーマはあるようなのですが・・・ ) ▼ こんな感じですここでは、1.10.1 のテーマを使って表示しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(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()
.val("base")
.click(function(){
if ( cnt >= css_type.length-1 ) {
cnt = -1;
}
cnt++;
css_target = "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/";
css_target += css_type[cnt];
css_target += "/jquery-ui.css";
$("#link").prop("href", css_target );
$(this).val(css_type[cnt]);
});
});
</script>
<input id="button_control">
|
|
【jQuery UIの最新記事】
- jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する
- jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
- Google Picasa サービスの URL を使用して、jQuery のスライダーでリアルタイムにサイズの違った画像を表示する
- 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 の タブの表示切替でのアニメーション方法
- jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する
