jQueryによる画像に沿ったテキスト回り込みライブラリ·jQSlickWrap MOONGIFT
jQSlickWrapはjQueryベース、JavaScript製のオープンソース・ソフトウェア。Webページの中に画像を差し込んで表示することは多々ある。そんなとき、画像が四角であれば回り込みも綺麗に行われるので申し分ない。だが三角の画像や、人物だけの画像の時に四角く回り込んでいるのはあまり格好が良くないだろう。 画像をスムーズに回り込んでいる イラストやシンボルに限定されるかも知れないが、背景が透明のPNG画像を使えば画像の形に合わせた回り込みができるのがjQSlickWrapだ。jQueryベースのソフトウェアで、背景を柔軟に処理して表示が出来るようになっている。 幾つかのサンプルがあるが、画像の枠線に合わせて透明な背景を無視して回り込みをしてくれる。Web上でこのような表現をするのは困難だったので、まるで雑誌のような仕上がりになるはずだ。さらに透明な背景を指定した色に変更することも
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト 可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見や
マウス位置を拡大して表示できるjQueryプラグイン「zooma」:phpspot開発日誌
jQuery - zooma pluging example マウス位置を拡大して表示できるjQueryプラグイン「zooma」。 次のようにカーソル位置を拡大して別のブロックに表示することが出来るプラグインです。 実際に１から実装するとなると結構大変ですが、jQueryプラグインなので次のように簡単に初期化することが出来ます。 var zoomImgUrl = $('#zoomImageRefContainer').find('a').attr('href'); $('div#slideshow').zooma('slideshow', 'zoomBlock', zoomImgUrl); あまり使うことはないかもしれないけれど覚えておけば使うことがあるかもしれませんね。
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ:phpspot開発日誌
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ 2009年08月18日- JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ。 ここ最近で巡回したもので便利そうなチュートリアルを以下にまとめてみました。 沢山あるので使えそうなものだけ覚えておくとよいかもしれません。 Quick Tip ・Resizing Images Based On Browser Window Size ブラウザサイズによって画像のサイズを変えるjQueryチュートリアル Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial 水平サブナビゲーション実現のためのjqueryチュートリアル Making
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ＆ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の１行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ
まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌
まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、本ブログで紹介していない（したものも一部あるかもしれませんが）ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなＷＹＳＩＷＹＧエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなＵＩのＷＹＳＩＷＹＧエディター。jQueryプラグイン SPAW Editor ＵＩが美しいタブ付きＷＹＳＩＷＹＧエディタ →デモページ TTW HT
絵文字入力パッドを作ってみた - yuumi3のお仕事日記
仕事で必要になったので、PCのブラウザー上で絵文字を入力パッドを作ってみました。jQueryを使ったので簡単でした。 ただし、いつものように IE対応(IE6, IE7で動きます)には時間がかかりました ^^); 入力フィールドの右にあるアイコンをクリックすると絵文字入力パッドが表示されます、 mixiの絵文字入力パッドと似てますが ^^; 入力パッドの位置はドラックして移動できます。 コード <html> <head> <title>PC 絵文字入力</title> <link rel="stylesheet" type="text/css" href="/css/pc_emoji.css"> <script src="/js/jquery-1.3.1.js" type="text/javascript"></script> <script src="/js/ui.core.js" ty
まずは、mixiアプリを使ってみよう、作ってみよう
まずは、mixiアプリを使ってみよう、作ってみよう：基礎から分かる、mixiアプリ作成入門（1）（1/3 ページ） mixiのアプリ？それって何？ 「mixiアプリ」は、iGoogleのガジェットのように、SNS「mixi（ミクシィ）」上に組み込まれて実行される、Webアプリケーションです。主に、JavaScript＋XML＋HTML＋CSSで作ります（やり方によっては、Flashなども使える）。 誰でも開発でき、人が開発したmixiアプリを自分のマイページなどに自由に組み込むことができます。また、Webアプリケーションのため課金方式は異なりますが、iPhoneアプリのようにmixiアプリを作って公開することで報酬を得ることもできます。 mixiアプリは、2009年6月現在、オープンβ環境のみで利用可能となっています。正式版は、8月公開予定です（参考：「mixiアプリ」8月に正式公開 販売
無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル:phpspot開発日誌
jQuery Infinite Carousel | jQuery for Designers - Tutorials and screencasts 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 次のような、最後のアイテムに移動しても、最初に戻る無限に回転するカルーセルを作成していくチュートリアルが公開されています。 スクリーンキャストで、作成の過程についても紹介されていて、分かりやすい。 単純に誰かの開発環境を覗くという意味でも勉強になりそう。 更に、図入りで、仕組み・コードについて紹介する形のチュートリアルになっています。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryやPHPを使った便利な仕組みのチュートリアル集 jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」:phpspot開発日誌
ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」 2009年06月15日- dwImageProtector Plugin for jQuery ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」。 Flickr などで導入されていますが、右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する、という仕組みを簡単に実現するためのjQueryプラグインです。 ダウンロードしようとすると、ダウンロード開始するものの、ダミー画像(blank.gif)がターゲットになります。 単純に、元画像にダミー画像(blank.gif)を被せているというハックなのですが、画像の右クリックダウンロードを抑制したい方には便利に使えます。 以下のようなケースで保存す
Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグイン:phpspot開発日誌
SWFUpload jQuery Plugin : Adam Royle Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグインが公開されています。 SWFUpload を使えば、複数ファイルのアップロードが行え、アップロードの進捗もプログレスバーで確認できて、通常のブラウザベースのアップロードとは格段に使い勝手がよくなるのはご存知の通り。 SWFUploadの動作を実際に確認してみる場合はこちら SWFUpload を jQuery方式で関数を呼べてしまうので、jQuery な方はこれを使ったほうが使いやすいかも。 次のように初期化ができ、簡単です。 $('.swfupload-control').swfupload({ // BEの設定 upload_url: "../upload.php", // 送信先URL // ファイルアップロードに関する
jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」:phpspot開発日誌
Setting cookies with jQuery jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」。 このjQueryプラグインを使えば、Cookieさえ１行で簡単に設定できてしまいます。 以下のコードを使って、example というクッキーのキーに foo という値を設定することが出来ます。有効期限は見ての通りですが、7日間有効 $.cookie("example", "foo", { expires: 7 }); パスの設定も以下のように行うことができます。 $.cookie("example", "foo", { path: '/admin', expires: 7 }); ブラウザに対するデータ設定として最もお手軽に使えるCookieですが、これはますます活用できちゃいそうですね。 プラグインのページはこちら 関連エントリ Java
ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」:phpspot開発日誌
ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」 2009年06月08日- Paul Irish jQuery idleTimer plugin ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」。 idleTimer pluginを使えば、ブラウザ内で、しばらく操作しなかったり、別のウィンドウに移動して、最初使っていたブラウザをしばらく操作しない場合に、”アイドル状態”としてイベントを発生させることが出来ます。 逆に、アイドル状態からの復帰もイベントで取得できます。 // タイマーをミリ秒単位で初期化(10000だと10秒) $.idleTimer(10000); $(document).bind("idle.idleT
リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」:phpspot開発日誌
jQuery Keypad ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」。 カスタマイズ性に富んだソフトウェアキーボード実装用のjQueryプラグインがあるみたいです。 数字を入力するためのソフトウェアキーボード。クリア、Backなんかのボタンもつけられます 普段、あまり入力しないようなものを入力する場合、こうしたヒントはとても役立ちそう 他にも、自在にカスタマイズできます。 使い方も無茶苦茶簡単です。 以下のようにしてエレメントを初期化すればOK。 $(selector).keypad({ /* options */ });
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance