NYOKIGLITTER - Tab Styled Accordion accordion flavors Javascriptライブラリmoo.fxを使ったクールなインタフェース集。 グリグリ面白い動きをするので、サイトの部品として利用することでクールなサイトが作れそう。 その１ その２ その３ CSSデザインなのでデザインを変えて利用することも簡単です。
Javascriptライブラリmoo.fxを使ったクールなインタフェース集:phpspot開発日誌
NYOKIGLITTER - Tab Styled Accordion accordion flavors Javascriptライブラリmoo.fxを使ったクールなインタフェース集。 グリグリ面白い動きをするので、サイトの部品として利用することでクールなサイトが作れそう。 その１ その２ その３ CSSデザインなのでデザインを変えて利用することも簡単です。
JavaScriptオンリーで動く高速サーチエンジン＆タグクラウド:phpspot開発日誌
Tipue JS Tipue JS is an Open Source JavaScript site search engine. It works with any browser that supports JavaScript and at least partially supports the W3C DOM Level 1. JavaScriptの高速サーチエンジン、Tipue JS。 JavaScriptのみで動作するのでサーバーサイドでの検索処理は不要。 但し、tip_data.js というファイルでデータを持っておき、ブラウザに読ませる必要があります。 現在の所、日本語は通らないようですが、なかなか面白いプログラムですね。 図） Tipueによる検索結果画面 もう一つ。 同じサイトで配布されているCloud JSが面白いです。 Cloud JS Cloud JS use
Dojoライブラリを使ったオートコンプリート付きComboBox:phpspot開発日誌
Dojo ComboBox Test Page - Kenneth Ko Based on Dojo toolkit version 0.3.0, this is the new and improved Dojo ComboBox. The latest official Dojo combo can be found here. The main problem I see with that control is that it is NOT a true ComboBox. It is an AutoCompleter. A ComboBox should really exhibit these behaviours: Dojoライブラリを使ったオートコンプリート付きComboBox。 当然、純粋なコンボボックスではないですが、標準でこういったウィジェットはないので、場合によって
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
LightBox.jsにスライドショー機能を追加するSlidebox:phpspot開発日誌
Slidebox 0.4.1 Slidebox is a script used to make (multiple) slideshows on the current page. LightBox.jsにスライドショー機能を追加するSlideboxの紹介。 LightBoxのポップアップウィンドウに Back/Next ボタンが付き、スライドショー風にするためのライブラリです。 ちょっと分かりにくいんですが次の画像のように、新しいウィンドウの下両端にBack/Nextが付きます。 関連エントリ： クールなスライドショー作成用Javascriptライブラリ LightBox関連ライブラリのエントリ： LightBoxライクに同一ページ内の要素をポップアップするライブラリ 同一ページ内でポップアップウィンドウを開くJavascriptライブラリ Lightbox JSを拡張したLightb
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
LightBox風エフェクトライブラリのiBox:phpspot開発日誌
iBox / iBegin Blog (powered by evoBlog) またまたLightBox風エフェクトライブラリのiBox。LightBox風というよりかはThickBox に似ています。 他のライブラリと比べ、次のようなメリットがあるそうです。 1. サイズが小さく軽い 2. 画像、指定div要素、外部HTMLへのリンク対応 3. JavaScriptがOFFユーザにも対応 4. 依存ライブラリなし(prototype.js, moo.fx, jQuery 不使用) デモはこちら いろいろありますが、実際に使ってみて自分にベストフィットなものを使うのがいいんでしょうね。 MITライセンス。 関連エントリ： 画像やページをLightBox風に表示できるThickbox LightBox.jsにスライドショー機能を追加するSlidebox 同一ページ内でポップアップウィンドウを
LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox:phpspot開発日誌
Ryan J Lowe’s Dev Blog Blog Archive LITBox LITBox 2.0 has just been released. This version of LITBox is basically a few modifications of Thickbox made into a Prototype class based off of the Scriptaculous. LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox。 LightBox2同様、prototype.jsとscriptaculous.jsをベースにクラスベースでコーディングされていて、使い方は簡単です。 必要なスクリプト/CSSを読み込んだ後、次のようにonclickイベントでnewするだけです。 <input type="button" onclick="new L
LightBoxライクに同一ページ内の要素をポップアップするライブラリ:phpspot開発日誌
Leightbox I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. 同一画面内でポップアップウィンドウを開くGreyBox というのを先日紹介しました。 GreyBoxはポップアップ内容をJavascriptとIFRAMEを使って動的にページにロードしていましたが、 LeightBoxではページ内HTMLに記述されている特定のdiv要素をLightBox風にポッ
グレーアウト表示ライブラリ: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
GIGAZINE - マウスホイールの回転イベントをJavaScriptで検知する
実際の例としては「Google マップ」がまさにそうです。マウスのホイール部分を回転させると、地図を拡大縮小できます。 これと同じ仕組みを実装するにはどうすればいいの？というお話。 Mouse wheel programming in JavaScript http://adomas.org/javascript-mouse-wheel/ テストページはこちら、マウスホイールを回転させると表示が変わる http://adomas.org/javascript-mouse-wheel/test.html ほかにもこんなことができます。 JavaScript++かも日記: マウスホイールで拡大縮小 インフォシーク ホームページ作成「マウスホイールで画像を拡大縮小する方法」 せつないぶろぐ : JavaScriptによるマウスホイールのイベント処理 暴満館 >> OperaのJavaScript
リンクサムネイルの作り方 - GIGAZINE
外部サイトへのリンク文字列の上にマウスが来ると、自動的にリンク先のページをサムネイルで表示するという面白いスクリプトです。 例と設置方法は以下から。 例としてはこんな感じです。 http://lab.arc90.com/tools/linkthumb/ コードのダウンロードと使い方などは以下の通り。 arc90 lab : tools : Link Thumbnail http://lab.arc90.com/2006/07/link_thumbnail.php 互換性はInternet Explorer 6.0以上、Mozilla Firefox 1.5以上、Apple Safari 2.0、Opera Version 8.51以上であるそうです。 ちゃんと外部サイトのみ判別し、自サイト内ではいちいちサムネイルを表示しないようにできます。
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」
GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
GIGAZINE - クリックするだけで編集可能な「Easy AJAX Inline Text Edit」
GoogleCalendarもそうでしたが、クリックするだけで編集可能になり、そのまま別のところをクリックすれば保存完了というAJAX。 いちいち「編集」とか「保存」とかそういうボタンを押さずに済むのでラクチン。 例はこちら。 Example page: instant edit AJAX-style http://www.yvoschaap.com/instantedit/ ソースコードのダウンロードや解説は以下を参照。 YvoSchaap.com ほかにもダブルクリックでインラインディタとして「FCK Editor」を呼び出す例。 Inline Text Edit with FCK Editor
The work of Scott Schiller
Scott Schiller: Creative, Technical and Professional Portfolio This site showcases the work of Scott Schiller. I am a Web Developer currently located in Calgary, AB. A bit of philosophy My passion for the Web is demonstrated by the work I do; rather than try to explain it all, I prefer to let my work speak for itself. This site exists for that reason - to showcase some of the things I have done in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
昇順降順でソート可能な表をJavaScriptで作る
GIGAZINE - SunがAJAXのリソースを集めたサイトを開設
If Only We Knew Google's Secret Ranking Algo