タグ「jQuery」の一覧

Older Entries

家具レイアウトシミュレーション用のJavascriptを…

2008.12.16 火曜日

引越をすることになり、その件で頭が一杯だったのでつい…。
家具どう置こうかなー、とか色々考えてて、
とリあえず、Javascriptで家具配置のシミュレーションが出来る物を自分用に簡易なの作ってこれで遊んでたんだけど、
ちょっと面白そうなんで一度ちゃんと作ってみるかも。

タグ: | カテゴリー: Javascript | コメント(4) »

ガントチャートを描画するjQueryプラグイン

2008.12.12 金曜日

プロジェクト管理ツールを色々と見ていたら、ガントチャートはJpGraphというツールで出力する物が殆どで、
JpGraphだと、GDを使って画像で生成してるので綺麗に出力される反面、融通聞きにくいんじゃないかなぁ、という印象。
タスク名等のテキストにリンク張ったりとか出来た方が便利だろうし、画像生成する際のフォントの問題で日本語化も結構手間。

これってJavascriptで出したらどんな感じだろう、と、思いつきで作ってみた。

jquery.gantt

ガントチャートプラグイン

$("#gantt01").gantt();

空っぽの状態で生成。

$("#gantt01").gantt({
　　'tasks':[
　　　　{ 'titles': 'Task01', 'start_date': '20081213', 'end_date': '20081222' },
　　　　{ 'titles': 'Task02', 'start_date': '20081217', 'end_date': '20081231' },
　　　　{ 'titles': 'Task03', 'start_date': '20081227', 'end_date': '20090121' }
　　]
});

と、引数にタスク情報を渡して一気に生成することも可能。

$('#gantt01').addTask({ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' });
 
$('#gantt01').addTask([
  { 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' },
  { 'titles': 'Task05', 'start_date': '20081230', 'end_date': '20090111' }
]);

タスクの追加はaddTask()
配列で一気に送ってもOK。

// 当日へ移動
$('#gantt01').setPeriod();
// 日付指定
$('#gantt01').setPeriod('20081212');
// 範囲指定
$('#gantt01').setPeriod('20081212', '20090112');
 
// 次のページ
$('#gantt01').setPeriod('+');
// 7日分送る
$('#gantt01').setPeriod('+7');
// 前のページ
$('#gantt01').setPeriod('-');
// 7日分前へ
$('#gantt01').setPeriod('-7');
 
// 日単位表示
$('#gantt01').setType('date');
// 月単位別表示
$('#gantt01').setType('month');

表示切り替え。

$("#gantt01").gantt({
    'type': 'date',                   // グラフのタイプ(date  / month)
    'range': 50,                      // 表示範囲 (グラフのコマ数)
    'titles': ['title01', 'title02'].  // タイトル項目(配列にすると複数列)
    'tasks': {}                       // タスクデータ (オブジェクト)※配列で複数渡しも可
});

生成時のオプション。

$('#gantt01').addTask({
    'titles': ['Task05', 'hoge'],  // タイトル項目(配列可。表示数は生成時の設定に依存)
    'start_date': '20090103',   // 開始日 ※必須
    'end_date': '20090116',     // 終了日 ※必須
    'color': '#0000FF',            // グラフの色
    'text': 'Task05'                // グラフの中に表示するテキスト
});

タスク追加時のオプション。
開始日と終了日だけは必須。

日付の形式は
YYYYMMDD
YYYY.MM.DD
YYYY/MM/DD
のいずれかで。

急な思いつきでガーッと作ったので色々と雑かも。
ニーズが発生したらまた手を入れると思うけど、ニッチな用途なので延々とアルファバージョンの可能性もｗ

使用は現在の所未定。
一応、プロジェクト管理ツールを自分らの使いやすい形式の物を自作してみたいという野望があるにはあるけど…。

タグ: | カテゴリー: Javascript | コメント(0) »

画像をズームするjQueryプラグイン

2008.11.20 木曜日

会社で「こんなの出来るー？」と聞かれて、
面白そうなので試しに作ってみた。

jquery.zoomImg

jqurey.zoomImg example01

jqurey.zoomImg example01

$("#zoom01").zoomImg();

デフォルト
マウスオーバーした場所を拡大表示。

jqurey.zoomImg example02

jqurey.zoomImg example02

$("#zoom02").zoomImg("zoomWindow");

引数に表示したいエレメントのIDをつけると、その中で表示。

一応各ブラウザで動作は確認できたけど、試作状態なのでまだ粗はありそう。
あとは、折を見て機能足してみるかな、ドラッグ対応とか。

あと、一個謎が…。
家のWinXPのIE7で動かしてみたら、なんだか凄く動きがカクカクだったので、色々試してたんだけど、
一度、動作数のカウント取ってみようと思って、適当な場所に数値を入れてmousemove()で動く度にカウントアップするようにしてみたら、急にスムーズに動き出した…。
何かしら画面描画すればOKっぽい…？
う～ん、会社のIE7では平気だったような…。

なので、mousemove()で呼ばれるメソッドの中に

$(”#ZI_view”).html(” ”);

という一行を入れてひとまず回避。
なんかちょっと気持ち悪い気がするなぁ…。

タグ: | カテゴリー: Javascript | コメント(0) »

意外とよく使うJavascript　ロールオーバー

2008.8.5 火曜日

(※googleさんのキャッシュから復旧)

小物系です。
ごくありふれたコードだけど、出番は多いので持っておくと便利だし、ってことで。

ロールオーバーイメージの動作自体は、DreamWerverの「スワップイメージ」で簡単に実装できるので、デザイナーさんとかはそっちを昔からよく使ってたけど、
HTMLのソースがかなり凄いことになるので、後で困ることが多いし…。
(ページ更新時、に挿入されたプリロードイメージが、使わなくなった画像の分まで残ったままになってたりとかよくある)
つうことで、なるべくHTML側のソースを汚さない形で作った物を使って貰ってます。

サンプル

ページのロード時に、<img>タグにclass=”rollover”とつけてある物を抽出して、
ファイル名に「_on」がついた画像を裏でプリロード(事前読み込み)しておき、マウスオーバー時に画像差し替え。
(sample.gif→sample_on.gif　sample.jpg→sample_on.jpg)

下記、jQuery併用版とスタンドアロン版があるけど、動きは全く同じ。
こうやって見比べると、jQueryとかってやっぱり便利だなぁって改めて実感…。

jQueryと併用版

他でjQuery使ってる場合とかは主にこっち。

使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="jquery.js" type="text/javascript"></script>
  4. <script language="javascript" src="jquery.rollover.js" type="text/javascript"></script>
  5. </head>
  6.  
  7. <body>
  8. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  9. <img src="sample.gif" alt="test" class="rollover"></div>
  10. </body>
  11. </html>

スクリプト

Download: jquery.rollover.js
  1. var preLoadImg = new Object();
  2.  
  3. function initRollOvers(){
  4.     $("img.rollover").each(function(){
  5.         var imgSrc = this.src;
  6.         var sep = imgSrc.lastIndexOf('.');
  7.         var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
  8.         preLoadImg[imgSrc] = new Image();
  9.         preLoadImg[imgSrc].src = onSrc;
  10.         $(this).hover(
  11.             function() { this.src = onSrc; },
  12.             function() { this.src = imgSrc; }
  13.         );
  14.     });
  15. }
  16. $(function(){
  17.     initRollOvers();
  18. });

スタンドアロン版

他のフレームワーク使ってて、jQueryとの併用はなるべく避けたい場合とか、
他にJSを使ってなくて、ロールオーバーの為だけにわざわざjQueryまで…とかそんな場合はこっち。
使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="rollover.js" type="text/javascript"></script>
  4. </head>
  5.  
  6. <body>
  7. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  8. <img src="sample.gif" alt="test" class="rollover"></div>
  9. </body>
  10. </html>

スクリプト

Download: rollover.js
  1. function initRollOvers() {
  2.     if (!document.getElementById){
  3.         return;
  4.     }
  5.    
  6.     var preLoads = new Array();
  7.     var allImages = document.getElementsByTagName('img');
  8.  
  9.     for (var i = 0; i < allImages.length; i++) {       
  10.         if (allImages[i].className == 'rollover') {
  11.             var src = allImages[i].getAttribute('src');
  12.             var ftype = src.substring(src.lastIndexOf('.'), src.length);
  13.             var oSrc = src.replace(ftype, '_on'+ftype);
  14.  
  15.             //-- スワップ元、スワップ先画像の登録
  16.             allImages[i].setAttribute('pSrc', src);
  17.             allImages[i].setAttribute('oSrc', oSrc);
  18.  
  19.             //-- イメージのプリロード
  20.             preLoads[i] = new Image();
  21.             preLoads[i].src = oSrc;
  22.  
  23.             //-- イベントの設定
  24.             allImages[i].onmouseover = function() {
  25.                 this.setAttribute('src', this.getAttribute('oSrc'));
  26.             }
  27.             allImages[i].onmouseout = function() {
  28.                 this.setAttribute('src', this.getAttribute('pSrc'));
  29.             }
  30.         }
  31.     }
  32. }
  33.  
  34. function addOnload(func){
  35.     if ( typeof window.addEventListener != "undefined" ){
  36.         window.addEventListener( "load", func, false );
  37.     }else if ( typeof window.attachEvent != "undefined" ) {
  38.         window.attachEvent( "onload", func );
  39.     }else{
  40.         if ( window.onload != null ){
  41.             var oldOnload = window.onload;
  42.             window.onload = function ( e ) {
  43.             oldOnload( e );
  44.             window[func]();
  45.         };
  46.     }else
  47.         window.onload = func;
  48.     }
  49. }
  50. addOnload(initRollOvers);

追記：2008/09/22
超暫定版！エム・アールデザイン ブログ » シンプルなコードでロールオーバーを実現する。様の方でトラックバックを頂き、そちらでの指摘で気がついたのですが、
先日データが飛んでgoogleキャッシュから復旧した際にソースが一部古くなっていたようです。
あとでコッソリ直していた、onloadのバッティングを回避する処理が無くなっていたので修正しました。

タグ: | カテゴリー: Javascript | コメント(2) »

jQuery historyプラグインが素敵だったのでサンプル作成

2008.7.1 火曜日

Ajaxで表示しているページに、ブラウザの「戻る」「進む」とブックマークを対応させるjQueryプラグイン

Ajaxでタブ切り替え+リスト表示+ページ切り替えというページを作っていて、
タブやページを切り替えた状態を、アンカーリンクで直接指定できるようにはしてあったんだけど、

「これ、historyの履歴に入れられないかなぁ」
と思って検索してたら、素敵なjQueryプラグインを発見。

history plugin
作者様の記事：みかログ: Ajaxと戻るボタン・ブックマーク

DLページにサンプルがあって、そちらのソースで充分把握できるほど使いやすいプラグインですが、
実働に近い感じのサンプル作ってみたので、置いておきます。

まずは、シンプルにタブ切り替え

Ajaxで、タブ毎に別のcsvファイルを読み込んでリスト表示。
タブ切り替えをhistoryに入れてブラウザの「戻る」「進む」に対応。

タブ切り替え+ページ切り替えに拡張

ページ切り替え機能を追加して、ページ毎にhistoryに残るようにしました。

使い方

※予め、アンカーリンク(URLの#以降)を用いて状態が復元できるようにしておく必要があります。

onLoadや$(document).ready等で、

$.historyInit(function);
//function = コールバック関数

を実行して初期化しておき、
アンカーリンクの入ったaタグに、clickイベントで

$.historyLoad(hash);

hash = アンカー文字列
をバインド。

上記のサンプルでは、こうなっています。

  1. $(function(){
  2.     $.historyInit(chgView);
  3.     $('a.tab').click(function(){
  4.         var hash = this.href;
  5.         hash = hash.replace(/^.*#/, '');
  6.         $.historyLoad(hash);
  7.         this.blur();
  8.         return false;
  9.     });
  10. });

コールバック関数は、アンカーの文字列を引数として受け取り、
その文字列に応じて状態を再現するように作ってておけばOK。

上記のサンプルでは、
#chevrolet
#bmw
#aston
で、タブの状態を再現し、

ペ－ジ切り替えがある際は、-(ハイフン)でページ番号を繋いで、
#chevrolet-2
等というアンカーにして、
もしアンカーに-(ハイフン)が入っていたら、分割してタブとページの両方を再現するようになっています。

タグ: | カテゴリー: Javascript | コメント(2) »