JavaScriptでスターレーティングを行うライブラリやサービス色々:phpspot開発日誌
JavaScriptでスターレーティングを行うライブラリやサービス色々。 スターレーティングとは最近ではお馴染みの、５つ表示された星をクリックするだけで投票がAjaxで行えるものです。 ライブラリ jQuery Star Rating Super Interface! - jQueryを使ったライブラリ Unobtrusive AJAX Star Rating Bar - 以前、当ブログで紹介したAjax+PHP+MySQLな投票ウィジェット。 prototype.jsを使ったものも欲しいところでしょうか。 サービス サイトにレーティングウィジェットを簡単設置「Star It!」 - ページに貼り付けられるウィジェットです 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ ブラウザ上で動作するOSのまとめ JavaScriptを使った各種WYSIWYGライブラ
JavaScriptでMP3を扱えるライブラリ「SoundManager 2」:phpspot開発日誌
SoundManager 2: Javascript Sound For The Web - Schillmania.com A Javascript API was needed to achieve the kind of client-side flexibility I wanted, and access to sound was possible using Flash 8's ExternalInterface capabilities through a hidden movie. JavaScriptでMP3を扱えるライブラリ「SoundManager 2」。 次のように、JavaScriptで音声を再生したいな、と思ったことはないでしょうか。 soundManager.play('helloWorld','/hello-world.mp3'); 今回紹介するライブラリを
クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」:phpspot開発日誌
Ajax Auto Suggest v.2 : CSS . XHTML . Javascript . DOM : Brand Spanking New The new and improved version of my JavaScript/Ajax auto suggest script. More features, less bugs. Demo and documentation here.クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」。 入力ボックス上でaを入力したところ。 JSON形式や補完時のコールバック関数、フェードエフェクト、ＣＳＳデザインなど基本的な機能は盛り込まれています。 ちょっと変わった補完ボックスを作りたい場合に使えそう。
JavaScriptでMacOS XのDock機能を実現する:phpspot開発日誌
Alexei@Nitobi Blog Archive Development Diary: Taming the Fisheye I thought it might be a good idea to document the development of one of our components from a user-interface perspective. We’re in the process of developing a host of new components now, which should be ready for release early this spring. One of these is a Fisheye Menu. JavaScriptでMacOS XのDock機能を実現する。 Dock機能というのは、次の画像のようにカーソルを合わせると画
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、
ブラウザ上で動作するJavaScript製のMSペイント「CanvasPaint」:phpspot開発日誌
CanvasPaint ブラウザ上で動作するJavaScript製のMSペイント「CanvasPaint」 Windowsユーザなら誰もが使ったことがあるあのペイントがWebブラウザ上で動作しています。 IE6では動作しませんが、Firefox1.5以降で動作を確認しました。 ＵＩやメニューもまったくペイントと同じのようです(一部機能拡張されている)。 これはすごいですね。 関連エントリ Ajaxを活用したブラウザ上でWYSIWYG編集できるCMS「Authenteo」 ブラウザ上で動作する端末、WebTTY オンラインでBasicやC++、JavaScriptの開発＆実行が出来る「codeide」 AJAXを使ったオンラインフォトエディタ「pixer.us」
ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」:phpspot開発日誌
ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」 2006年11月29日- p0t: pprompt.js jsでデフォルトのalert, confirm, promptを単に置き換えるような単純なライブラリないかなと思って探してました。 ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」。 JavaScriptベースのプロンプトダイアログって何か使いにくい感じがしていたのですが、このライブラリがあればその不満も払拭できそうです。 実装も簡単で、必要なCSSとJavaScriptを読み込んで、次のようにアンカーオブジェクトのonclickイベントから呼び出すだけです。 <ul> <li><a href="#" onclick="PPrompt.alert('This i
リサイズ可能なブロック要素をページに作る為のJavaScriptコンポーネント:phpspot開発日誌
Jack Slocum's Blog Resizable Reloaded - A reusable component for resizing elements This is a basic as you get. To resize the box, position your mouse anywhere near the bottom, right or bottom right edge of the box. This example uses the default "floating" handles. リサイズ可能なブロック要素をページに作る為のJavaScript コンポーネント。 次のように、ブロック要素にリサイズハンドルを付けることができ、画像をその場でリサイズできます。 小さい画像を置いておいて、利用者が自由にリサイズするようなＵＩが実現出来ます。 Yahoo
文字をブルブルさせるJavaScriptライブラリ「ブルブル３」:phpspot開発日誌
oitake blog | ブルブル 3 「ブルブル 2」のバグ修正版、および横揺れ追加版の「ブルブル 3」です。 文字をぶるぶるさせるJavaScriptライブラリ「ブルブル３」。 アンカーをマウスアウト(onmouseout)ると文字がブルブルします。 使い方は簡単で、配布されているファイルを保存してHTMLの最後あたりで読み込むだけ。 window.onloadイベントに仕込んでおけば、最初に読み込んで置くだけで使えそうですね。 window.onload = function () { // ここにブルブルのソースコード } UI的に使いやすくなるといったライブラリではありませんが、訪問者を驚かせることが出来る面白いライブラリですね。
JavaScriptアニメーションフレームワークライブラリ「Run」:phpspot開発日誌
Run / Universal JavaScript Animation Framework / Start Run is the easy and basic way to animate web content! You're right, this is YAAF - yet another animation framework. JavaScriptアニメーションフレームワークライブラリ「Run」。 script.aculo.usのようなエフェクト風アニメーション機能を実現したりすることが出来ます。 太陽の周りを地球が回るデモのような、Script.aculo.usでは実現が少し面倒だったものも割と簡単に実現出来そうです。 script.aculo.us 同様、prototype.jsに依存しています。 ドキュメントも充実 関連エントリ prototype.jsベースの画像切抜き
JavaScriptパーティクルエンジンライブラリ:phpspot開発日誌
Jason Harwig JavaScriptパーティクルエンジンライブラリの紹介。 次のように、Flashムービーのような粒子のアニメーションをJavaScriptで実現しています。(IEだと動きませんでした) JavaScriptで実現というところが興味をそそられる部分ですね。 ソースコードがダウンロードできるので、興味のある人は覗いてみましょう。 関連エントリ グラフ描画機能が追加されたJavaScriptライブラリ「Dojo 0.4」 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 JavaScriptでOSやブラウザの検出が出来る「BrowserDetect.js」
javascriptなどを使い、 フォームに文字を入れただけで チェックが出るようなサンプルを探しています。…
javascriptなどを使い、 フォームに文字を入れただけで チェックが出るようなサンプルを探しています。 http://www.rememberthemilk.com/signup/ 無料で使えるライブラリのような形で 公開しているサイトがあったら よろしくお願いいたします。
ページをマトリックス風に表示するJavascript | S i M P L E * S i M P L E
これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。（実際の動作はこちら） 実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
画像の拡大プレビューを超クールに行える「Highslide JS」:phpspot開発日誌
Highslide JS - JavaScript thumbnail viewer Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: 画像の拡大プレビューを超クールに行える「Highslide JS」。 サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。 設置は次のように行います。 スクリプトインクルード <script type="text/javascript" src="highslide/highslide.js"></script>
グレーアウト表示ライブラリ:glayer.js:phpspot開発日誌
glayer.js - グレーアウト表示ライブラリ Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(grey＋layerで、glayer.js) グレーアウト表示ライブラリ:glayer.js。 LightBoxのように、画面全体を簡単にグレーアウトすることが出来ます。 使い方は、必要なJavaScriptとCSSを読み込ませて、divを定義した後、onclickイベントハンドラなどに、 Layer.show( divのid要素 ) Layer.hide( divのid要素 ) を仕込むだけで簡単に使えて便利です。 このライブラリを使って、ポップアップメッセージをウィンドウ内で表示するサンプルを作ってみました。 <html> <!--●必要ライブラリの読み込み--> <script type="te
JavaScriptで動くテンプレートエンジン:JSmarty:phpspot開発日誌
Thousand Years - JSmartyとは？ JSmartyはJavaScriptで動くテンプレートエンジンです。PHPにSmartyっていうテンプレートエンジンがあります。それのぶっちゃけいってクローン(完全ではないですが…)になります。なので利用するメソッドやプロパティととかもそんままでSmartyのテンプレートがそんまま利用できます(たぶん)あと当然ながらプラグインとかも対応しています。 JavaScriptで動くテンプレートエンジン、JSmarty。 次のような使い方で、Smartyとほぼ同様に動作するそうです。 ■テンプレート'foo.tpl' {$foo} ■コード var render = new JSmarty; render.assign('foo','Hello World!!'); render.display('foo.tpl'); ■結果 Hello W
GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
オーバーレイ効果を作り出す「Lightbox」というスクリプトの超軽量版です。 実際の例やダウンロードは以下から。 Litebox- Same great taste, less calories http://www.doknowevil.net/litebox/ 上記ページの画像をクリックするとどういう効果なのかがよく分かります。 Liteboxで使われているのがこの「moo.fx」という軽量なJavaScriptエフェクトライブラリ。 moo.fx - the next small thing http://moofx.mad4milk.net/ また、類似品としてはこんなのもあります。 GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
JavaScriptでサクサク動くイメージギャラリー作成用ライブラリ:phpspot開発日誌
タスクボタンのマウスオーバーでタスクの縮小画像を表示「Visual Task Ti... 次の記事 ≫：Ajax+PHP+Smarty+script.aculo.usなデータグリッドコンポーネント Gallery scripts - A library of DHTML and AJAX scripts - DHTMLgoodies.com Another Image gallery script. Thumnbails are listed inside a box at the left. You can click on the thumbnails to bring up a larger version in a right side panel. You can move between strip of thumbnails by clicking on left and r
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーでリンク先サムネイル表示:phpspot開発日誌