魅力的なUIにするためのjQueryプラグイン20 – creamu
Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま
jQueryを使ったドラッグ&ドロップパネルのチュートリアル – creamu
Web Designer plusで、jQueryを使ったドラッグ&ドロップパネルチュートリアルが紹介されています。 iGoogleやWordPressの管理画面で見られるインターフェースですね。 HTMLとCSS、jQueryのソースが公開されています。 ソートの順番は、ドラッグ後に以下のような文字列が生成されて、サーバサイドで処理しているようですね。 column1=item1,item3&column2=item4,item2,item5& 一度見てみてはいかがでしょうか？ » Collapsible Drag & Drop Panels Using jQuery Gadget Partyでも、ガジェットの管理のページでガジェットの順番を変えられて、ブログパーツでの表示順を変更できます。F.Ko-Jiがさくっと実装してくれました。 今日も天気がよくて気持ちいいですねー。いろいろと出か
便利！jQueryのアクションをビジュアル的に作成する·IxEdit MOONGIFT
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ！ 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの？いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる？ 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの？ 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ
[JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea
テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。
日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン:phpspot開発日誌
Generate a JQuery UI Slider using Data from a Select Element 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン。 次のように、スライダーのＵＩで範囲を指定する際に便利に使えそうです。 デモ１） Date Slider デモ２） Speed Slider 使用頻度はそれほどないかもしれませんが、ここぞという時に覚えておいて損はなさそうですね。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 JavaScriptで日付をTwitter風に○分前といった表記に変換できるライブラリ「niceTime」
小窓をアイコン化できるjQueryプラグイン「jQuery Iconize Plugin」:phpspot開発日誌
Plugins | jQuery Plugins 小窓をアイコン化できるjQueryプラグイン「jQuery Iconize Plugin」。 右上の最小化ボタンっぽいものを押すと、アイコンに出来ます。 ↓↓アイコン化↓↓ 小さく折りたたみたい場合に使えそうですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 2009年3月 便利なjQueryプラグイン集 ユニークで使えそうなjQueryプラグイン10個 RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」
サイト内の目次をjQueryで自動で作成するチュートリアル:phpspot開発日誌
Automatically generate table of contents using jQuery サイト内の目次をjQueryで自動で作成するチュートリアル。 jQueryで、h1〜3タグのヘッドラインを自動で抽出し、以下のように「Table of Contents」としてヘッダに表示するチュートリアルです。 コンテンツが仮に変わったとしても、jQueryで自動でやってくれるため、目次作成がかなり作成が楽になりそうです。 デモページ コードは以下のように、プラグインにするほどではない簡単なコードで実現できています。 $("#toc").append('<p>In this article:</p>') $("h1, h2, h3").each(function(i) { var current = $(this); current.attr("id", "title" + i);
mixi アプリで alert の置換に最適な jQuery プラグイン「jAlert」 ( ラボブログ )
神部です。 mixi アプリを開発していて、デバッグ期間だけ alert を使っていたけど今更いい代替がみつからない！というときに便利です。 なんとスタイリッシュな Alert＆Confirm を体現する jQuery プラグインがあるのです。 -jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) -jQuery Alert Dialogs -alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」:phpspot開発日誌 実際に使ってみました Google Hackathon で作成したファイナルクエスチョン で大いに使わせていただきました。 アプリの方も若干ブラッシュアップしたので、よかったら遊んでみてください。
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
AnythingSlider JQuery Plugin | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features. Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each of them had
Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル:phpspot開発日誌
Perfect signin dropdown box likes Twitter with jQuery|AEXT.NET Twitter風のドロップダウンボックスなログインフォーム作成チュートリアルが公開されています。 少ないスペースでサインインリンクを表示し、クリックで画面遷移なしにフォームを表示するということでスペースを有効に利用できます。 「Sing in」をクリックすると開きます。 デモページ サインインだけでなくて、他にも応用できそうですね。 関連エントリ jQueryを使ったブラウザ上で動作するLeopardデスクトップの構築 jQueryとPHPでダイナミックな投票スクリプトを作成 これは驚きの、CSSだけで作れる吹き出しボックス jQueryを使ったタグクラウド生成チュートリアル
細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog
実は技術部ではなく、演出部所属のagoです。 先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。 1 .addClass, removeClassはスペース区切りで複数のclassを渡せる .addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。 //classの順番は保持します。 //<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。 $('div').addClass('hoge huga'); //<div class="hoge gege huga">があった場合、<div class="gege">になります。 $('div').removeClass('hoge huga'); ただし、hasC
jQueryを使って国際化処理を行う·jquery.localize.js MOONGIFT
多言語に対応したWebサイトを構築する場合、サーバサイドで対応するのが一般的だった。例えばGetTextを使った国際化処理が有名だ。サーバサイドで処理をできるのは手軽な反面、言語ごとにリソースを消費してしまうのが問題だ。 JavaScriptで国際化を行う 結局のところ、国際化とは見た目の話でしかない。であれば見た目を操作するのに向いたJavaScriptで行わせるというのはあながち間違っていないかもしれない。 今回紹介するオープンソース・ソフトウェアはjquery.localize.js、jQueryを使った国際化ライブラリだ。 jquery.localize.jsはrel="localize[hoge]"といった要素で国際化する際のキーを指定する（この場合hogeがキーになる）。そして別途JSONファイルを用意し、hogeに対応した各国語の文字列を指定する。後は読み込み時にjquery
入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」:phpspot開発日誌
入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」 2009年07月24日- Input Limiter 入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」。 通常は、このフィールドは何文字以内などと書いておいて、サブミット後にチェックという方式だと思いますが、Input Limiter を使えば、入力が始まると同時にヒントが現れ、フィールドが何文字制限なのかというのをポップアップしてくれます。 デモページ 横にちょこっと表示するよりも、入力している人にとっては非常に分かりやすい見せ方ですね。 $(function() { $('textarea').inputlimiter({limit: 100}); }); jQueryプラグインということで初期化も上記のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌
IBM Developer
IDEA * IDEA
最後の文字だけ読めるiPhoneのパスワードフィールドそっくりな入力フィールド作成用jQueryプラグイン:phpspot開発日誌
http://www.designwalker.com/2009/08/wp-jquery.html