画像にマスクを施せるJavaScriptライブラリ「Edge.js」と画像エフェクトライブラリ集:phpspot開発日誌
画像にマスクを施せるJavaScriptライブラリ「Edge.js」と画像エフェクトライブラリ集 2007年08月06日- Edge.js (with basic IE 6/7 support) Edge.js 1.1 allows you to add individual masks (inc. inbuilt mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean. 画像にマスクを施せるJavaScriptライブラリ「Edge.js」。 Edge.js を使えば次のように、画像にマスクを与えることが可能です。 次のように、JavaScript でマスク画像の配列を定義して、必要ライブラリを読み込んだ後、img タグに適切なクラスを付与する感じになります。 <!--
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」:phpspot開発日誌
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
スケジュールの進行状況アプリに使えそうなAjax*ホームページを作る人のネタ帳
プログラムの進行状況や、仕事の進行状況など、現在のタスク進行状況を手軽に表示するためのスクリプトです。 あまり使う場面がなさそうですが、なかなか良い動きをしていたのでご紹介だけでもしておきます。 ダウンロード デモページとダウンロードページは同じです。 なお、配布元はwebappers.comさんです。 私達がウェブサイトを作成するとき、たまに進行棒を必要とする場合がある。ただし、Flashを使用しないで、Ajaxによるパーセント棒を作成した。 興味のある方はお試しあれ。 参考までに上記サイトで書かれているヘルプ display(elementId, percentage, colorCode) Display the Percentage Bar int colorCode: 1 = Green int colorCode: 2 = Yellow int colorCode: 3 = O
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
伸縮するアコーディオン風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 伸び縮みするので少ないスペースで実装することが出来、なめら
Flash と Ajax を使った使いやすいファイルアップロードライブラリ「 FancyUpload 」
digitarald FancyUpload Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars. FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpload」。 FancyUpload を使えば、インタラクティブで複数ファイルのアップロードも簡単な、次のようなアップローダーが作れます。 「Browse Files」ボタンでファイルを選ぶと、右側のペインに アップロード予定のファイルとして追加されます。 「Start Upload」ボタンによってファイルのアップロードを開始します。 アップロードの
mooToolsを使ったクールなウィンドウ作成ライブラリ「Windoo」:phpspot開発日誌
Windoo usage template Windoo demonstration and template usage pagemooToolsを使ったクールなウィンドウ作成ライブラリ「Windoo」。 次のようなクールなブラウザ内ウィンドウを作成することが出来ます。 作成できるウィンドウは、閉じたり、リサイズしたり、最大化などのウィンドウとしての機能は備えているようです。 コーディングもWindoo BuilderというWEBツールを使えば実装用のJavaScriptコードも簡単に作成することが出来ます。 ライブラリを配布する際にこういった仕組みがあるとより便利に使えますね。 カスタマイズできる部分が多いので色んな場面で使えそうです。
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」:phpspot開発日誌
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」 2007年06月20日- Ext.Accordion Widget Example by Saki This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page. JavaScriptライブラリExtを使った伸縮する
ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」:phpspot開発日誌
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
JavaScript/Ajax＆CSSなツールチップライブラリ集:phpspot開発日誌
Kollermedia.at - The Website of the Freelancer Koller Jgen List of 25 Javascript/Ajax & CSS Tooltip Scripts List of 25 Javascript/Ajax and CSS Tooltips JavaScript/Ajax＆CSSなツールチップライブラリ集。 次のようにカーソルを合わせたときに説明を出すようなライブラリが沢山紹介。 Ajax Tooltip by dhtmlgoodies.com. [Example Page.] Ajax-Powered Help Balloons/Tooltips. Tool Tip Script by Cody Lindley. [Example Page.] jTip - a jQuery Tool Tip by Cody Lindley.
フォントサイズの変更をJavaScriptによって検地する方法:phpspot開発日誌
A List Apart: Articles: Text-Resize Detection Furthermore, you won’t want to serve bite-sized content to visitors with large resolutions just to cater to visitors with smaller resolutions?if you can avoid it. フォントサイズの変更をJavaScriptによって検地する方法。 ブラウザの文字サイズを変更した際に、JavaScript によってそのイベントを検出するライブラリ＆サンプルが公開されていました。 これを活用することで、次のように、フォントサイズを変更した際に特定のイベントを発生させることが可能になります。 コードは次のような感じ。 <!DOCTYPE HTML PUBLIC "
虫眼鏡を使って画像をズームする感じのUIライブラリ「TJPzoom」:phpspot開発日誌
valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier As you may have realized, this is an image magnifier. It's a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :).虫眼鏡を使って画像をズームする感じのUIライブラリ「TJPzoom」。 次のように、マウスの位置に従ってレンズが動作し、レンズ部分が拡大されます。 画像上をドラッグ＆ドロップでレンズのサイズを変えたり、ズーム比を変更したりすることが出来ます。 （左にドラッグでレンズ縮小、右にドラッグでレンズ拡大、上にドラッグでズーム比拡大、下にドラッグでズーム比縮小） 小さい画像と大き
超クール画像ギャラリーが作れるJavaScriptライブラリ:phpspot開発日誌
Galeria 超クール画像ギャラリーが作れるJavaScriptライブラリ。 次のような画像ギャラリーのサンプルライブラリが公開されています。 カーソルを合わせると画像が浮き上がり、クリックで拡大します。 Flashを使ったようなUIを実現でき、覚えておけばふとしたところで使える筈。
Prototype.jsとScript.aculo.usを圧縮して32.5KBにした「ProtoPacked v2.13」:phpspot開発日誌
Prototype.jsとScript.aculo.usを圧縮して32.5KBにした「ProtoPacked v2.13」 2007年05月25日- Protoculous : Prototype & Scriptaculous lightweight ! Protoculous is a javascript file which contains Prototype and Scriptaculous together compressed. Prototype.jsとScript.aculo.usを圧縮して32.5KBにした「ProtoPacked v2.13」。 Prototype1.5.1とScript.aculo.us1.7.1_beta をパックにしたパッケージ。 ノーマルのPrototype1.5.1 だけでも 93 KB もあるので、かなりのダイエットに成功しているようで
画像を角丸にしたり影を付けたりできる「Corner.js」
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
Lightbox JS
Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you fr
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」:phpspot開発日誌
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」 2007年02月16日- DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage JavaScriptで線や円
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/accordion_js
タブＵＩ実装のためのライブラリいろいろ:phpspot開発日誌