a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
jqueryを効率よく学ぶ方法は？ - プログラミング学習の窓口
jQueryを学ぼうと思ってネット検索をしても、色々な情報が出てきてどの情報を参考にすればいいか分からないという経験をした方はいるのではないでしょうか。 特に独学で学ぼうとすると、その壁によくぶつかります。ドットインストールのようなメジャーなサービスも使ったことがなければ、その価値は分かりません。 そこでおすすめなのがプログラミングスクールの活用です。最初に何から学ぶべきかといった説明はもちろんのこと、キャリアプランまで相談に乗ってくれるので、ただ単に学んで終わるということが減らせます。 The post jqueryを効率よく学ぶ方法は？ first appeared on プログラミング学習の窓口.
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする
jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする方法を紹介します。 テーブルをソートするには、jQuery UI Soatableを利用します。 １．基本 まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。 サンプル サンプルのコード（抜粋）は次のとおりです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> $(function(){ $('tbody').sortable(); }); </script> <table> <thead> <tr> <
jQueryで画像の横幅・高さが取得できなかった時の処方箋
jQueryで画像の高さを取得しようとしたら失敗してしまった複数の画像の高さを取得して、レイアウトを調整しようとしたのだがうまくいかない。 その時のHTMLは以下↓のようになっていた。 <div id="photo_list"> <img src="photo1.jpg" width="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" width="100" /> </div> javascript（jQuery）はこう↓ $(function(){ var photos = $('#photo_list img'); var max_height = 0; $.each(photos,function(){ if( max_height < $(this).height() ){ max_height =
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
スプライトアニメーション作成用jQueryプラグイン「Phantascope」:phpspot開発日誌
jquery.phantascope by barneyfoxuk スプライトアニメーション作成用jQueryプラグイン「Phantascope」。 デモが面白かったので反射的にご紹介。スプライトを使ってFPS指定が可能なアニメーションが作れます デモはロックマンがキーボードに反応して動くものですが、あくまで、アニメーション用なので、そこら辺の処理はJSで直接記述する必要があります。 キャラクタをスプライトでアニメーションさせる部分のみ、本プラグインが作用します とはいえ、アニメーション部分の処理が簡単になりそうです。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 3Dのキューブのアニメーションで迫力あるエフェク
はじめての javascript・jQuery - 続・ロールオーバー画像切替え split(), slice() 編 - tenkaoのはてなダ…メモ
前回の はじめての jQuery - ロールオーバー画像切替え から少し変更してみた。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>はじめての jav
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
iOSにものすごくそっくりなJQuery Mobileのテーマ
最近話題になることの多い、JQuery Mobileを使ってiOSにそっくりな外観のテーマが作成されたようです。そのそっくり具合はデモを見れば一目瞭然です。ネイティブアプリケーションに限りなく近いUIを独自に再現する際には使えるかもしれません。 また簡単なモックアップをPCベースで作るというような応用もできそうですね。 作者のTait BrownさんはメルボルンのUIデザイナーでコードとサイトはgithubで公開されています。 via:http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
jQuery 1.9 で $.browser が使えなくなってしまった対策 | CYOKODOG
jQuery 1.9 になってとうとう $.browser が使えなくなってしまいましたね。 もともと非推奨ということもあり、個人的にはプラグインを実装する時などは極力使用しないようにしてましたが、実際使えなくなってしまうと、動かなくなってしまうプラグインって結構多いんじゃないかなぁって気がします。 スムーススクロールが動かない プラグインではありませんが、最近ではいろんなサイトで見かけるようになったスムーススクロールの実装で、影響受けてるというエントリを見かけました。 IE系だとウィンドウのスクロールを制御するとき「html」を指定する。 GoogleChrome や Safari などのWEBKIT系は「body」指定しないといけない。 そこで、「$.browser.safari」をつかって、どっちを指定するかを切り替えていた。 ところがどっこい、jQuery1.3以降だと「$.bro
本をペラペラめくる風UI実装jQueryプラグイン「Booklet」:phpspot開発日誌
Demos - Booklet - jQuery Plugin 本をペラペラめくる風UI実装jQueryプラグイン「Booklet」。 よくあるペラペラめくる風UIを実装できます。めくる領域の縦横サイズを自由に指定できたり、ページ番号を降ったり、スピードやキーボードコントロール等、カスタマイズが容易で小回りが効きそう 使い方によっては単なるリンクでのページ送りの方が分かりやすくなってしまいそうなところに注意ですが、なかなか便利そうです。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 フルスクリーンでページめくりをするUI実装デモ Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
「jQuery.browser.safari」が非推奨になっていたので、代替案でスムーススクロール
jQuery1.3以降では「$.browser」が非推奨になってる。昔使ったスムーズスクロールのスクリプトをコピペで使おうとしたら、動かなかった。orz そのソースが下記のような感じ。 function smoothScroll(href){ var speed = 400;//スクロール速度（ミリ秒） var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; } まず元のソースを少し解説すると
jQuery で画像の読み込みを遅延させる | MissingNo.
・Lazy Load Plugin for jQuery Lazy Load はスクロールに合わせて画像の読み込みを遅延させるスクリプトです。 今回、ブログに jQuery を使った画像の遅延読み込みとロールオーバーを実装してみました。 直接デザインを調整していたので、閲覧時に画面の崩れに遭遇していましたら申し訳ありませんでした。 jQuery とは？ ｢画面遷移せずにデータの受け渡しをするには JavaScript の Ajax なる技術が必要だ ──｣ と、半年程前に気が付いたのですが、当時の課題を JavaScript で実現するのは難しく投げていました。 そして、最近になり ｢jQuery｣ を使えばやりたいことが簡単にできることを知りました。 jQuery とは JavaScript のライブラリの1つで、非常に人気があります。 複雑な処理をシンプルに書けるのなら、これは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zehfernandes/jquery.fullContent: Enables fully websites
jQuery Mobile 1.1.0 日本語リファレンス
crocos.jp
http://moriwaki.net/cms/?p=503