jQuery関連 Archive

画像をアップロードするときって、「あれ、何の画像だったっけかな？」ということがたまにありますよね。長いファイル名だと「C:\My Documents\….」しか見えないこともしばしばです。

そこでその問題を解決してくれるのがAjax Uploadです。jQueryとあわせて使います。

これを導入するとファイルを選択した直後にどんな画像か縮小画像で表示してくれますよ。

↑ 画像をアップロードするためにファイルを選択すると・・・。

↑ 選択した直後にこのように縮小画像を表示してくれます。

つまりファイル選択時にアップロード処理が完了させる、という仕組みですな。

多少わかりにくい感じはありますが（従来のインターフェースと違うため）、複数ファイルをアップロードするときなんかに便利かもですね。

詳細＆ダウンロードは以下からどうぞ。

» Ajax Upload – ZURB Playground – ZURB.com

これは便利そうなのでメモ・・・。jQuery.tagInputはdeliciousちっくなタグ入力フォームを実現してくれるjQueryのプラグインですよ。

↑ こんな感じね。

ちゃんと入力した文字を太字にしてくれたり、頻度を右にだしてくれたりしますね。コードもシンプルなので導入は簡単ですな。

詳細＆ダウンロードは以下からどうぞ。

» BugsVoice – turn bugs into opportunities

これはメモ的にエントリー。jQueryでスクロールするリストを作るためのチュートリアルですよ。細かい見た目に気を使っている点がすばらしいですね。

↑ こういう上から下に流れるリストが作れます（デモ）。

こうしたスクロールするリストは他にもたくさんありますが、用途にあった実装をしたいですよね。たくさん知っておくと良いのでご参考までに。

» How to build a scrolling list with jQuery : Five Minute Argument

これはなかなか素敵なのでメモ的にエントリー。メニューによってダイナミックにアイコンが入れ替わるエフェクトですよ。jQueryのプラグインなので記述も簡単です。

↑ こうして並んだアイコンが・・・。

↑ こんな風にダイナミックに組み変わっていきます。

デモを見たほうが早いかもですね。本サイトでいろいろメニューをクリックしてみてください。「おー！」となること請け合いですよ。

詳細＆デモ＆ダウンロードは以下からどうぞ。

» jQuery Quicksand plugin

これはちょっとかっこいいですよ。使いどころが難しそうですが・・・。

ちょうどカメラのファインダーから覗いたような効果を画像に加えるjQueryのプラグインです。

↑ こんな感じ。

ファインダー部分以外は微妙にぼかし、さらにクリックするときの動作も設定可能です。動きがちょっと重くなりますがぜひデモをどうぞ。

» Making a Photoshoot Effect With jQuery & CSS | Tutorialzine demo

ギャラリーサイトやポートフォリオサイトにいいかもですね。詳細＆ダウンロードは以下からどうぞ。

» jQuery PhotoShoot Plugin 1.0 – Tutorialzine

以前にも似たようなものを紹介しましたが、こちらも使いやすそうなのでエントリー。jQueryからGoogle Mapsを扱えるようにしたものですね。

バルーンやらアイコンやらをカスタマイズできるのが良いですね。

↑ マークアップもわかりやすいっす。

ダウンロード＆詳細は以下からどうぞ。

» gMap – Google Maps Plugin For jQuery | About

あれ、jQueryのこの命令ってどういう風に書かれているだっけな？というときにはげしく使えるツールのご紹介。

jQueryのバージョンと、気になる命令（toggleとか、cssとか）を指定するだけで、jQueryのソースコードの該当する箇所を引っ張ってきてくれます。

↑ たとえばこんな感じ。

どうにもおかしな挙動になるときはそもそものソースコードをあたることも多いですよね。そこでこのツールを使えば長いソースをやみくもに検索するよりもぐっと楽に見つけられますよ。

単にJavaScriptの勉強をしたい人にもおすすめですね。ご利用は以下からどうぞ。

» jQuery source viewer

これ、便利そうなのでメモ的にエントリー。Twitterの入力フォームにある、残り文字数のカウントを実現してくれるjQueryのプラグインです。細かいオプションも充実していて素敵。

↑ こんな感じに実装できます。

ユニークなのは「文字数制限は140文字、残り30字になったら色を変えて警告する」といったことができる点ですな。導入やマークアップも簡単なのでお勧めです。詳細は以下からどうぞ。

» jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe

これ、ちょっとメモ的にエントリー。IE6には対応していませんが、日本語も通るし、わりとよくできているので。

↑ こういうエディターをさくっと実現できます。

マークアップも簡単ですね。

$(function(){
  $("textarea").htmlarea();
});

また当然のことながらコントロール部分を制御するオプションも利用可能です。CSSをオプションから制御できるのはうれしいですね。以下のチュートリアルがわかりやすいかな。

» jHtmlArea – The all NEW HTML WYSIWYG Editor for jQuery

そんなことよりデモを見たい、という方は以下からどうぞ。

» jHtmlArea Live Demo – WYSIWYG HTML Editor for jQuery

覚えておいて損はないかもですね。詳細＆ダウンロードは以下からどうぞ。

» jHtmlArea – WYSIWYG HTML Editor for jQuery

「Some Useful JavaScript & jQuery Snippets」なるエントリーがありましたよ。Part 1とPart 2がありますが、どちらも使える感じかな。ちょっとメモ的にエントリーっす。興味のない方はスルーの方向で・・・。

個人的に使いそうなものをいくつか紹介してみますかね。

var tog = false; // or true if they are checked on load
$('a').click(function() {
  $("input[type=checkbox]").attr("checked",!tog);
  tog = !tog;
});

↑ チェックボックスを全ON/OFF切り替え。良く使いますね。

if($(element).is(":visible") == "true") {
  //The element is Visible
}

↑ ある要素が見えているかどうか。hiddenとか良く使うので。

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

↑ 右クリックを禁止する。

if ($("#elementid").length) {
  //it does!
}

↑ 特定の要素の存在チェック。

元記事にはもっとたくさんありますよ。よろしければどうぞ。

• Some Useful JavaScript & jQuery Snippets | Codrops
• Some Useful JavaScript & jQuery Snippets – Part 2 | Codrops