iPhone向けWebサイトの制作等に役立ちそうな情報まとめ
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプトWebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titanium
jQuery maphilight documentation
maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover. It provides a single jQuery function: $('.foo').maphilight() This would hilight every image with a map on the page: $('img[usemap]').maphilight() Demos The simple demo (with awful art, and examples of data attributes) A map of the world A map of the USA A few feature-demonstrations Plu
インラインでその場でLightboxできる「jQuery.popeye」:phpspot開発日誌
jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」
jQuery の hover() について調べたことのまとめ - tilfin's note 跡地
hover() は mouseenter と mouseleave を同時にセットする http://docs.jquery.com/Events/hover の引数の名前付けを見て、hover は mouseover と mouseout を同時に指定するものだと思っていたが違うらしい。 jquery-1.2.6.js の 2278 行付近 hover: function(fnOver, fnOut) { return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut); }, とあるように mouseenter と mouseleave に対して指定するものである。 over/outと enter/leave の違いは、http://docs.jquery.com/Events/mouseover の Demo みるとよく
jQuery：リンクのクリック領域をブロック全体にする方法
jQueryのプラグインで「BigTarget.js」というのがあるが、 このプラグインのように、リンクのクリックできる領域を ブロック全体にすることを、自作できないかなーと考えたてみた。 プラグインの簡易版みたいなソースになってしまったが、 シンプルに使えそうなので紹介しておきます。 サンプル 今回は例として、ブロック要素ではないですが、 リンクを含むリストを代用として使ってみます。 ■HTMLソース <ul> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> </ul> <li>のすぐ内側に<a>がある場合の例です。 ■Script $('li a').each(function(){ var Href = $(this).attr('href'
ナンバリングがついたjQueryとCSSで制御するスライダー「 Automatic Image Slider w/ CSS & jQuery」
TOP > WebDesign > ナンバリングがついたjQueryとCSSで制御するスライダー「 Automatic Image Slider w/ CSS & jQuery」 非常に高機能なjavascriptライブラリとして、WEBではかなり利用されているjQuery。今回紹介するのはjQueryとCSSで制御するスライダー「Automatic Image Slider w/ CSS & jQuery」です。 View Demo この手のjQueryを用いたスライダーは数多く存在しますが、「Automatic Image Slider w/ CSS & jQuery」はHTML部分、CSS部分とてもシンプルに作られており、カスタマイズが非常に簡単に行なう事ができます。また動きの部分のjQueryもシンプルなので、カスタマイズもjavascriptを知らないというかたでも何とな
Ajax » その他のJSライブラリ » 透過PNGをIE6に対応させる方法いろいろ | PHP & JavaScript Room
ページのhead要素内でalphafilter.jsを読み込み、アルファ画像（透過PNG)のimg要素のclass属性に「alphafilter」を指定するだけで、アルファ画像を透過することができるJSライブラリです。 アルファ画像を背景画像にしている場合も透過可能です！背景画像を指定している要素のclass属性に「alphafilter」を指定すればOK。 <head> <script type="text/javascript" defer="defer" src="alphafilter.js"></script> </head> <body> <p><img src="./sample.png" class="alphafilter" alt="" /></p> <p class="alphafilter">テキスト</p> </body> 設置イメージ alp
input要素にも使えるjQueryのロールオーバープラグイン - Rewish
jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。 ライブラリについて HTMLを汚さず、簡単に画像のロールオーバーを実装できます。 ダウンロード jquery.rollover.js - v1.0.4 ライセンス MIT License 主な機能 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる 使用方法 画像を用意する example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じデ
jQuery Plugins IE Png fixでIE6に透過pngを適用 | A Day in the Life
March 19, 2008 IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。しかし最近jQueryを使用してサイトを構築するケースが増えたため、jQueryの透過pngをIE6に対応させるプラグインのIE Png fixを試してみました。 使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用させるようにします。 $(function() { $("img[src$=png]").pngfix(); }); 属性セレクタの後方一致である$を利用して拡張子がpngのファイルすべてに.pngfix()が適用されます。 cssの背景に透過pngを使う場合が多いので.iepngfixと言うクラスにも適用されるように記述しています。 $(function() { $("img[src$=png],.iepngfix").pngfix(); }):
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ:phpspot開発日誌
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね
シンプルな紙芝居を実装できるjQueryプラグイン「sexyCycle」:phpspot開発日誌
sexyCycle シンプルな紙芝居を実装できるjQueryプラグイン「sexyCycle」。 画像をクリックでなめらかにスライドしながら画像を切り替えるというシンプルなものなのですが、タイマーで自動で画像を切り替えたり、アニメーションの種類を変えたりと多機能で使えそうだったのでご紹介。 クリックやタイマーで画像を切り替え 実装は、div 要素の中に ul リストで画像を並べて初期化するだけです。 <div class="cycle" id="box0"> <div class="wrap"> <ul class="sexyCycle-content"> <li><img width="320" height="480" src="img/1.png"></li> <li><img width="320" height="480" src="img/2.png"></li> <li><im
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
[JS]jQueryのプラグイン33+1選 -2008年5月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Kwicks スムーズに伸び縮み。 Horizontal Accordion 水平方向のアコーディオン。 Accordion Con
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
jQueryで複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする - 雑想空間
はまったのでメモ。 jQuery でセレクタを複数条件で指定したい場合などがある。 例えばこんな場合 <table> <tr> <td class="a" id="1">a-1</td> <td class="a" id="2">a-2</td> <td class="a" id="3">a-3</td> </tr> <tr> <td class="b" id="4">b-4</td> <td class="b" id="5">b-5</td> <td class="b" id="6">b-6</td> </tr> </table>こんなテーブル構造があった場合。 classが"a"、idが"5"のカラムの色を変えたい場合。 $(function() { $(".a,#5").css("backgroundColor", "red"); });これでOK。 これは or 条件ですね。 cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/07/chart-tool.html
http://moto-mono.net/2010/03/09/jquery1-4-plus-alpha.html
lab.distilldesign.com is not in our inventory
http://www.designwalker.com/2009/09/jquery-table.html
IBM Developer
