jQuery カテゴリー記事

Ajax 通信でのキャッシュ

2009-03-04 (水)カテゴリJavascript, jQuery, 制作タグ

IEでは、XMLHTTP通信(GET限定)を行ったときにキャッシュが発生するそうです。仕事で必要な場面があったので調べてみました。
Ajax(XMLHTTP)のキャッシュについて
jQueryを使っている場合も同様で、常に最新状態にしたい場合はキャッシュを使わずに取ってくるような仕組みの導入が必要です。

Java Script
$.ajaxSetup({ ifModified: true });
$.get(url,sendObj,function(data){
//data処理の内容
});

こうすることでキャッシュを使わず常に最新状態で表示出来ます。
さらにキャッシュを使ったかどうかを判定する方法もあるようで
amachangがソースコード出してました
jQuery本体を修正すれば、この判定も出来そう。

ImageProtecter公開ページを更新。

2009-02-03 (火)カテゴリJavascript, jQuery, プラグインタグ

昨年公開したjqueryプラグイン「ImageProtecter」ページをきちんと作成しました。公開したもののすっぽかしていたのもあったので。。

このプラグインと雑誌アエラの公式サイトで正式に採用しています。
一部コンテンツのみですが。

あくまで簡易的なものです。右クリックで画像保存のダウンロードをしても出来ないようにしているだけ。
スクリーンショット取ってまでする人には効果なし。そういう意味ではFLASHで作っても同じ事だと思う。何故かたまにFLASHだから大丈夫と思っている担当の人がまだいるみたい。

良い説得材料にはならないやもしれないけども、class指定だけで簡単に出来るから手間にもならずに実装出来る強みがあると思う。
将来的にはblank.gifなくとも出来るようにしたいなぁ…

皆さん使う機会あれば使ってくださいね!

jQuery ifによる要素の判定

2008-11-27 (木)カテゴリJavascript, jQueryタグ, ,

jQueryでのif

いやはや、jqueryやっていて今更気づきました。
気づかず別の手法でやっていた自分も恐ろしいですが、考えてみれば当然なのです。

Java Script
$("#test")

上記では”test”のid属性を持っているタグを取得するjQueryの作法です。
通常Javascriptで変数などを扱って値の有無で処理を変える場合

Java Script
var test;
if(test){
 //処理内容
}

とすると思います。上記のように変数の有無で処理内容を実行するかどうかを決めるのです。
じゃあjQueryでも。。

Java Script
if($("#test")){
 //処理内容
}

これじゃ駄目なのです!
jQueryだと$(“”)にてjQuery独特のオブジェクトを取得するので、true,falseは返ってきません。
なのでif文で囲っても無駄。じゃあどうすれば良いの?

Java Script
if($("#test").length){
 //処理内容
}

上記が正解です。そのオブジェクトがいくつあるのかがlengthで返ってくるので、id=”test”がない場合は0が、複数ある場合は1,2,3,…と返ってくるわけです。

考えたら当たり前なのですが、意外と陥りがちな所かと。
自分は1年近くjQueryやってて気づきませんでしたorz
これからはlength使うべし。自分メモ。

この本、なかなか見直し勉強には良かったです。

jQuery – 制作現場で使えるプラグインあれこれ

2008-11-08 (土)カテゴリJavascript, jQueryタグ, ,

jQuery
半年前位から、JavascriptのライブラリにjQueryのライブラリを使っているのですが
拡張用のプラグインが非常に豊富でうれしい限りです。

制作現場でもよく使っているプラグインをまとめてみました。

IE PNG Fix
IE6などは、まだまだ制作現場ではユーザシェアから言っても対応必須です。
PNG使えれば自由なデザインの幅も広がります。そんな可能性を広げてくれるプラグインです。

Java Script
$(function(){
  $("img[@src$=png]).pngfix();
});

とても簡単にPNGの導入が出来る優れものなのです。

Rounded Corners
角丸を現状のHTMLでコーディングするのはとても大変です。
CSS3では仕様の中に角丸があるのですが、FFとsafariのみしか対応していないから現状だと一番スマートなやり方かな?

Java Script
$(function(){
  $('.rounded').corners();
});

※corners(“30px 10px”)等と書くと角丸具合も自由に変えられます。

Star Rating
アマゾンなどにある星マークの評価をする機能を実装できます。
若干DB等に調整を入れる必要はありますが、コミュニティサイトなどを作る際に簡単に導入出来るのが魅力的です。

Java Script
$(function(){
  $("#star").rating('star.php', {maxvalue:5, curvalue:2});
});

jQuery lightbox
有名なLightBoxのjQuery版です。通常だとprototype.jsやscriptaculous.jsを読み込んだりしなければいけないのでどうしても肥大化してしまうのですが、プラグインなので、他に必要なのはjQueryのみ。

Java Script
$(function() {
  $('#gallery a').lightBox({fixedNavigation:true});
});

jQuery Image Protecter
最近は減ってきましたが、一部企業案件などで話がよく出るのですが「画像をダウンロード出来ないようにしてほしい!」、実際はキャプチャ取ってしまえば取れるのですが右クリックで保存出来ないような処置を加える事が出来ます。
このプラグインはmootoolにあったImage Protecter dwProtecterを参考にjQueryに僕が作り変えたものなのです。

Java Script
$(function(){
  $(".protect").ImageProtector({image:"images/blank.gif"});
});

まだまだ、他にも便利なプラグインがあります!
本家には色々なプラグインがカテゴライズされているので、是非とも欲しいプラグイン探してみてください。
ぱっと使って試せるのがプラグインの魅力なので、仕事などで使う際の参考にどうぞ!!

jQuery 本家

jQuery版画像プロテクションプラグイン をリリース!!

2008-08-18 (月)カテゴリJavascript, jQueryタグ

先日PHPSPOTさんの記事で画像をプロテクションする仕組みのJavascriptが取り上げられていました。
自サイトの画像の保存をプロテクションする仕組み
早速使ってみたところ

  • mootoolで動作する
  • 画像に付けたリンクまで消えてしまう

との感じでトレードオフが気になったので、jQueryのプラグインとして作り直してみました。
あまりmootoolやprototypeとかライブラリでソースと読み込みをごちゃごちゃさせたくないよね!
(ちなみに僕はjQueryベースでJavascriptを構築していく事が多いので。。)
そんなわけで、上記のような問題点も解消!わーパチパチw

お仕事などでダウンロードさせたくないんだけど、出来ない?とか言われた際に
サクッと導入出来るので良いと思います。




こんな感じでいけます!

ダウンロードはここからどうぞー

star ratingのいたずら防止

2008-08-08 (金)カテゴリJavascript, Word Press, jQuery, デザインタグ

スターレーティングを簡単に作成する時に重宝しているjQueryのプラグイン
jQuery Star Rating Plugin 2.4
http://www.fyneworks.com/jquery/star-rating/

便利なんだけど大きなサイトとかで使う場合、デフォルトだと何度もクリック出来ちゃう。
なので、いたずら防止で以下のコードを追加してあげます。

63行目以下ののclickイベントを以下の形に変更

Java Script
click: function(n, el, settings){	// Selected a star or cancelled
$.rating.groups[n].current = el;
var lnk = $(el).children('a'); val = lnk.text();
// Set value
$.rating.groups[n].valueElem.val(val);
//
//ここから追加
$.rating.groups[n].readOnly = true;
$.rating.groups[n].valueElem.siblings('.star_group_'+n)
.addClass('star_readonly')
.removeClass('star_live')
.unbind("mouseover mouseout");
//ここまで

// Update display
if($.rating.groups[n].readOnly == false){	//このif文も追加
	$.rating.event.drain(n, el, settings);
	$.rating.event.reset(n, el, settings);
// click callback, as requested here: http://plugins.jquery.com/node/1655
if(settings.callback) settings.callback.apply($.rating.groups[n].valueElem[0], [val, lnk[0]]);
}//閉じも忘れずに。
}

1回★のレーティングした後は更新ボタン押さないといけないようになりました。
古いバージョンだとイベントなどが毎回読み込まれていたようですが、新しいバージョンだと
設定部分にイベント関数が来てたりと、随分内容が変わっていました。
古いバージョンだと

Java Script
settings.cancel = <span class="synConstant">false</span>;

とclickのアクションに追加するだけなので楽ちんだったけど
イベント周りがバラバラだったので、新しい方がすっきりしてると思いました。