HTML をプレゼン形式に表示する jQuery プラグインを作ってみた - Cyokodog :: Diary
先日「jQuery の紹介」と題して、職場（情報システム部門）向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。（資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが･･･） はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQuery のプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに･･･（会社の標準ブラウザは未だに IE6 なんです） そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。 機能概要 html モードとプレゼンモード html モード（普通の html ページの表示）とプレ
GAE/J で日本語記事リンク付きの jQuery Plugin まとめサイトを作ってみた - Cyokodog :: Diary
前々から GAE/J で何か作ってみたいと思ってたのですが、あまりネタも思いつかなかったので、とりあえず jQuery Plugin のまとめサイトを作ってみました。 jQuery Plugins - jQuery.Doc 機能紹介 見たまんまなので、特に説明は要らないかと思いますが一応.. 1)カテゴリ プラグインのカテゴリのリンクです。リンクのクリックで対象のプラグインのリストが名前順で表示されます。 New Plugin をクリックした時のみ データの登録日付、名前順で表示されます。 2)プラグイン名 プラグインのプロジェクトサイトにリンクしてます。 3)日本の国旗 和製プラグインの場合に日本国旗のアイコンが表示されます。 4)製作者名 twitter のアカウント、もしくは、はてな ID が確認できたプラグインのみ製作者名が表示されます。 5)非対応ブラウザ 非対応ブラウザを赤字の
jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog :: Diary
jQuery UI の tabs や accordion といったウィジェット系プラグインでは、専用のプラグイン定義関数 $.widget でプラグイン定義することで、一環性のあるプラグイン API を利用者に提供しています。 今回は、$.widget を使ったプラグインの定義方法について調べてみました。 ui.core.js の入手 $.widget は jQuery UI の ui.core.js というソースファイル内に定義されてます。 公式サイト（http://jqueryui.com/download）よりプラグイン一式をダウンロードし、zip ファイルを解凍すると、以下パスに ui.core.js があるので、これを読み込み $.widget を使用できるようにします。 jquery-ui-1.7.2.custom/development-bundle/ui/ui.core.j
jQuery プラグインの定義パターンについて調べてみた - Cyokodog :: Diary
jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらい まず、jQuery が標準で提供している各種 API が、どうのような構造で定義されてるかおさらいしてみます。 $ や jQuery はグローバル変数、つまり window オブジェクトのプロパティ名であり、その実体は関数オブジェクトです。 window.$ = window.jQuery = function(){ ... } jQuery が提供する API には 関数 API と メソッド API があり、関数 API は jQuery 関数オブジェクト（以降 jQuery セレクタと記述します）が持つ、関数オブジェクトのことを指します。 jQue
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p
ソースを修正しないでモーダルウィンドウ系プラグインの IE6 のガタつきを抑止してみる - Cyokodog :: Diary
jQuery BlockUI のようなモーダルウィンドウ系プラグインの中には、画面スクロールしてもウィンドウ表示位置が固定されるものがありますが、IE6 の場合 position:fixed が使えない関係でスクロール時、固定ウィンドウがガタついて表示されてしまう事が多いようです。 私の場合、会社の昼休みに IE6 でプラグインのデモページをチェックすることが多いので結構気になることがあります。（最近は IE6 だとまともに動作しないプラグインも結構多いです） 「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」では、expression と background-image / background-attachment の設定でガタつきを抑止することができました。 同様の手法でプラグイン自体のソースを変更することなくガタつきを解消することがで
スクロールイベントにおける position:absolute 要素の位置補正 - Cyokodog :: Diary
スクロールイベント内での position : absolute 要素の表示位置の補正処理について考えてみます。 具体的には以下のプラグインのような動きの動作原理について考えてみます。 jQuery Scroll Follow | demo スクロールにより対象要素が隠れると、スクロールに追従するように absolute 要素の表示位置が補正されます。 以前のエントリ「IE6 向け position:fixed + スクロール追尾型の要素固定表示の方法を考えてみた」でも似たようなことを試しましたが、この時は IE6 で position:fixed を擬似的に実現する事を目的としてたので、absolute 要素をスクロールさせるコンテナが $(window) 限定でした。 今回は position:relative な DIV 要素をコンテナとした場合や、擬似フレームの対応も含めて考えてみ
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
スクロール時にちらつかない IE6 向け position:fixed - Cyokodog :: Diary
更新履歴 2010-01-21 スクロール時のガタつきをはじめとする諸問題等を解決した精度の高い fixed を使いたい場合はこちらをご覧ください。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary 前回のつづきです。 スクロール時のちらつき 前回までのやり方は、スクロールイベント内で absolute 要素の表示位置をずらす事で position:fixed を実現してましたが、この方法だとスクロールの際、対象要素にちらつきが生じます。 今回はこのちらつきを解消する方法について考えてみます。 サンプルページ (本エントリのサンプルページは IE6 でご覧ください。) 表示位置のずらしこみを行わない スクロールイベントでの表示位置のずらしこみがちらつきの原因なので、別の方法で position:fixed させ
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
