jquery関連の記事一覧



jQuery .hover()

画像出典:.hover()(jQuery API Documentation)


●jQuery 1.7以降の.onを使っていますか?

jQueryの1.7以降では、.onという要素にイベントを追加する命令(メソッド)が使えるようになっています。今まで.bindで書いていたものから置き換えて使えるようです。

といっても私は.bindすら使っていませんでしたが…(.hover()や.click()だけで事足りていたので…)。

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()

.on() | jQuery API Documentation


.onの詳しい話は「jQuery の on() と off() を理解する(tacamy.blog)」に書かれているので、詳しく知りたい方はそちらを読んで欲しいのですが、.onは引数のひとつめにイベントを複数書けるのでとても簡単な書き方になります。便利そうですよね。

on() のひとつ目の引数を、スペース区切りで複数指定することで、どのイベントが発生しても同じ処理をさせることができます。

$('.foo').on('click blur', function(){...});

jQuery の on() と off() を理解する - tacamy.blog


●hoverをイベントとして引数に書いても反応しない

ということで、早速使ってみようと思いました。

$(".foo").on("click",function(){...});

とclickイベントが付いている要素へ、追加でマウスカーソルが要素に掛かっても(要素にホバーしても) function(){...} を実行できるようにしようと、

$(".foo").on("click hover",function(){...});

と書いたら動作しないわけですよ。


いつもマウスカーソルが要素に掛かる(ホバーする)時には次のように書いていて、

$(".foo").hover(function(){...});

これが動作するのになぜ…と思ったら、重大な勘違いをしていました。

記事の続きを読む




このブログは画像拡大表示の動作(lightbox)には prettyPhoto というjQueryのプログラムを使用しています。

複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。(下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます)

20140428-prettyPhotoカスタマイズ-01

画像出典:jQuery lightbox(No Margin For Errors)


このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。

  1. Create a link (<a href="#">).
  2. Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
  3. Change the href of your link so it points to the full size image.

jQuery lightbox for images, videos, YouTube, iframes, ajaxStephane Caron ? No Margin For Errors

実際これはこれで問題ないのですが、毎回「<a href="画像のファイル名" rel="prettyPhoto">」と「rel="prettyPhoto"」をaタグに追加して書くのは面倒ではないですか?

私は面倒です。

また、このブログは最近デザインをリニューアルしましたが、過去の画像のリンクに「rel="prettyPhoto"」と加えるのは現実的に無理です。


なので、楽をしましょう。

記事の続きを読む



レスポンシブウェブデザインのページを作るときに注意したいのが、画像をスライド表示のように切り替えて表示するスライダーを使用する際に、PC用で使っていたスライダーのJavaScript(やjQueryプラグイン)を使用すると、画面の大きさに合ったスライダーにならないとか、画像をスワイプして画像切り替えができないという問題が発生することがあります。

その点をクリアしたレスポンシブウェブデザインで使用できるスライダーのjQueryプラグインとして、私はFlexSliderを使用しています。現在のバージョンは2.2.1。

2014031-jQuery-FlexSlider-Tips-04

画像出典:FlexSlider 2(woothemes)


こちらの極薄紙印刷のサービス紹介サイトで使用しています。

2014031-jQuery-FlexSlider-Tips-01

画像出典:極薄紙印刷・薄葉紙印刷のスーパーライトプリント(吉田印刷所)



記事の続きを読む



以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。

モヤモヤを抱えたままだったので自分なりに考えてみました。


今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。(インストールはこちらから

Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。

20140202-window-jQueryについて-08

画像出典:Firebug



この機能を使って「window.jQuery ||  document.write('<script src="●●"><\/script>') 」の動作を調べてみます。


記事の続きを読む



jQueryで簡単・シンプルにクロスフェード型のスライドショーが作れないかな?と思って探したら「A Simple jQuery Slideshow | Jon Raasch's Blog」というスクリプトが公開されていました。

※クロスフェードというのは今表示している画像が段々薄くなっていくと同時に、次の画像が段々濃くなってくるタイプのエフェクト。


今回はこちらのスクリプトを紹介します。

実は以前書いた「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」でも紹介しているのですが、このスクリプトのままだと、画像にリンクを張った場合に動作しなくなるので、それを修正したものを紹介いたします。

このブログのアクセスログを見ると、検索で「jQuery 簡単 スライドショー」とかで結構来ているみたいなので。


今回のスクリプトを動かしたデモは↓のようになります。(スマートフォン版ページだと動作しません)

Sea Otter preening itself in Morro Bay, CA  sea-otter-morro-bay_13 Sun Sun Down Sun Rise over Sydney Sea

記事の続きを読む



20120406-jQueryのattrとprop-00

jQueryをロードする際のナイス!と思った書き方」でコメントを頂いたので返信がてら記事を書いてみようと思います。


シマダさんからコメントを頂きました。ありがとうございます。
フォールバックの違う書き方をCSS-Tricksで見つけました。
http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/

Initializrが書き出すやつはHTML5用であり、HTML4やXHTML1.0ではHTMLの文法エラーを招くので、HTML4やXHTML1.0に書くのであればCSS-Tricksで紹介されているやつがいいでしょう。
jQueryをロードする際のナイス!と思った書き方

なるほど。まだ皆さんがHTML5になっているわけではないですから、重要な指摘ですね。


では文法エラーは何が出るのかから見てみましょう。
記事の続きを読む



20120518-Initalizr-jQuery-load-00

先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。


このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。


さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。


このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。

記事の続きを読む



20120406-jQueryのattrとprop-00

なんでもjQueryでできるのではないかと思って考えてみた。

考えのネタ元は以下のページ。


こちらのページはWordPressのタグで「親カテゴリのみにclass属性を付ける」ことをやっているわけですが、私はWordPressは全然わからないので、jQueryで何とかする方法を考えてみます。


CMSから書き出されていた元のタグはこんな感じなんでしょうかね。

<ul class="accMenu">
	<li><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>


これをjQueryで何とかして以下の様にします。

<ul class="accMenu">
	<li class="open"><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>

早速考えてみましょう。

記事の続きを読む



20120409-jQueryで画像スライドショー-00


jQueryのスライドショーのプラグインって色々ありますね。

会社のサイトでは様々なサイトで紹介されているプラグインほど大がかりなものはなくても良いかな、と思って「jquery「slideswitch」で簡単にスライドショーを実装|衆」に掲載されているスクリプトを使用しています。ありがとうございます。


今回はこのスクリプトを勝手に解説します。

記事の続きを読む



20120406-jQueryのattrとprop-00

jQueryについて調べていると色々情報が目に入ってくるものです。

2012年4月7日現在、私はjQueryの1.4.4というバージョンを使用しています。
これは「会社のCMSでも現在使用しているから」というところが大きいのですが、jQueryの最新版は1.7.2です。

最新版のjQueryは以下のページからダウンロードできます。


さて、では1.4.4ではなく、さっさと最新版にアップデートすれば良いのでは…と思いますが、1.6あたりで大きな変更があったみたいなのでメモ的に記事に残しておきます。


記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索