Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
ボタン等を光らせて目立たせ、分り易くすることが出来るjQueryプラグイン「jQuery illuminate」:phpspot開発日誌
ボタン等を光らせて目立たせ、分り易くすることが出来るjQueryプラグイン「jQuery illuminate」 2011年06月02日- jQuery illuminate - Tony Lea ボタン等を光らせて目立たせ、分り易くすることが出来るjQueryプラグイン「jQuery illuminate」。 あんまりギラギラするのはチカチカしてうっとうしいものになってしまいそうですが、このプラグインで実装すれば、まるでイルミネーションのように穏やかに光らせられるので、注目を集めたいような部分に適用すると使い勝手の向上につながるのかも。 動作ムービーは以下を参照してみてください。実際にブラウザで見てみたい方はサイトにアクセスしてみましょう。 このエフェクトが、必要ライブラリを読み込んだ後、$('#button').illuminate(); だけで出来ちゃいます。 オプションで強さや、ス
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」:phpspot開発日誌
どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 2011年05月12日- FitText - A plugin for inflating web type どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 iPhone/iPadやPCでも文字をフィットさせられます。 ブラウザをリサイズしてもちゃんとフィットしてくれます。 文字を大きくしてインパクトあるように見せたい、でもズレたらなんかカッコ悪いという場合に使えますね。 PCの通常サイズ。 幅を小さくしたところ。 使い方は $(element).fitText() とやるだけでOKみたい。 １からやるとなるとちょっとめんどくさそうですが、これだけ簡単にできる「jQuery最高！」という声が聞こえてきそうですね。 （
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms - かちびと.net
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear - かちびと.net
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
多彩なエフェクトが魅力なイメージギャラリー用jQueryプラグイン・Skitter
なかなか使いやすそうで、汎用性 もあるかなと感じたので備忘録。 エフェクトが多数あり、機能も中々 良く、クロスブラウザ対応している イメージギャラリー用のjQueryの プラグインです。 イメージギャラリーは数多に存在するのでまぁ選択肢の一つです。まぁ後発の方が機能が良くなりやすいっていう見方も出来なくは無いですね。 22のFlashライクなエフェクトから選べます。どれもクールなエフェクトですよ。 エフェクトにはそれぞれデモが用意されているので触ってみてください。 フルスクリーンにも出来ます。 サムネorボタンのナビゲーション ナビゲーションを選択できます。ボタンかサムネイル。 ナビゲーションの表示の有無 そのナビゲーションを常時表示させるか、マウスオーバー時に表示させるかを選択できます。 IE6、7でも IETesterで確認。問題有りませんでした。 オプション いろいろ用意されてます。
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
jQueryベースの画像スライダー３０まとめ:phpspot開発日誌
Roundup of 30 jQuery Image Gallery/Slider Tutorials & Plugins | Lava360 jQueryベースの画像スライダー３０まとめエントリのご紹介。 画像スライダーといっても、実に様々なデザインがありますが、３０個もあれば自分の目的に合ったものが見つかりやすそうですね。 全体的にクオリティは高いようです。 昔では想像もできなかったことが実現できていることに色々と感動しますね。 関連エントリ JavaScript製の画像スライダー・ギャラリーいろいろ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 軽量でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」
jQueryベースのWebフォームライブラリ「jFormer」
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー
A slide-show in 2 lines of JavaScript デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: コンテンツ（HTML） Step 2: ページめくり（JavaScript） Step 3: スタイリング（CSS） Step 1: コンテンツ（HTML） はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。 HTML5 <!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <section>This is the <em>first</em> slide</section> <section>This is the <em>second</em> slide</section> <secti
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
[jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトする
IE6ではtd.hover:hoverが効かないので濃くなりません。IE6はもういいんじゃないかな。 JavaScriptjQuery本体と以下のコードで動作します $(function(){ var overcells = $("table td"), hoverClass = "hover", current_r, current_c; overcells.hover( function(){ var $this = $(this); (current_r = $this.parent().children("table td")).addClass(hoverClass); (current_c = overcells.filter(":nth-child("+ (current_r.index($this)+2) +")")).addClass(hoverClass); }, fu
![[jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトする](https://cdn-ak-scissors.b.st-hatena.com/image/square/f3b64fcae12fc4680a913e41df94f680d0ec3caf/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2011%2F04%2Fjq.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
skuare.net - JavaScript / Movable Type / etc.
IDEA * IDEA
