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
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
AJAXを使った素晴らしいCSSフォームの47のサンプル | コリス
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
伸縮するアコーディオン風UI実装ライブラリ集:phpspot開発日誌
10 different styles of Accordion’s (Using Ajax, JavaScript, DHTML…)at Developer Snippets Hi developers here I am back again with some useful stuff. I had a thought of how to represent lot of stuff in a constant space area in a webpage 伸縮するアコーディオン風UI実装ライブラリ集。 YourHead Accordion Ext Accordion MooTools Menu Accordion Example with Mootools Accordion Example Accordion Demo 伸び縮みするので少ないスペースで実装することが出来、なめら
20行で実現できるAjaxタブインタフェース:phpspot開発日誌
Dynamic Ajax Tabs in 20 Lines | 20bits The tabbed document interface is a common solution to the problem of presenting a user with multiple document in one window. 20行で実現できるAjaxタブインタフェース。 次のようなタブインタフェースをたったの２０行で実現可能なようです。 次のようなDIV要素を定義します <div class="tabbed-pane"> <ol class="tabs"> <li><a href="#" class="active" id="pane1">Pane 1</a></li> <li><a href="#" id="pane2">Pane 2</a></li> </ol> </p> <div
gmailで添付ファイルが自動でアップロードされるしくみ - bits and bytes
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
MOONGIFT: » 超美麗なグラフを描くJavaScriptライブラリ「WT Toolkit」:オープンソースを毎日紹介
システム開発は何らかの出力をもって完結する。メール送信する場合や、画面出力等がある。業務システム系であれば、帳票や一覧表も考えられる。その中でよく要望に挙がるのがグラフ表示だろう。 グラフ用のライブラリを導入したり、表示のプロットが面倒だったりして、最終的には表計算ソフトウェアに逃げてしまうことが多い。既存データへのグラフ表示機能を追加するのにJavaScriptという選択肢はいかがだろう。 今回紹介するオープンソース・ソフトウェアはWT Toolkit、グラフ表示をはじめとするリッチなコンポーネントを提供するJavaScriptライブラリだ。 まずは何といってもグラフ表示機能だろう。デモで見られるのは3D円グラフ、棒グラフさらにレーダーチャートなど。どれもWebブラウザ上で動的に変更できる。ただし日本語はグラフ上は文字化けするのでご注意いただきたい。 他にもツリービューや表計算風シートの
PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」:phpspot開発日誌
PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」 2007年05月11日- XAJAX PHP Live Datagrid / Gridview I’ve come across a lot of these ‘live’ datagrids / gridviews and I haven’t really found one I like. PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」。 次のようなソート可能なグリッドテーブルを実現できます。 CSSによってレイアウト変更が可能なようです。 同じようなライブラリは存在しますが、PHP+XAJAXライブラリなものということで、そちらに慣れている人には使いやすいでしょう。
手書きインターフェースでアジャイルなサイト構築を支援する『DENIM』 | POP*POP
昔からあったものですが、ひさしぶりに見てみたらすっかりバージョンアップしていたのでご紹介。 ワシントン大学が開発したDENIMは手書きのインターフェースでサイトマップを作成、HTMLまで生成してくれるというすぐれものです。 タブレットPCと相性が良いですが、マウスでもぐりぐり操作可能です。 簡単な使い方を以下にご紹介。 ↑ 起動直後の画面。 ↑ 文字を書いていくとそれが一つのページとして認識されます（画面はHomeと書こうとしていますｗ）。 ↑ 複数作ったページ。リンクもドラッグで簡単に貼れます。 ↑ ページの詳細へ。左側のメニューでサイトマップレベルか、詳細ページレベルかなどが選択できます。 ↑ 円形メニューでさまざまな操作が可能。HTMLでエクスポートなどもできますよ。 ちなみにこうして作られたサイトをHTMLにしたページのサンプルは以下からどうぞ。なかなか味がありますよね・・・。 »
loupe.js (photorealistic loupe effect for images)
loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
あらゆるページに拡大鏡を追加できる『Loupe.js』 | SIMPLE*SIMPLE
これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。 ↑ こんな感じに拡大鏡を設置可能。 画像と簡単なスクリプトをインストールすればOKなようです。 追加するコードは以下のとおり。 まずはページのヘッド部分に以下を追加。 <script type="text/javascript" src="loupe.js"></script> そして拡大鏡を追加したい画像にonLoadで以下を追加。 <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."> </div> 細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。 ダウンロードや詳しい使い方は以下をご覧ください。 » Loupe.js
JavaScript ミニライブラリ
■ JavaScript ミニライブラリ ちょっと前から「なくても不便じゃないけど、あったらちょっと便利かもね」っていう JavaScript を書いたりして発表していましたが、一覧とか作ってないからどんなのがあるのかわかりにくかったのでまとめてみました。 onsubmit で disable 以外のスクリプトは全てパブリックドメインとするので、自由に使って下さい。onsubmit のやつはもともと自分が作ったものじゃないので良くわかんない(← 無責任)。 結構作ってるつもりだったけど、並べてみると意外と少ない。 onsubmit で disable にするやつ テキストフィールドのフォーカス時に背景色を変更する JavaScript フォームに入力を促すメッセージを出力する JavaScript パスワードの安全性を教えてくれる JavaScript カーソル位置のセルの上端と横端をハイ
そろそろまたJavascriptオフの時代が来た
Google Maps以前のころ。ヘビーユーザーのあいだではJavascriptオフが常識になっていた。度重なる時計の再発明に業を煮やし、IEのActiveXに警戒心を抱き、不安定なOSをさらに不安定にするため暗躍するのがJavascriptでありJScriptだった。 Google Mapsがあれだけのインパクトを与えたのは、ひとえに、こういった先入観を打ち砕いたからに尽きる。信じられないことに、Javascriptって便利なのだ。実に見事な枯れた技術の水平思考である。 Ajaxという言葉が帰納され、ライブラリがぼこぼこと発表される。ネイティブオブジェクトの拡張と、クロスブラウザのための供物ラッパー集合体たるprototype.jsを筆頭に、様々なものが世に出、様々なアプリケーションがより手軽に実装できるようになった。 script.aculo.usやLightBoxやmoo.fxといっ
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」:phpspot開発日誌
BlueShoes: JavaScript Collection Get all the above components in one package. There is an example that uses most of the components.忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」。 既に紹介したと思っていたJavaScriptライブラリであるBlueShoesの紹介。 ご存知の方も多いと思いますが、知らない人も多いようですね。 ライブラリ、というより、リッチなコンポーネント集といったイメージで、次のような様々なコントロールが使えます。 WYSIWYGエディタ Excel風スプレッドシート ツリービュー スライダーコントロール 他にも下記の様々なリッチコンポーネントが使えます。 入力系コンポーネ
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
form の内容がデフォルト値から変わったら色を変える JavaScript コード - swk's log
* form の内容がデフォルト値から変わったら色を変える JavaScript コード [mform] 103 users これが便利だといえる状況はだいぶ限られてはいるのだけど．文字を入力したり，チェックボックスを押したりしてデフォルトの状態から変化すると，そこの色を変えるような JavaScript のコードを書いてみた． といってもわかりにくいと思うのでまずデモ: http://www.kagami.org/mform/mform_demo.html 適用したいページで，こんな JavaScript コードをロードします． (function(){ var color_modified = '#ffff88'; var reset_when_reloaded = 1; init(); function init() { var fs = document.forms; for (v
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20の優れたAjax効果*ホームページを作る人のネタ帳