フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
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機能というのは、次の画像のようにカーソルを合わせると画
loupe.js (photorealistic loupe effect for images)
loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
あらゆるページに拡大鏡を追加できる『Loupe.js』 | SIMPLE*SIMPLE
これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。 ↑ こんな感じに拡大鏡を設置可能。 画像と簡単なスクリプトをインストールすればOKなようです。 追加するコードは以下のとおり。 まずはページのヘッド部分に以下を追加。 <script type="text/javascript" src="loupe.js"></script> そして拡大鏡を追加したい画像にonLoadで以下を追加。 <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."> </div> 細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。 ダウンロードや詳しい使い方は以下をご覧ください。 » Loupe.js
画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」:phpspot開発日誌
FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpl... 次の記事 ≫：16x16ピクセルの芸術的favicon集 Instant.js Instant.js 1.0 allows you to add an instant picture effect (including tilt) to images on your webpages. 画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」 次のように、画像をポラロイド風にすることが出来ます。使い方も簡単で、画像の class 属性に定められたclass名を付けるだけ。 使い方は、まず、<script type="text/javascript" src="instant.js"></script> でinstant.js を読み込んで、 画像にcl
NYOKIGLITTER - Tab Styled Accordion
The First Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursu
画像カーソル位置をズームインできるライブラリ「tjpzoom.js」:phpspot開発日誌
valid.tjp.hu - tjpzoom.js 2.0 - JavaScript / CSS / DOM image magnifier As you may have realized, this is a tool that brings images closer. This is the new version of my script, tjpzoom. 画像カーソル位置をズームインできるライブラリ「tjpzoom.js」。 次のように、カーソル位置の画像をズームできます。 知っておけば、ウォーリーを探せ風の簡単なゲームを作ったり、サイトのキャンペーンとしての面白い１要素として使えそう。 設置方法は簡単で、まず、次のようにスクリプトを読み込みます。 <script type="text/javascript" src="http://valid.tjp.hu/zoom2/tj
【ハウツー】ゼロからはじめるslideViewer - 画像をスライド表示できるjQueryプラグイン (1) slideViewerとは? | パソコン | マイコミジャーナル
slideViewerは、Ajaxライブラリ「jQuery」のプラグインとして機能する画像スライドライブラリです。 slideViewerはサムネール画像が不要で、表示する画像の番号が自動生成されます。枚数がやや多い画像を表示するような場合に便利です。 本稿で紹介するslideViewerサンプルの1つ。画像の下にある番号をクリックすると画像がスライドして表示されます slideViewerは<ul><li>タグに表示する画像を列記するだけですので非常に手軽に使えます。その際に、<ul><li>タグにはID名やクラス名を新たに割り当てることもしませんので、既存の(X)HTMLタグ構成のまま利用できるのも利点の1つです。また、slideViewerではページ内にある複数の領域をスライド表示できます。 関連ファイルの入手 slideViewerは、jQueryなどを含めた全てのファイルを一括取
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」:phpspot開発日誌
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」 2007年03月26日- google-code-prettify - Google Code A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」。 具体的な対応言語は、Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl のよ
JavaScriptを使ってページにマウスジェスチャ機能を実装する:phpspot開発日誌
YUI: Mouse Gestures JavaScriptを使ってページにマウスジェスチャ機能を実装するサンプルが公開されています。 基本ライブラリにはYahoo UI Libraryを使用しています。 画面上の灰色部分を左クリックしながらマウスジェスチャを行うことでアクションを起こすサンプルになっています。 コードは次のようになっています。 最初に、マウスの向きと関数名を関連付けた連想配列を定義して、YAHOO.widget.Gestures.init に渡しています。 後は関連付けた関数の中身を定義するだけという実装の容易さとなっています。 <script type="text/javascript"> var config = { 'left': test1, 'right': test2, 'up': test3, 'down': test4, 'upleft': test5,
Dynamic Drive DHTML Scripts- Bullet Image Link script
A premium domain name exclusively for sale on the BrandBucket network. Dynamic Drive: A vibrant, forceful name that conveys motion and innovation, suggesting cutting-edge technology and forward-thinking solutions. Possible uses: A mobile app for car diagnostics. A tech platform for logistics. An adaptive learning software. Full ownership of domain dynamicdrive.com. Logo design source files and rig
ブロックのスクロール実装を便利にするJavaScriptライブラリ「jsScrolling」:phpspot開発日誌
リアルタイムにファイルをアップロード可能なExtベースJavaScriptライブ... 次の記事 ≫：PhotoShopからFlickrに直接画像をアップできるプラグイン「FlickrShop」 jsScrolling Also check out a new version of this script. It's faster and has prettier code, but you can't hack it as much. ブロックのスクロール実装を便利にするJavaScriptライブラリ「jsScrolling」。 画像で実装したスクロールバーをブロック要素に付けた例 右側にプレーンな分かりやすいスクロールバーを付けてみた例 実装は、必要なライブラリを読み込んだ後、次のようなコードですごく簡単に実装できます。 scroller = new jsScroller(docum
classに値を指定するだけでクリックイベントを付与できる「behavior.js」:phpspot開発日誌
duck_typer - Automating JS behavior registration I created a behaviors javascript class to handle all my (prototype) Event observe registrations. Annotating DOM elements with the metadata needed to register itself automatically, which would save you from having to call Behavior.register(..). classに値を指定するだけでクリックイベントを付与できる「behavior.js」。 次のようにタグを書いておくとします。 <a class="bvr-observe-click-xhrTheFunction"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
moo.fx
クールなUIを実現可能なAjaxフレームワーク「vegUI」:phpspot開発日誌
タブＵＩ実装のためのライブラリいろいろ:phpspot開発日誌