script.aculo.usを使ったドラッグ＆ドロップなショッピングサイトのサンプル:phpspot開発日誌CyberDummy - script.aculo.us php Cart Demo Drag products to the cart to fill it script.aculo.usを使ったドラッグ＆ドロップなショッピングサイトのサンプル。 商品データをセッションに保持するように作られています。 ソースが公開されているので、興味のある方は覗いてみましょう。 phpソース
同一ページ内でポップアップウィンドウを開くJavascriptライブラリ:phpspot開発日誌
amix.dk : GreyBox - a pop up window that doesn't suck GreyBoxを使えば、同一ページ内で別のページをポップアップ表示することが可能です。 次のような感じでGoogleもLightbox.jsを使った時っぽく開けます。 右上のclose windowボタンでポップアップを閉じることが出来ます。 デモはこちら （Launch Google でGoogleが開きます） ページに組み込むのも簡単で、必要ファイルをインクルードした後、次の関数を呼び出すだけでOK。 GB_show(caption, url, height, width) 例: <a href="#" onclick="GB_show('Google', 'http://google.com', 470, 600)">Launch Google</a> 新しいウィンドウをtar
とても大きい画像を地図アプリ風にドラッグ＆ドロップして見る:phpspot開発日誌
GSV: Pan & Scan This is a draggable, zoomable satellite mosaic of Antarctica that Eric found. Please use an up-to-date GSVはJavascriptのライブラリと、画像分割のスクリプトセット。 リンク先を見て頂ければ分かりますが、このライブラリを使えばドラッグ＆ドロップで大きい画像を見ることが出来るようになるようです。 あらかじめ、Pythonによるスクリプトで画像をタイル状に分割する必要があるようですが、 大きい画像をプレゼンする場合、これを元にして作るとインパクトありそうです。
Javascriptで指定のHTML要素を動的に角丸デザインにする方法:phpspot開発日誌
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
高度な JavaScript 技集
JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib
Dr.GUI.NET
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Microsoft Learn. Spark possibility. Build skills that open doors. See all you can do with documentation, hands-on training, and certifications to help you get the most from Microsoft products. Learn by doing Gain the skills you can apply to everyday situ
Javascriptで動的にアンチエイリアスな角丸を設定する:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
クールなスライドショー作成用Javascriptライブラリ:phpspot開発日誌
mooShow 0.03 Beta . Javascript Slideshow based on moo.fx mooShow is a simple javascript/css slide show based on moo.fx the superlightweight javascript effects library, written with prototype.js. From Mad4milk, Rome. mooShowは、moo.fxライブラリを使った動くスライドショー作成用ライブラリ。 Flashを使ったみたく、かなりカッコいいスライドショーが作れるようです。 フォトアルバム用アプリなんかで、スライドショー機能を組み込む場合等に使えそうですね。 関連エントリ： Javascriptを多様したクールなWebアプリ:mOOflex
テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、１個１個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。
リンク位置を視覚的に表示するライブラリ:phpspot開発日誌
Link Indicator Link Indicator displays visually links within a page and links which have target attribute. Link Indicatorを使えば、 href="#name" のようにアンカーでリンクした先を視覚的に次のように表示できます。 クリックするとどこに飛ぶか、というのが予め分かるとちょっと安心できますね。 実装もHTMLとJavascriptのロジックは分離できるようなので、簡単でHTMLソースも見づらくならなくていいですね。
prototype.jsをベースにしたRSSリーダークラス:phpspot開発日誌
r.schuil - Ajax.RssReader The Ajax.RssReader class allows fetching and parsing RSS feeds in Javascript prototype.jsをベースにしたRSSリーダークラス。 次のようにして簡単に使える模様。 function myCallback( rss ) { alert(rss.channel.title); for(var n=0; n<rss.items.length; n++) { alert(rss.items[n].title); } } function errorHandler( rss ) { alert('An error has occured'); } new Ajax.RssReader( 'test.xml', { onSuccess: myCallback, on
オンラインでJavaScriptコードを簡単圧縮＆難読化:phpspot開発日誌
/packer/ A JavaScript Compressor/ObfuscatorオンラインでJavaScriptコードを簡単圧縮＆難読化できるツール。 下の入力ボックスにコードを入力して「Pack」ボタンを押すだけで上のＢＯＸに反映され、Copyで簡単に取得できます。 オンラインで手軽に使えるところがナイスですね。
ドラッグ＆ドロップで移動できるツリービューJavaScriptウィジェット:phpspot開発日誌
Folder tree with Drag and Drop capabilities You can download the entire script from this Zip file. ドラッグ＆ドロップで移動できるツリービューJavaScriptウィジェット。 Ajaxでデータを保存するような機構も実装されています。 次のようなオブジェクト指向スタイルで簡単に実装できるみたいです。 <script type="text/javascript"> treeObj = new JSDragDropTree(); treeObj.setTreeId('dhtmlgoodies_tree2'); treeObj.setMaximumDepth(5); treeObj.setMessageMaximumDepthReached('Maximum depth reached'); tre
難読化されたJavaScriptコードを元に戻す:phpspot開発日誌
JsDecorder Decode javascript obfuscated code ! 難読化されたJavaScriptコードを元に戻すJsDecorder。 JavaScriptはコードが見えてしまい、サイズも大きくなるので難読化＆圧縮されたソースは結構ありますが、このツールを使えばWEB上で読みやすくデコードできます。 ↓ オンラインですぐ使えるというので便利ですね。 この逆は、「オンラインでJavaScriptコードを簡単圧縮＆難読化」で紹介したサイトで行えます。
テーブルの列でソートするJavaScriptライブラリ:phpspot開発日誌
OrderByColumnデモ tableの列でソートするjavascriptです。 テーブルの列名をクリックして列順にソートするためのJavascriptライブラリの紹介。 MochiKit でも同様のことが出来ますが、他の不要なライブラリも含まれるのが面倒だという方に便利。 prototype.jsさえあれば、その他1つのファイルでシンプルに実装可能です。 更に実装方法も次のように簡単で第一引数にテーブルのidを指定するだけ。 new OrderByColumn("test",["string","number","number"]); これは便利ですね。
その場編集できるテキストBOX実装用PHP Javascriptサンプル:phpspot開発日誌
Ajax Edit In Place (EIP) Example その場編集できるテキストBOX実装用PHP+Javascriptサンプル Flickrなどであるあのその場編集できるテキストBOX、を実装するPHP+JavaScriptサンプル script.aculo.usを使って実装することも可能ですが、この機能限定なので余計な機能が要らない人には嬉しいかもしれません。 script.aculo.us同様、prototype.jsによるフレームワークを使っての実装です。
古いブラウザや低スペックな端末に対応したAjaxライブラリ:LoJAX:phpspot開発日誌
[brothercake] LoJAX LoJAX is a re-creation of the window.XMLHttpRequest object, designed for low-specification and legacy browsers古いブラウザや低スペックな端末に対応したAjaxライブラリ。 Prototype.jsなんかは、IEの場合、IE6のみサポートだったりします。 今回紹介するLoJAXライブラリは次のブラウザに対応しているようです。なんとPSPも。 Sony PSP (Version 2.00 or later) PSP (Version 2.00 or later) Opera 5, 6 and 7 (Versions 5.0 to 7.5 inclusive) Mac/IE5Mac/IE5 (Version 5.0 or later) Konque
Ajaxで吹き出し方式のテキストヒント作成ライブラリ:phpspot開発日誌
Ajax tooltip This is an Ajax tooltip script. When you roll your mouse over the "info" links in the table, ajax will show tooltip content from external files. Ajaxで吹き出し方式のテキストヒント作成ライブラリ。 使い方は、必要なCSSとJavaScriptをインクルードして次のようにアンカーのonmouseover/onmouseout に書くだけでよいみたいです。 <a href="#" onmouseover="ajax_showTooltip('読み込むページのURL',this);return false" onmouseout="ajax_hideTooltip()"> マウスオーバーすると「読み込むページのURL」で指定
吹き出し方式のツールチップテキスト作成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ページを開く
Ajax PHP Smarty script.aculo.usなデータグリッドコンポーネント:phpspot開発日誌