<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
こんにちは☆最近すっかり涼しくなりましたね…! みなさん、体調など崩していませんか?? さて、今日は画像を回転させられるjQueryのプラグイン、 jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪ このブログのメイン画像、 これまでは水中から撮った水の写真を使用していたのですが、 長かった夏も終わって涼しくなってきたので衣替えしてみました♪ 追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。 Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア お花で出来たWelcome文字です♪ この部分、ただの画像がぺたっと貼ってあるだけではなく、 画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けにな
クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 2010年06月15日- Clipboard plugin for jQuery クロスブラウザで動作するクリップボード操作用jQueryプラグイン「Clipboard plugin」 IE以外用にFlashを使ってクリップボードを使う機能はよく知られていますが、jQueryベースのクロスブラウザ対応のライブラリのご紹介です。 使い方が超簡単で、次のように1行記述するだけでOKです。 $.clipboard( "You clicked on a link and copied this text!" ); swf の位置をオプションで指定することなんかも出来るみたい。 jQueryを標準導入しているサイトには簡単に組み込めて便利そうですね。 関連エントリ FirefoxやChromeでも
この記事のURL http://www.dango-itimi.com/blog/archives/2010/001015.html jQuery をむさぼっております。IE でのみ発生したエラーに関してのメモです。 以下二点のエラーで半日以上悩んでしまいました。 Windows Vista 64bit Home IE8 と Windows XP IE6 で確認しています。 ローカルPC上からでは ajax メソッドによる xml ファイルが読み込めず parsererror 発生 dataType に xml を指定し、IE を用いてローカル上で確認しようとすると parsererror が発生します。 $.ajax({ url: ~, dataType: "xml", success: ~, error: ~ }); そもそもこれはこういうものなのでしょうか。サーバ上にアップロードする
先日「jQuery の紹介」と題して、職場(情報システム部門)向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。(資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが・・・) はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQuery のプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに・・・(会社の標準ブラウザは未だに IE6 なんです) そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。 機能概要 html モードとプレゼンモード html モード(普通の html ページの表示)とプレ
要素が持つ、例えば”click”などのイベントに対してコールバック関数を紐付けます。カスタムイベントに対してもbind可能です。 イベントハンドラは、コールバック関数に対してイベントオブジェクトを渡します。”click”や”submit”などの元々の動作をキャンセルするには、戻り値にfalseを返してください。これにより、イベントのbubblingも止まりますので、親要素が持つイベントの発生もキャンセルされてしまうことに注意してください。ほとんどの場合は、イベントには無名関数を渡すことが出来ます。そうしたケースであれば同じクロージャの中で変数を利用できますが、それが難しいような場合は第二引数を用いてデータを引き渡すことも可能です。(その場合はコールバック関数は三番目の引数になります)
jQuery 1.3より実装。 イベントに対してハンドラを登録します。 登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。 カスタムイベントに対してbindすることも可能です。 この関数で指定できるイベントは、次の通りです: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 現時点ではサポートしていないイベントは、次の通りです: blur, focus, mouseenter, mouseleave, change, submit bindとほぼ同様の関数ですが、ハンドラ登録時にマッチする要素だけでなく、永続的にイベント発生時点でマッチする要素に反応する点が異なります。 例えばli要素に対してclickイベントを登
使用例 こちら ダウンロード http://leandrovieira.com/projects/jquery/lightbox/ 使い方 よくあるjQueryのプラグイン同様、以下のような感じで。 <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox();
コードは以下。 <script type="text/javascript"> $(function() { var availableTags = ["日本", "日本語", "本屋", "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; $("#tags").autocomplete({ source: availableTags }); }); </script> <div class="demo"> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /> </div> </div> コード解説 cssも
更新履歴 2011-09-29 Ver 0.1.3 に更新 垂直方向へのスクロール状態でのメニュー表示位置ずれ不具合を修正しました。 2010-12-01 Ver 0.1.2 に更新 ドロップダウンメニューの保持を示すマーカー(»)の表示位置の調整処理を補正しました。 2010-11-17 Ver 0.1.1 に更新 メニューが画面の端で展開された際に、ウィンドウの表示枠からはみ出て隠れてしまわないように、表示位置を補正をするようにしました。Demo 先日、イントラの WEB ページで 10 年以上使用してる Java アプレット製のドロップダウンメニューを JavaScript でリニューアルしたいという相談を受けました。jQuery のプラグイン使えば簡単かなと思い安請け合いしたのですが、なかなかしっくりくるプラグインを見つけることができませんでした。具体的には水平/垂直の両方向に対応
マウスオーバーでメニューバーの「上に」メニューを表示する機能を実装していたら、IEの場合だけoffset.topの値がおかしい事に気づいた。 日々の小ネタ:IEにおける座標の取得 またもや先人達の貴重なページのおかげで、IEの場合だけoffset.topの値がスクロール量を差し引いた「表示画面内の位置」、IE以外はスクロールを考えない「ドキュメント全体内の位置」を示している事に気づいた。jQueryでもいまだに解消されていないブラウザ間の差異だ。 仕方なくブラウザで場合分けしたコードを書いた。 var v_parent_menu_top = $(‘#parent_menu’).offset().top; if ($.support['cssFloat']) { var v_new_top = v_parent_menu_top – v_menu_box_height; } else {
解説 ブラウザがサポートする機能の情報を提供する、プロパティのコレクションです。 ブラウザの機能に依存したコードを実装する場合、ブラウザの種別に基づくよりも、ブラウザがサポートする機能に基づいて実装を変える方が、より良い方法であると言えます。 jQueryはブラウザがサポートする機能を判別し、jQuery.support オブジェクトのプロパティとして提供します。 以下のWebサイトでは、ブラウザがサポートする機能について詳しく説明されています。 Feature Detection: State of the Art Browser Scripting Browser Detecting (and what to do Instead) Common feature tests: プロパティ一覧 プロパティ 型 説明
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。(コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません) オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
Selectors/API/jQuery 基本 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基本フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui/li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul/li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ/ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏(Jornの「o」の上に点が2つ付きます)で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く