mtkopone/zelect GitHub selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 既存のselectは初期のブラウザで実装されたもので、大概古いインタフェースなわけですが、標準ではあのままです。 これを簡単にjQueryプラグインで、インクリメンタル検索対応にして入力を楽にできます。 選択肢が多すぎる場合なんかに便利 関連エントリ selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスを超カッコよくするjQueryプラグイン「Chosen」

TOC | jQuery Table of Contents Plugin 目次のナビゲーションを自動生成してくれるjQueryプラグイン「TOC」 H1等のヘッドラインが綺麗に定義されているサイトであれば次のような目次のサイドバーが自動で付けられます スクロールすればカレントの目次にカーソルが移動するあたりもクール 自分で作っていたらコンテンツの追加毎にいちいちナビゲーションもいじらなくてはいけないので便利ですね 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」

PNGGauntlet - PNG Compression Software | BenHollis.net PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」。 いくらブロードバンドだからといって転送量のかかるサーバなどでは出来るだけ転送量を抑えたほうがいいですし、その方がページスピードも早くなる場合もありそうです。 次のようなインタフェースを持ち、ドラッグ＆ドロップで簡単に圧縮できます。 関連エントリ ドラッグ＆ドロップでCSSを瞬時に圧縮できるブラウザツール「excssive.com」

NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン

15 Best Sites To Download Free Web Templates | ZoomZum フリーのWEBサイトテンプレートをダウンロードできる１５サイト フリーのテンプレートのまとめエントリなんかが色々とあったりしますが、フリーテンプレートのまとめサイト１５サイトのまとめになっています。 これでもうイメージ通りのテンプレートは手に入ってしまうのかもしれません。 関連エントリ フリーのWEBデザインテンプレート２５ WEB管理画面のテンプレート２２ フリーの高品質WEBデザインレイアウトテンプレートPSD７０

Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」

Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript

CircleList jQuery Plugin Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」。 ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ＆ドロップで他の円リストに移動することが出来ます。 更に、範囲指定で複数アイテムの選択なんかもできるようになっています。 実装は必要プラグインを読み込んだ後、次のように初期化するだけです。 <ul id='list'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>4</li> </ul> <script> $('#list').circlelist(); </script> ジェネレーターもあって、その場で動きを作れてコードも出力する機能もあったりします。 ちょっとしたサプライズ効果に使えそうですね。 関連

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし

Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種

サーバを立てているとログに怪しいアクセスが出るのは日常的なことですが、とあるサーバにphpMyAdminクローラーの恐怖のログが残っていたのでシェアします。 Apacheのログを見ていたら下記のようなログを見つけました。 /path/to/www/ は apache のDocumentRoot です。 phpMyAdminを使っている方で、レンタルサーバ等を使っている場合、public_html 以下等に設置しているかと思いますが、クローラーは片っ端から存在しそうなパスを総当りしてきます。 URLが存在すれば200ステータスで検知してそこにphpMyAdminがあるみたいなことが分かってしまいます。(phpMyAdminだけ狙っているようでもなさそうですが) 仮に、MySQLのパスワードを設定していない人がいた場合はrootでDBを消されたり、データを盗まれたりする危険性があったのでシェア

Bloggerz Bible: Original Blackbeard template (psd) シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 次のようにシンプルで汎用に使えそうなPSDデータが配布されています。 ブログとしてのレイアウトを前提として作られているようですが普通のサイトにもいけそうですね。 関連エントリ 立体的にクールにデザインされたWEBレイアウトのPSD ハイクオリティなWEBサイトレイアウト等のPhotoshopテンプレート色々 FacebookのGUIレイアウトのPhotoshopテンプレートファイル そのまま使えるWEBレイアウトのPhotoshopテンプレート40

ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」が凄いです。 最初アプリケーションかなと思ったのですが、全てブラウザ上で動作するので、学習用やちょっとした動作確認に使えます。 ブラウザ上でコーディング 次のように、IDEアプリケーションのようなUIで、C#やPHP5.1を、ブラウザの上で動かすことが出来ます。 プロジェクト作成 New → Project を選ぶと、C#やJavaScript、PHPの色々なプロジェクトが作れることがわかります。 PHPのHellow World のソースが入ったコードがエディタに表示されました。このソースをいじって直接動かせます。 コードを動作テスト 次のようなコードを書いて「Run」ボタンを押してみます。 以下、出力例です。ちゃんと動きました。 c2d6c077f524683db2f00c0e975766810 1 2 3 4 5 6

WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」 2009年08月17日- UrlParams :: Firefox Add-ons WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」。 もうご存知の方も多いかもしれませんが、知らなかったのでご紹介。 Yahoo! などの検索エンジンにアクセスすると、「http://search.yahoo.co.jp/search?p=test&ei=UTF-8&fr=moz2」のように色々と引数がつきますが、これを分かりやすく解析してくれます。 さらに解析するだけでなく、独自パラメータを定義して送信するといったことも可能です。 上記GETによるアクセスで、以下のようにパラメータを分かりやすく表示してくれます。 POSTの場合は別のペインにパラメータが表示さ

20 Ready to Use Auto Completion Scripts ?|?Dzine Blog JavaScriptを使ったAutoCompleteの仕組み色々がまとまっていたので一部ご紹介。 当サイトでも過去に紹介したものが含まれていますが、こうしたライブラリは実際に使ってみると自分の理想に違ったものになっていたりするのですが、これだけ種類があれば、自分の理想に近いものが見つかりそうです。 Autocomplete AJAX Select Drowdown with ID jQuery Tag Suggest Google Suggest Style Filter with the AutoComplete Control 全部見る JavaScriptist ではベタに、prototype.js+script.aculo.us を使っています。 2006年にサイトを作っても

Web Design Toolbox: 130 New Tools to Make You a Better and Faster Designer ウェブデザイン用便利ツール集 ブロックレイアウトなんかをウェブ上から簡単に作れるツールなんかをまとめたエントリがあがってました。 YAML Builder - 複雑なカラムレイアウトもGUIで簡単作成 Sky CSS Tool - CSSオーサリングツール The Box Office - イメージにあわせて以下のようにテキストの位置を指定したページをジェネレート CSSTXT - CSSでのテキスト整形をプレビュー付で確認しながら生成できる izzyMenu.com - メニューを簡単作成 pForm  - フォームを簡単作成 Roxer 　- ドラッグ＆ドロップでページを簡単作成 Wirenode　- モバイルサイト作成 doodleki