iconDock 0.8b Example
iconDock 'dock effect' jQuery plugin by Isaac Roca Version 0.8b Examples var confDock = { iconMinSide : 35, iconMaxSide : 70, distAttDock : 100, coefAttDock : 2, veloOutDock : 500, valign: 'top' } var confDock2 = { iconMinSide : 20, iconMaxSide : 100, distAttDock : 100, coefAttDock : 3, veloOutDock : 500, valign: 'middle' }
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
[JS]簡単に設置できる超軽量のコンテンツスクローラーのスクリプト -TinyScroller
divで配置したパネルをスクロールできるようにする超軽量のスクリプトをleigeberから紹介します。 TinyScroller JavaScript Scrollable Div – 1.7KB demo スクリプトの容量は約1.7KB（圧縮時）で、対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeとなっています。 設置も簡単で、パネルのdiv要素と同列に下記のスクロールバーとなるdiv要素を配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </textarea>
各種フォーム要素のCSS整形用JavaScriptプラグイン集:phpspot開発日誌
各種フォーム要素のCSS整形用JavaScriptプラグイン集が紹介されています。 独自にフォーム要素を作る際のまとめとして参考にできそうです。 チェックボックス・ラジオボタンを枠に置き換える クールな独自チェックボックス・ラジオボタンにカスタマイズ フォームを綺麗 こちらも同様にフォームを独自にデザイン JavaScriptとCSSの組み合わせで、なんでも出来ちゃいますね。 リンク先は以下のエントリより参照してください。 How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins | Onextrapixel - Showcasing Web Treats Without Hitch
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
Amazonで閲覧中の商品に価格comから最低価格を取ってきて付加するGreasemonkeyスクリプト書いた - 5.1さらうどん
その買い物ちょっと待った。こんな感じになります。JavaScriptを始めてまだ間もないので、ようやっと「作品」と言い張れるような物ができたかなと。はじめてのマッシュアップ。 パソコン周辺機器カテゴリーなら大体は使えると思います。中にはこんなに価格差のある商品もあった。Amazonで買うのがバカらしすぎるｗインストールしていろいろ見て回るだけでも結構おもしろかったりする。 インストールはこちらからどうぞ。Amazon Lowest Price Checker 引っ越しでごたごたして自鯖が使えなくなってしまったので、レンタル鯖を用意している間突撃レーザー氏の鯖を使わせてもらってます。ご協力ありがとうございます。 ちなみに、Greasemonkey専用の関数を使っているのでOperaのユーザースクリプト実行機能などでは動かないと思います。Firefox推奨。今後アップデートする予定もあるので、
[JS]jQueryの効果的な使い方を実例から学ぶ -Use jQuery
Use jQueryは、JavaScriptのライブラリ「jQuery」とそのプラグインを使用したウェブサイトのショーケースです。
人気の「JavaScript ライブラリの紹介エントリー」 9 選 詰め合わせ | バシャログ。
JavaScript などを駆使したリッチな UI の需要も、ますます高まってきていると思います。 その証拠に、当バシャログでも、その手の記事が人気を集めています。 そこで今回は、そのようなエントリーをまとめてみます。ここ半年ほど物で、全 9 エントリーです。 それではどうぞ。 使いやすい lightbox 系スクリプト by sakai（2008/11/6） lightbox 系のスクリプトはとにかくたくさんありますが、その中でも比較的新し目で使い勝手の良いものをご紹介しています。 Fancy Box → デモ この系統のはどんどん出てきますね。 Sexy LightBox 2 残念ながら、この「sexy-lightbox-2」はこのエントリ執筆現在、サーバに繋がりませんでした。 ヴァーチャルツアーが簡単に作れる jQuery virtual tour by nakayama（2008/
[JS]一つの機能に特化したシンプルなJavaScriptのライブラリ集
jQuery, Prototype, MooToolsのように多機能ではなく、一つの機能に特化したシンプルなJavaScirptのライブラリをSmashing Magazineからいくつか紹介します。
jQueryプラグインでクールなプルダウンメニュー | バシャログ。
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集:phpspot開発日誌
25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
[JS]オバマ大統領も使ってるjQueryのプラグイン集
jCarousel 画像をカルーセルのアニメーションでスライド表示。 画像拡大スクリプト（Thickbox）と組み合わせたり、ニュースサイトのようにテキストを垂直方向にスライドしたり、AJAXにも対応。
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip
リッチインターネットアプリケーションの実装時に検討したい30のUI
[JS]簡単に画像のプレビューを設置できる超軽量スクリプト -imgPreview