2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと
jQuery、プラグイン、jQuery UI、Web経由のCDNとは:CSSの書き方も分かるjQueryプラグイン実践活用法(1)(1/3 ページ) CSSの書き方も分かる、jQueryプラグイン紹介連載 本連載は、jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載です。jQuery/JavaScriptコードやHTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 第1回目は、基本/おさらいとしてjQueryとプラグイン、jQuery UIについて簡単に触れ、Web経由でjQueryを使うCDN(Content Delivery Network)について解説します。 これぐらい知ってますよね? 「jQuery」基礎講座 jQueryは、米国のJohn R
【おさらい】「jQuery」って何だっけ? jQueryとは、John Resig氏を中心として開発されている、オープンソースのJavaScriptライブラリです。DOM操作を中心としたプログラミングに向いており、エンジニアはもちろんのことマークアップエンジニアやデザイナの間で広く普及しています。 jQueryについての詳細は、下記記事をご参照ください。 jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック < リッチクライアント 2009/12/8
GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装!かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集100種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウス
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jQuery Gallery Slider Plugin ダイナミックにスライドする画像ギャラリー。 prettyPhoto a j
http://djangoproject.jp/weblog/2009/02/24/django_hack_a_thon_disc8/ スライド jQueryを効率的に利用・習得するためのhogehogeみたいな話と、jQueryUIの紹介という内容。 質問はTwitterのreplyで受け付けるという形にしたらとてもやりやすかった。 補足 スライドには書いてなくてデモと口頭だけで説明した話 jQuery UI Demos | jQuery UI デモを色々試して使えそうなものを見繕うとよい optionsの指定の仕方はデモからそれっぽいのを選んで、View Sourceで表示したソースを参考にすればいいよね Download Builder | jQuery UI pluginを選択すると依存pluginも自動的に選択してくれる pluginとthemeを選択してダウンロードすると、必要
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ウィンドウサイズを変えると コンテンツ(記事等)が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト 可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト?どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見や
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
twitter facebook hatena google pocket JavaScriptでカレンダーを作る方法はいろいろありますが、なかなか満足のいくものは多くありません。 jCalはJavaScriptライブラリ「jquery」を使用し、お手軽かつクールなカレンダーを作成可能です。 sponsors 使用方法 jCalからファイル群をダウンロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.animate.clip.js"></script> <script type="text/javascript" src="http://yourdomain
Ext JSとprototype.jsで作るリッチなUI:パターンとライブラリで作るAjaxおいしいレシピ(3)(1/4 ページ) 今回は話題のExt JSを使ったサンプル Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ(フレームワーク)です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。 今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。 ■ ごく普通の入力フォームのサンプル まずこちらのサンプルを見てください。 今回のサンプルプログラム(拡大表示はこちら、※注意1:FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめし
「デスクトップアプリケーション並みの美しいユーザーインターフェイスが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の最新版、「Ext JS 3.0」が7月6日にリリースされました。「古籏一浩のJavaScriptラボ」第4回は、実際に簡単なサンプルを作りながらExt JSの魅力に触れる入門記事をお届けします。 (編集部) Ext JSとは? 「Ext JS」は、米Ext JS, LLCが公開しているオープンソース(※)のJavaScript/Ajaxフレームワークです。「フレームワーク? ライブラリーなら聞いたことあるけど……」と首をかしげる人も多いかもしれません。「Prototype.js」や「jQuery」、「Yahoo UI Library」「MooTools」などの有名なJavaScript/Ajax“ライブラリー”に対して、Ext JSは“フレームワ
「神は細部に宿る」。ほんのちょっとした機能だからと見過ごすのではなく、ほんのちょっとしたことだからこそ誠心誠意作り込んでいくといったような意味合いが込められた言葉だ。コンピュータのGUIインタフェースはまだここ十年、二十年の話でありまだまだ改善の余地は大きい。 ドロップダウンリストが便利に! 例えばファイルのアップロード、一つ一つファイルを指定するなんて愚の骨頂だ。さらに複数選択のドロップダウンも選んでいる途中のちょっとしたミスで全ての項目が非選択に戻ったりする。これも問題だが、解決策としてDropdown Check Listがある。 今回紹介するオープンソース・ソフトウェアはDropdown Check List、ドロップダウンリストにチェックボックスを付けるというjQueryプラグインだ。 これは良いアイディアだ。Dropdown Check Listを使うとドロップダウンの複数項目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く