Tutorials : How jQuery Works
「jQuery UI」公式ページ
jQuery UI Documentation / API / 1.8
「jQuery UI」についての「Demos & Documentation」
jQuery UI Demos & Documentation
軽量な「JavaScript Library」である…
「jQuery」と「jQuery UI」を使って…
単調な HTML に彩りを添えましょう…
アクセスアップやユーザーフレンドリーに関しては…
保証の限りではありません…(￣ー￣)邪笑
あくまで自己満足的な側面が殆んどです…
実装サンプルだけ書いても…
初めて扱う方には解りづらいと思いますので…
数回に分けて私がサイトで使っているものだけ解説していきます…
尚…大前提として…ただの素人オヤヂですから…
「コードがいいかげんだ…」などの罵詈雑言は受け付けておりません…
でわ早速…導入するには…
- 自身でダウンロードして外部ファイル化して読み込むか…
- Google・Microsoft・EdgeCast…などの CDN を使ってロードするかです…
一番目の方法は色々と解ってから…
必要なものだけダウンロードして使うと…
読み込みサイズを減らせたり…
「js」ファイルをまとめて「HTTPリクエスト」を減らせたり…
「color」や「texture」を変更してから使える…などのメリットがあります…
という事で…二番目で行きましょう…
先ず…<head> ～ </head> 間の任意の場所に以下のコードを記述します…
<link href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dark-hive/jquery-ui.css' rel='stylesheet' type='text/css'/>「1.8」は…バージョン番号を細かく指定したい方は変更して下さい…
よく解らない方は…そのままで OK です…
「dark-hive」は…「jQuery UI」のテーマ名です…
お好きなテーマ名に変更して下さい…
テーマ名は以下で確認できます…
jQuery UI - ThemeRoller
24種類のカレンダー(厳密には Datepicker)が出ます…
カレンダー部分をクリックすると…
右側に表示されているサンプルが…
全て選択したテーマに入れ替わります…
赤枠部分がテーマ名です…
一番目の方法は解説しませんが…
「Edit」で細密な設定をしてからダウンロード…
…なんて事もできます…お便利ですよね…
次に…</body> 前に以下のコードを記述…
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'/> <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>黄文字のバージョン番号はお好きにどうぞ…
以上で「導入」は完了ですが…
これだけでは動作しません…
…というか…リンクじゃない…こんな感じの…
ただのボタンを生成するだけで…こんなに記述しなければなりません…
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"><span class="ui-button-text">Button Label</span></button>これでは…煩雑過ぎます…なので…
カスタムコードを読み込んだコードに続けて記述する必要があります…
<script src='カスタムコード「js」の URL' type='text/javascript'/>
直に記述もできますがお奨めしません…<script>
ここにカスタムコードを記述
</script>
動作が確認出来たら…外部ファイル化して読み込む事を強くお奨めします…
外部ファイル化するには…
2行目の部分だけを「メモ帳」に貼付け…
任意の名前で拡張子を「js」文字コードを「UTF-8」で保存して…
任意の場所にホストして下さい…
Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」
Google Blogger用のファイル保存場所としてのGoogle sites/Picasa
次回以降は私が使っているものだけの…
カスタムコードを個別に解説していきますが…
遅筆な私の記事を待っていられない方は…
冒頭の本家サイトを読みましょう…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿