ラベル jquery の投稿を表示しています。 すべての投稿を表示
ラベル jquery の投稿を表示しています。 すべての投稿を表示

2013年11月30日土曜日

jquery.hashchangeでスマホ用ページ遷移に対応

スマホサイトでよくある、#(ハッシュ)を使ったページ遷移をやろうと思って調べていたら、hashchangeというのがありました。

http://benalman.com/projects/jquery-hashchange-plugin/

jqueryのプラグインです。さっそく読み込んで使ってみます。

使い方は簡単。こんな感じです。

$(window).hashchange( function(){ 
// URLハッシュが変わったら何かする
});


さらに

$(window).hashchange(function(){ 
if(location.hash.match(/^#hash_/)) {
// #hash_で始まる時に何かする
}
});


こんな感じで、ハッシュの文字列によって処理を変えてやることで、目的が実現できそうな感じです。

それから最近ではhtml5のpushStateってのもあるみたいです。こちらは今度時間のあるときに調べてみます。

※pushStateはAndroid4.1以上でサポートされるようになったみたいです。普及にはまだ少し時間がかかりそうです。

2013年7月29日月曜日

mobile safariでjqueryのliveが効かない

正しく設定しても、どうしてもliveが効かず、ボタンが反応しない、ということがありました。

しばらく試行錯誤した後、ググってみたら2秒で解決しました。

http://aqubiblog.blogspot.jp/2011/04/jqueryliveiphonesafari.html?m=1

該当要素に「onlick=""」を追加すれば動くようになるということです。驚きの解決方法。

これで問題なく動作するようになりましたが、思わず脱力してしまいました。

2013年3月8日金曜日

Grid.js(superTables後継)とjquery.tablefixでテーブルを固定

javascriptでテーブルのヘッダや左側の項目なんかを固定するライブラリはかなりたくさん出てます。

なかでも名前のインパクトからか、superTablesなんかは自分の中で有名です。

今回テーブルのヘッダと左側の項目を固定する仕事があったので、ちょっと調べて見ることに。

まずはsuperTables

でもググっても公式ページが出てこない。どこからダウンロードすればいいんだ??

と思ってたら今はGridというのに名前が変わってるんだそうです。

http://www.matts411.com/post/grid/

アップデートされてるのはいいですが、明らかに検索しにくい名前になってしまったのはちょっと残念です。

さっそく使ってみます。
grid.jsは内で読み込まないと動かないという現象で少しつまづきましたが、動作は問題ありません。
あとは要素をしっかりとで囲ってやるのを忘れずに。

それからひとつ問題が。rowspanやcolspanを使ってると表示がおかしくなります。
対応してないのかな、と思ってGridのページを見てみると、作者じきじきに「unfortunately not at the moment.」と言ってます。

残念ですが、rowspanやcolspanを使ってるとGridはうまく動かないようです。


続いて目をつけたのがjquery.tablefix

http://www.otchy.net/javascript/tablefix/

作者は日本人。しかもrowspanとcolspanにも対応してるようで、作者ページのサンプルもrowspanとcolspanが使われてます。

よし、これで勝つる!と思ったのも束の間。実装してみると少しカラムがずれるという現象が発生。

どうやらrowspanやcolspanも、ちょっと複雑になると対応できないみたいです。
具体的にどこまでがセーフでどこからがアウトなのかはわかりませんが、自分のケースではズレてしまいました。


あとjquery.tablefixでは、テーブルの中にフォームが入ってると、そのフォームは機能しなくなります。

逆にGridのほうはフォームは有効だそうです。


というわけで今のところ解決してません。

とりあえず言えるのは、テーブルの構造はなるべくシンプルにしておいたほうが良い、ということでしょうか。

他のライブラリも含め、もう少し調べてみようと思います。


追記:
こちらのページがとても参考になります。
http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html

jquery.livesearchでサジェストっぽいのを作る

サジェストっぽいのを作りました。



別ウインドウで表示→http://kawama.jp/sample/jquery_livesearch.php

ソースを見てもらえば分かりますが、jquery.livesearchというライブラリを使い、ul liの中のテキストを検索してマッチするものを表示しています。

本格的なサジェスト機能はajaxが必須ですが、ちょっとサジェストっぽいものを作りたい時はこのやり方も使える思います。

2011年8月15日月曜日

ieだけjqueryでbackground-positionが取得できない

件名そのまんまの問題が起こりました。

$('#hoge').css('background-position');

firefoxやchromeでは値が取得できるのに、ieだけ「undefined」になってしまいます。
(確認したのはie8のみです。)

ググったらありました。

http://5509.me/log/get-css-background-position-with-jquer

ieだけxとyを別々に取得しないといけないそうです。

ie、、、8になってもあいかわらずですね。

というわけで、

$('#hoge').css('background-position-x');

のようにして取得できるようになりました。

2011年8月8日月曜日

軽くてサクサク動くjqueryプラグイン「Tiny Carousel」

以前jcarouselというプラグインを使ってカルーセルパネルを作りましたが、今度はTiny Carouselというのを使いました。

http://www.baijs.nl/tinycarousel/

jcarouselに比べると機能は少ないですが、そのぶん軽くてサクサク動く感じです。
ソースコードも短くてシンプルなので、カスタマイズもしやすいと思います。

2011年7月2日土曜日

jqueryでAmazon商品情報をツールチップ風に表示

↓カーソルを乗せるとツールチップ風の小窓が表示されます。

JavaScript 第5版 jqueryドーナツ本 iPad2 アビイ・ロード

まずはphp側で、こんな風にtip=1がある場合は画像とタイトルだけを出力するようにします。
http://kawama.jp/php/amazon_products/?asin=4048684116&tip=1

そしてjqueryのhoverを使い、mouseover時にajaxで上記のデータを取得し、DOMに追加。
mouseoutの時にはDOMから削除します。

マウスオーバーのたびに$.getでデータを取得するのは無駄なので、キャッシュするようにしてみました。

//Amazon商品情報のチップを表示
var amazonProductsTip = function() {
var apt_cache = [];
$('a[href^=http://kawama.jp/php/amazon_products/?asin=], #amazon_products_tip').hover(
function(e){
e.stopImmediatePropagation();
var $this = $(this), $index = $this.index();
$(this).append('<div id="amazon_products_tip"></div>');
$('#amazon_products_tip').css({'padding-bottom':'5px', 'left':$this.offset().left+10+'px', 'top':$this.offset().top+12+'px'});
if(!apt_cache[$index]){ 
$.get($this.attr('href')+'&tip=1', function(data){ 
$('#amazon_products_tip').append(data);
apt_cache[$index] = data;
});
} else { 
$('#amazon_products_tip').append(apt_cache[$index]);
}
},
function(e){ 
e.stopImmediatePropagation();
$('#amazon_products_tip').remove();
}
);
}();


意外とあっさり実装できました。
なんか落とし穴がありそうな気がしますが、ひとまずここまでにしておきます。

2011年6月19日日曜日

jqueryで月別アーカイブを年ごとの開閉式メニューにする

このブログのサイドバーの月別アーカイブですが、さすがに6年分ともなるとリストが長く、見苦しいので、jqueryで開閉式のメニューにしてみました。

ソースはこんな感じです。


var rebuildMonthlyArchives = function() {
var mnYearArr = [];

//1.月別アーカイブのリストを走査し、jquery要素を年別に配列に格納
$('#archives ul li a').each(function(){
var $this = $(this),
$this_year = $this.attr("title").substring(0,4);
if(typeof(mnYearArr['mn'+$this_year])==="undefined"){
mnYearArr['mn'+$this_year] = [];
mnYearArr['mn'+$this_year] = $('<li><span class="expand">'+$this_year+'年</span><ul class="monthly"></ul></li>');
}
mnYearArr['mn'+$this_year].find('ul.monthly').append($this.parent());
});

//2.新たにjquery要素を作り、1で配列に入れた要素を入れ、最後に#archivesに戻す
var $jq_obj = $('<ul></ul>');
for (var mni in mnYearArr) {
$jq_obj.append(mnYearArr[mni]);
}
$('#archives ul').remove();
$('#archives').append($jq_obj);

//3.見た目をよくする
$('#archives ul li span.expand').click(function(){
$(this).next().toggle();
if($(this).next().css('display')=="block"){ $(this).css("background-image","url(/imgs/btn_minus.gif)"); }
else{ $(this).css("background-image","url(/imgs/btn_plus.gif)"); }
});
};


ちょっと冗長な感じがするのでもっと短くしたいのですが、とりあえず今回はここまでにします。

あとwpのタグはこうなってます。


<li id="archives">月別アーカイブ
<ul>
 <?php wp_get_archives('type=monthly&show_post_count=true'); ?>
</ul>
 </li>
<script type="text/javascript">rebuildMonthlyArchives();</script>

2011年5月19日木曜日

jqueryの.load()は引数を与えるとPOSTで送信する

.load()の第二引数で、url(php)に引数を付加するのですが、その引数がphpにわたらない、という状況に遭遇しました。

実は.load()は、デフォルトではGETで送信するのですが、引数がある場合は自動的にPOSTで送信する仕様になっています。

今回、php側では$_GETを使って引数を取得していたので、当然引数は受け取れません。

この仕様に気がつかず、しばらく悩むことになりました。
最初から$_REQUESTで作っておけばよかった。。

2011年4月8日金曜日

chromeでgreasemonkey(ユーザースクリプト)を使う

firefoxでgreasemonkeyをよく使ってるんですが、chromeでも使えることを最近知りました。
なおchromeではgreasemonkeyの呼称ではなく、ユーザースクリプトと呼びます。

さっそく試してみました。

インストールは、

・Web上で公開されてるユーザースクリプトをダウンロードする
・ローカルのユーザースクリプトをchromeにドラッグ&ドロップする

だけ。簡単です。

インストールしたスクリプトは、WinXPだと以下のフォルダに格納されます。

C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions

試しにfirefoxで使っている自作のスクリプトをインストールしてみましたが、chromeでも問題なく動きました。


ただ、greasemonkeyとはけっこう違いがあります。
特に自分の場合困るのは「@requireなどのgreasemoneky独自の機能がない」という点。

jqueryをrequireして使ってるスクリプトが動かなくなってしまうので、書き直しが必要になってしまいます。

このあたり、今後改善されてくるといいんですが、当分は各ブラウザを使い分けて対応するしかないですね。

2011年3月25日金曜日

項目が多いセレクトメニューを見やすくしてくれるjqueryプラグイン「 jQselectable」

http://5509.me/sample/jQselectable/

普通のセレクトメニューを、見やすく且つおしゃれにしてくれるjqueryプラグインです。かなりいい感じです。

cssが階層化してあるで、自分のサイトにあわせてデザインを変更したりする際は少し面倒な感じかしますが、項目数の多いセレクトメニューなどをこれで置き換えることができれば確実にユーザーフレンドリーになると思います。

2011年2月22日火曜日

jqueryでinputフォームの現在のカーソル位置(キャレット)を取得

したいんだけど、プラグインとかないかな~、と思って探していたら、ありました。

http://d.hatena.ne.jp/tubureteru/20110101/p1

さっそく使ってみましたが、いい感じです。

さらに別のプラグインも発見。

http://d.hatena.ne.jp/ja9/20100917/1284146159

こちらは選択範囲を取得して処理するプラグインですが、getCaretPos()というメソッドを使うことでキャレットだけ取得することも可能。


ちなみに文字の入力位置のことをキャレットと言うそうです。
ググるときに役に立ちました。

2011年2月20日日曜日

jqueryでドラッグ可能なダイアログを作る(ipop_multi.js)

を用意することになりました。

最初jquery uiのDraggableを使おうかと思ったのですが、単純に小窓を開いてグリグリ動かせれば良かったので、こちらのプラグインを使わせていただくことにしました。

ipop.js

が、途中で仕様変更があり、同時に複数ダイアログを開くことが必要になりました。

仕方ないのでipop.jsに少し手を加えさせていただき、複数ダイアログに対応させてみました。ipop_multi.jsと名付けました。

せっかくなのでサンプルとソースを置いておきます。良かったらお使いください。

サンプル:ipop_multi.js

ipop_multi.jsソース

2011年2月18日金曜日

jqueryで要素のindexを取得する

こんなリストがあって、

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>


何番目の要素をクリックしたかindex番号を取得したい時はこうします。

$("ul li").click(function(){
console.log($("ul li").index(this));
});

2011年2月17日木曜日

jqueryのhoverイベントをunbindする

jqueryを使っていて、hoverイベントをunbindすることがありました。

が、hoverは他のイベントと違って

$('#hoge').unbind('hover');

のようにはできません。

さてどうしたものか、、、と思ってググると以下のページを見つけました。

http://d.hatena.ne.jp/tilfin/20080615/1213608859

先に答えだけ書いてしまうと、

$("#hoge").unbind("mouseenter").unbind("mouseleave");

このようにすることで目的は達成できます。

それよりもこの記事自体、マウスイベントについてかなり深く掘り下げているので勉強になりました。

こちらの公式のデモも参考になります。
http://api.jquery.com/mouseover#example-0

2011年2月9日水曜日

jqueryでアコーディオンメニューを自作する

司馬遼太郎を読むというサイトを運営してるんですが、各ページのコンテンツが非常に多く、縦に長いページになってしまっているので、アコーディオンメニューを導入してみました。

javascriptのアコーディオンメニューは探せばいくらでもあると思いますが、今回も勉強のために自作します。
というか、簡単なものであれば自作したほうが後々のメンテナンスが楽だと思います。

とりあえずググってこちらのページを見つけました。参考にさせていただきました。

http://coder.blog.uhuru.co.jp/js/easy_accordion

$('.accordion_head').click(function() {
$(this).next().slideToggle();
}).next().hide();


ソースはこんな感じ↑。非常にシンプルです。


これをベースに少し改良を加えてみました。

$('.accordion_head').click(function() {
$(this).siblings('.accordion_body:not(:animated)').slideToggle("normal",function(){ $(this).siblings('.accordion_head').toggleClass('accordion_head_opened'); });
}).siblings('.accordion_body').hide();


修正点は

・DOMの構造が違ったので、自分のサイト用にセレクタを修正
・アコーディオンが開いている時と閉じている時でそれぞれマイナスアイコンとプラスアイコンを表示
・アニメーションが終わったタイミングでマイナス/プラスアイコンの表示を切り替え
・「:not(:animated)」を加えることで多重アニメーション防止

といったところです。

実際に動いているものはこちらのページ等で確認できます。
http://shiba-ryo.net/contents/144/%E7%87%83%E3%81%88%E3%82%88%E5%89%A3

ちなみにこのページ、ブログパーツ等の読み込みに時間がかかります。
「$(document).ready(...」の中に処理を記述すると読み込みがすべて完了するまでアコーディオンが動かないので、コンテンツのすぐ後にスクリプトを設置しました。

2011年1月29日土曜日

jquery.flatheights.jsでブロック要素の高さを揃える

cssでブロック要素の高さを揃えるやり方は知っていたんですが、改めて調べてみたところ、jqueryプラグインがあるのを知りました。

http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html

こちらの記事は2007年と非常に古いですが、プラグインファイルの更新は「2010-09-15」となっており、定期的にメンテナンスされているようです。
ためしにjquery1.4.4で使ってみましたが、ちゃんと動作しました。

使い方も簡単ですし、jqueryを使っているサイトで高さを揃える要件があれば使ってみるといいと思います。

2011年1月27日木曜日

jqueryでvisibilityを切り替えるプラグインを作る

こちらのフォームを改良している際、要素のvisibility:visiblevisibility:hiddenの切り替えが必要になりました。

display:blockdisplay:noneの切り替えならshow()hide()が使えますが、visibilityの場合はそれがありません。
もちろんcss()メソッドを使えば切り替え可能ですが、いちいち書くのが面倒ですし、見た目もあまりきれいじゃありません。

というわけで、ちょうど良い機会だと思って、visibilityを切り替えるjqueryプラグインを作ってみました。

jquery.vtoggle.js

(function($){
$.fn.vtoggle = function(config){
var $this = $(this);

switch ($this.css("visibility")){
case "visible":
$this.css("visibility","hidden");
break;
case "hidden":
$this.css("visibility","visible");
break;
default:
//何もしない
break;
}

return $this; //メソッドチェーン用にreturn
};
})(jQuery);


見ての通り、本当に単純な関数です。

それでも、自分が作ったプラグインがメソッドチェーンの輪のひとつとして動いているのを見ると、ちょっと嬉しくなりますね。

まあ初めてのプラグインとしてはこのくらいでちょうど良かったと思います。

2011年1月26日水曜日

jqueryでformタグのonsubmit属性を削除する

Pear::HTML_QuickFormで出力したフォームには

<form action="/path/to/somewhere" method="post" name="testForm" id="testForm" onsubmit="try { var myValidator = validate_testForm; } catch(e) { return true; } return myValidator(this);">

という具合に、もれなくonsubmit属性がついてきます。

今回はこのonsubmitを消すという処理をしました。

$('#test_form').attr("onsubmit");

でさくっと消せるかな~、と思ってたのですが、消えません。

ググってみたところ、

$('#test_form').removeAttr("onsubmit");

で消せることが分かりました。

http://joshuaclayton.github.com/code/2009/06/08/handling-jquery-and-onsubmit.html


ちなみにonsubmitより利用頻度の高いonclickで検索すると、やはり属性が削除できず困っているというページが何件かヒットしました。

参考:onclick属性の操作
http://d.hatena.ne.jp/ftsh/20100729/1280396560
http://stackoverflow.com/questions/249074/how-to-change-onclick-handler-dynamically


それからこちらは「nameやidに"submit"という名前を付けるとjqueryの動作が怪しくなる」という件について。
属性の削除とは別の問題ですが、今回同様の問題に遭遇して、解決の糸口になりました。
http://www.takenoshin.com/web/blog/page/6.html

2011年1月24日月曜日

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践



ざっと立ち読みしてなかなか良さそうだったので、買って読んでみました。

いちおうセレクタとかイベントの解説もありますが、あくまで気持ち程度。
「初級から上級まで」と銘打ってはいますが、それなりにjqueryの知識と経験があったほうが良いと思います。

ほとんどの項は1~2ページと短く簡潔にまとめられています。深く理解したい人にはもの足りないと思いますが、jqueryを使ってどんなことができるのかを広く浅く知るにはちょうど良いです。

あと自分用メモとして、サンプルのURL貼っておきます。
http://home.impress.co.jp/books/2961/