mippe | Shared With: Everyone - May 20 2008 | Javascript, jQuery, web design
Quoted: Noupe is a design weblog created to inspire creativity by sharing innovative resources and websites to bloggers, freelancers and web designers.
mippe | Shared With: Everyone - Aug 25 2008 | Information Architecture, Interface, jQuery, javascript
jQueryでかっこいいUIを実装したい。
そんなときにおすすめなのが、『10 useful jQuery plugins』。jQueryの便利なプラグイン10選だ。
以下にご紹介。
・jQuery UI
Webアプリをデスクトップアプリのように動作させる。タブメニューやスプリットペイン、ドラッグできるフォトマネジャーなど・Mark-It-Up
テキストエリアをマークアップエディタに変えてくれる・jQuery cookie plugin
クッキーを簡単にセット、削除できる・lightbox for jQuery
jQuery用のlightbox・jQuery Corner Plugin
jQueryで角丸を作成・jTip
クールなツールチッププラグイン・LavaLamp
CSSメニューにスムーズなスライドエフェクトを追加・Superfish
jQueryのアニメーションを使ったアクセシビリティの高いメニュー・jQuery easing plugin
jQueryによるアニメーションのイージング・jCarousel
jQueryによるcarousel（スライドする画像ギャラリー）それぞれデモがついていてわかりやすい。
デモは↓から。
» 10 useful jQuery plugins
jQueryの便利なプラグイン、チェックしてぜひ使ってみてはいかがだろうか
ShareViewed: 25 Times- mippe | Shared With: Everyone - Aug 21 2008 | javascript, jQuery
Quoted: 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 今回は、逆にjQueryを使ったサンプル集です。なるべく簡単に使えそうな、プラグインを中心にまとめてみました。
ShareViewed: 20 Times - mippe | Shared With: Everyone - May 20 2008 | css, Javascript, jQuery, web design
Quoted: Noupe is a design weblog created to inspire creativity by sharing innovative resources and websites to bloggers, freelancers and web designers.
ShareViewed: 70 Times - mippe | Shared With: Everyone - Apr 24 2008 | photoshop, Javascript, css, jQuery
売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 51 Times - mippe | Shared With: Everyone - Apr 10 2008 | Javascript, jQuery, Ajax
This is only a temporary teaser page. We are working hard on the new site, which will be released together with the final version of jQuery UI 1.5. Thank you for your patience.
ShareViewed: 58 Times - mippe | Shared With: Everyone - Mar 10 2008 | css, Javascript, jQuery
![[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス](http://i.faves.com/01/f5/14ec/92ee7783/05661662f05ed0a25d_5.jpg)
Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。
Roundcorners Canvas
デモページ上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。
view plaincopy to clipboardprint?$(document).ready(function() { $(”#mainblock”).corner(”30px”); $(”#menu ul li”).corner(”8px top”); }); $(document).ready(function() {
$(”#mainblock”).corner(”30px”);
$(”#menu ul li”).corner(”8px top”);
});
Roundcorners Canvasは、ほかにも多様な角丸を実装することができます。
デモページ 21pxの角丸のサンプル
border colorのサンプル
背景色のサンプル
背景画像のサンプル
ネストされたdivのサンプル
lineのサンプル
四辺で異なる角丸のサンプル
tableのサンプル
インライン要素のサンプル
エフェクトのサンプル
Roundcorners CanvasはjQueryのプラグインのため、実装にはjquery.jsが必要です。
ShareViewed: 34 Times - mippe | Shared With: Everyone - Mar 05 2008 | Javascript, jQuery, css
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 51 Times - mippe | Shared With: Everyone - Mar 03 2008 | web design, Javascript, jQuery
![[JS]デザイナーのためのjQueryのチュートリアル | コリス](http://i.faves.com/01/13/f836/fedf1aa8/5d2ce6e3cd0f7130e1_5.jpg)
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
jQuery Tutorials for Designers
Simple slide panel
シンプルなスライドするパネルSimple disappearing effect
シンプルなクローズボタンがあるパネルChain-able transition effects
変化するエフェクトをもつボックスAccordion #1
Accordion #2
アコーディオンAnimated hover effect #1
Animated hover effect #2
ホバー時のアニメーションエフェクトEntire block clickable
ブロックエリアのクリッカブルCollapsible panels
リストで作成されたパネルImitating the WordPress Comment Backend
アニメーションする背景Image replacement gallery
イメージギャラリーStyling different link types
拡張子でアイコンを変更ShareViewed: 38 Times - mippe | Shared With: Everyone - Oct 09 2007 | Javascript, jQuery, plug-in
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。
ShareViewed: 43 Times
Send mippe a friend request or a personal message instead.