横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
横にスライドするアコーディオンJavaScript 横に伸縮するメニューです。 何かと使えそう。 詳細は以下に。 早速ダウンロード dev.portalZINE | jQuery - Horizontal Accordion 一番下にある ○で囲った部分からダウンロード。 本当はblade_sel.pngという画像がメニューのボタンに挿入されるはずなんですが、私のブラウザではなぜか表示されませんでした。 この動きは非常に素敵なので、一度はウェブサイトに導入してみたいものですね。 Jsファイルの呼び出し <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="lib/ifx.js"></script> <script type="text/javascri
[JS]クッキーを使用しないで、セッションデータを利用できるスクリプト
sessvars.jsは、ブラウザのクッキーを使用しないで、セッションデータを利用できるスクリプトです。 Session variables without cookies デモ sessvars.jsを使用することにより、クッキーをオフにしていたり、使用が禁止されている環境でもセッションデータを利用することができます。 ※スクリプトをオフの場合には利用できません。 格納できるデータの上限は、Opera9.5で2MB、IE7, Fx1.5/2, Safari3で10MBとなっています。 サイトに記載してある使用上の注意は、以下になります。 sessvars.jsは、JavaScriptのwindow.nameにデータを格納します。 これはクロスドメインのセキュリティ問題があるため、パスワードやクレジットカード番号などの重要な情報には利用しないでください。 しかし、ヘッダ情報でサーバーには送
文字を隠すように貼るシールを表現するJavaScript*ホームページを作る人のネタ帳
なんとも一風変わった遊び心。 その仕掛けは単純だけど、アイデア次第では面白い事が出来そうですね。 サンプルデモはこちら 使い方は以下に。 まずはダウンロードから ダウンロードするものは下記の3つのJsファイルです。 ダウンロードはこちら ダウンロードが終了してファイル名を見ると、妙な名前で保存されているので、今回は名前を変更して使います。 上記のファイル名より上部の名前をすべて消します。 その時、次のような下の部分だけを残し、消します。 下記のような呼び出しを付ける。 <script type='text/javascript' src='pack.js'>/* jquery core */</script> <script type='text/javascript' src='min.js'></script> <script type='text/javascript' src='j
MOONGIFT: » prototype.jsベースのカレンダー「protocalendar.js」:オープンソースを毎日紹介
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
MOONGIFT: � 進化するJavaScript「Ajile」:オープンソースを毎日紹介
JavaScriptの進化が止まらない。もし、JavaScriptの欠点を挙げるとすれば、外部のファイルがロードできない点にあったと思う。やはりこれができないと他の言語の比べると弱い印象になってしまう。 だが、それをもJavaScriptは克服していく。本当にすごい。 今回紹介するオープンソース・ソフトウェアはAjile、外部スクリプトファイルの読み込み等多数の機能を実装したJavaScriptライブラリだ。 JavaScriptはあまり得意ではないので、これはあまり自信がない。ただ、すごいという事だけはお伝えしたい。まず、外部ファイルの読み込み。これはLoad(ファイル名)にて実装される。 さらにNameSpace。汚染の被害軽減のためには必須だろう。次がIncludeとImport。Importはアスタリスクをサポートしているようだ。さらにImportAsというものもある。 実際の実装
進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」:phpspot開発日誌
進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」 2007年09月06日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a rewrite of the (unfortunately wrongly named) AJAX Progress / Percentage Bar by Webappers. 進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」。 プログレスバーがなめらかなアニメーション表示されるので、進捗状況が非常に分かりやすく表示できます。 デモページはこちら 利用にはprototype.js
MOONGIFT: » 必見！ソート/編集ができる表ライブラリ「TableKit」:オープンソースを毎日紹介
昨日紹介した「Nofunc Table Organize」は表に対して簡単にソート機能が付与できるすばらしいライブラリだ。しかし業務システムを構築していると、それ以外にも要望が出てきたりする。 良くあるのが、その場でデータを修正したいなどと言うものだ。もちろん、技術的に不可能な訳ではない。が、開発コストがかかり過ぎる。そこで使ってみたいのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはTableKit、テーブルのソートに加えデータ編集機能を備えたライブラリだ。 TableKitはNofunc Table Organize同様にライブラリを読み込むだけで既存のテーブルは殆どそのままで使えるソフトウェアだ。ヘッダ部にthead、データ部にtbodyそしてフッタ部にtfootを指定する。 ヘッダ部をクリックして昇順、降順によるソートはもちろん、データをその場で修正できるのが便利だ
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
MOONGIFT: » クールなWebベースポップアップウィンドウ「ModalBox」:オープンソースを毎日紹介
※ 画像は公式サイトデモより これはクール！ 思わず使い道を考えてしまった。Mac OSXではダイアログがウィンドウの上部から出てくる。あの表示が何となく好きという人も多いだろう。あれを実現するJavaScriptがこれだ。 今回紹介するオープンソース・ソフトウェアはModalBox、ウェブベースのポップアップ＆ウィザードだ。 簡単に言えば、ウィンドウの上から出てくるポップアップだ。表示していた画面はグレーアウトするので、そのダイアログだけに集中できる。Ajaxを使うことも、使わないこともできる。簡易的なものであれば使わずに手軽に利用できそうだ。 そして、ウィザード形式に操作を進めることもできる。例えば問い合わせフォームや、アンケート、友人へのメール等わざわざ画面を切り替えて操作するには及ばないようなものに使えそうだ。 表示のされ方がかなり格好よく、使い道も多そうだ。prototype.j
UK STUDIO - 初心者向けJavaScript勉強会の資料公開と補足
とある理由で僕主催の初心者向けのJavaScript勉強会 を14日行いました。とある理由はforestkさんのエントリーを参照ください(UK 主催の初心者向け Javascript 勉強会が生まれた経緯) 会場は株式会社ノッキングオン様にご提供いただきました。借りたい人ははてなキーワードのノッキングオンの会議室使いたい!を利用するといいと思います。東麻布でプロジェクター & ネット環境あり(優先ですがアクセスポイントを持参すれば無線も利用可能みたいです)の好環境ですのでかなりおすすめの物件となっております:-P 資料を公開しますので参考になれば幸いです。といっても、ほとんど入門書に書いてあるようなことですがwしかもif文とかの説明すげー適当だしね! 資料URL : http://www.slideshare.net/ukstudio/javascript/11 質問されたり、資料が半端な
ブロックのスクロール実装を便利にする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
第1回 Firebugの基礎知識と、Firebugを使った開発のメリット | gihyo.jp
Firefox 3とFirebugで始めるJavaScript開発 第1回Firebugの基礎知識と、Firebugを使った開発のメリット はじめに このたび、Firefox 3＋Firebugについての連載を書かせていただきます、堀と申します。普段は仕事でJavaScriptやPHPを用いたフロントエンドの開発を行いながら、個人でRoppongi.JSという、JavaScriptのイベントの企画・主催をしております。 この連載では、Firefox 3のリリースに備えて、現在提供されているFirefox 3のベータ版とFirebugによるJavaScriptの開発手法について解説していきます。 第1回はFirefox 3ベータ版とFirebugのインストールから、Firebugによって、どのようなことが行えるようになるかについて簡単に概略を説明していきます。 Firebugとは Fir
Prototype.js を利用して作られたJavaScriptライブラリまとめサイト「Scripteka」:phpspot開発日誌
Scripteka :: Prototype extensions library Prototype.js (+Script.aculo.us)を利用して作られたJavaScriptライブラリまとめサイト「Scripteka」 例えば、次のようなPrototype.jsを使ったライブラリが紹介されています。 アコーディオン カラーピッカー ツールチップヒント 日付入力補助ウィジェット ライブラリ探しのヒントに。 関連エントリ prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 Prototype.jsベースのUIライブラリ「Prototype UI」 prototype.js逆引きサンプル集 - JavaScriptist
jQuery用のscript.aculo.usがリリース「jQuery UI」:phpspot開発日誌
jQuery UI: Widgets, Components, and Interactions jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. jQuery用のscript.aculo.usがリリース「jQuery UI」。 ドラッグ＆ドロップ、ソート、エレメント選択、リサイザブル、アコーディオン、カレンダー等、ＵＩに関わる機能が盛りだくさんです。 Interactions Draggables Droppables Sortables Selectables Resizables Widgets Acco
入力文字数の制限を可視化する JavaScript
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
【レビュー】Widgetという考え方が登場した「Adobe Spry framework for Ajax 1.2」 | クリエイティブ | マイコミジャーナル
アクセシビリティも考慮しているというSpry Widget Model Adobe Systemsのデザイナー向けAjaxフレームワーク、「Spry framework for Ajax」(beta)の最新バージョンバージョン1.2が13日(米国時間)、同社の「Adobe Labs」にて公開された。順調にバージョンアップを重ねているが、これまでは、デザインツールを提供するAdobeが作っているにもかかわらず、XMLの処理といったある意味「地味」な機能が多かったといえる。今回のバージョン1.2では、UIコントロールが「Widget」として切り分けられており、設定が分かりやすくなっている。 バージョン1.2では、SpryAccordion.jsがwidgets/accordionフォルダに移動している。以前のバージョン1.1では、demos/includesフォルダの中にあったものだ。一見す
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
jQuery を使って Ajax 開発を単純化する
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ