jQuery や jQuery UI のライブラリは、Google がホスティングしているものを使ってまずテストしてからそれをダウンロードして使うのが間違い無いと思います。Google は、API でホスティングしているので、その立場上動作確認は相当されていると思います。 ただ、実際問題として、jquery-ui.css は、API では出力されないので(あるバージョンまではカタログはされているようですが)バグのような気もします。いずれにしても、jquery.min.js が前提で、jquery-ui.css と jquery-ui.min.js が必要になります。 Google でホスティングされている最新バージョンは、Google Hosted Libraries で確認します。
指定率 :
<script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) { window[window.location.hostname+'.loadjQueryUI'] = true; if ( typeof window[window.location.hostname+'.loadjQueryUIcode'] === 'undefined' ) { window[window.location.hostname+'.loadjQueryUIcode'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'; window[window.location.hostname+'.loadjQueryUIcss'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css'; } document.write("<"+"link rel=\"stylesheet\" href=\""+ window[window.location.hostname+'.loadjQueryUIcss'] + "\">"); document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQueryUIcode'] + "\"></"+"script>"); } </script> <div style='margin: 0 0 5px 0;'>指定率 : <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </div> <div style='height:50px;'> <div id="slider-range-min" style='width:200px;'></div> </div> <script type="text/javascript"> $( "#slider-range-min" ).slider({ range: "min", value: 60, min: 0, max: 100, slide: function( event, ui ) { $( "#amount" ).val( ui.value + "%" ); } }); // 初回の値 $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" ); </script>
このコードは、ブログの記事で単独で貼り付けて動作する事を想定しており、複数記事が表示されるページでも、先頭の記事のものしか実行されません。また、ページのヘッダに jQuery の定義を固定ですれば記事中のロードはされません。 さらに、変数を事前に変更する事によって、バージョンを意図的に変更する事も想定しています。IE の古いバージョンは、jQuery の新しいバージョンで動作しないので一応対処はしています。 ※ 実運用は、「ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js」をヘッダに一つだけ書くのがおすすめです。 ただ、UI は常に使用するとは限らないので記事内指定でもいいかもしれません。UIも常にヘッダに定義する場合は、window[window.location.hostname+'.loadjQueryUI'] = true; をヘッダ部分で同時に実行しておけば、記事内ではロードされません。
|
【jQuery UIの最新記事】
- Google がホスティングしている jQuery UI の CSS のテーマのチェックをする 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 の タブの表示切替でのアニメーション方法