jQueryで実現するナビゲーションテクニック「15 Excellent jQuery Navigation Techniques and Solutions」
TOP > WebDesign > jQueryで実現するナビゲーションテクニック「15 Excellent jQuery Navigation Techniques and Solutions」 様々なエフェクトを可能にしてくれるjQuery。その用途は幅広く、様々なシーンで使われていますが、今回紹介するのはjQueryで実現するナビゲーションテクニック「15 Excellent jQuery Navigation Techniques and Solutions」です。 Create Vimeo-like top navigation タブメニューからツリー表示、などなどなかなかHTML+CSSだけではできないアニメーションや仕組みを使ったナビゲーションのテクニックが紹介あれています。今日はその中から幾つ描きになったものを紹介したいと思います。 詳しくは以下 ■15 Excel
携帯にURL通知スクリプトの配布
★使い方その１ ★使い方その２ サイト１ サイト２ 携帯のメールアドレスを入力して送信ボタンを押すとシンプルケータイ用掲示板の URL がメールで送られてきます。 ■ 特徴 携帯に携帯用サイトの URL を送るのに適しています。 アクセスログをとります。 連続投稿禁止機能。 一つの PHP スクリプトで数種類の URL の管理可。 データベース( MySQL )対応 flock を用いた排他処理 ■ 注意 sendmail の使えないサーバでは使えません。 携帯側でドメイン指定などの設定が行われている携帯には送ることが出来ません。 このスクリプトは管理モードの時にセッションを使用しています。サーバ側でセッションの使用不可な設定になっているサーバでは使えません。 session.use_trans_sid ( phpinfo() で確認できます) が 0 になっているとそのままでは使えません
これはカッコいい、テレビのノイズ画面風背景のLightBox作成:phpspot開発日誌
Lights Out ? Dimming/Covering Background Content with jQuery | Build Internet! これはカッコいい、テレビのノイズ画面風背景のLightBox作成。 次のように、テレビのノイズ画面のような背景がアニメーションするカッコいいLightBoxの作成チュートリアル。 デモページ 単純に背景をGIFアニメーションにしているだけっぽいけど、なんかオシャレです。 1ネタとして覚えておいて損はなさそう。サンプルもダウンロード可能です。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル jQueryやPHPを使った便利な仕組みのチュートリアル集
何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン:phpspot開発日誌
Better Password Inputs, iPhone Style | CSS-Tricks 何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン。 サイトのpasswordフィールドに入力すると、●●●といった感じで何を入力したか分からないまま文字入力が進んでいいます。 iPhone では、入力した最後の文字については分かるようなインタフェースになっていますね。 これと似たような仕組みを通常のWEBサイトでも実現出来るようにしたjQueryプラグインです。 passwordフィールドに入力をすると、右側に大きく、アルファベットがアニメーション表示されます。 デモページを開く 使い方は以下のように簡単。 $('#user-password-2').dPassword(); このプラグインで、非常に簡単にユーザビリティをあげることが出来そうです
jQueryで実現するツールチップ集「15 jQuery Plugins To Create A User Friendly Tooltip」
TOP > WebDesign > jQueryで実現するツールチップ集「15 jQuery Plugins To Create A User Friendly Tooltip」 リンク属性があるテキストや画像にマウスカーソルをあわせるとその情報を浮き上がらせてくれるユーザビリティを向上させてくれるツールチップ。様々なタイプのものがありますが、今日紹介する「15 jQuery Plugins To Create A User Friendly Tooltip」はjQueryで実現できるツールチップを集めたエントリーです。 qTip 全部で15個のツールチップが紹介されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■jQuery Tools/Tooltips 影付きでスムーズに表示されるツールチップ。エフェクトの割に動作が軽
リッチでクールなスケジューラー用ＵＩをJavaScriptで実装できる「dhtmlxScheduler」:phpspot開発日誌
dhtmlxScheduler - Ajax Events Calendar/Scheduler リッチでクールなスケジューラー用ＵＩをJavaScriptで実装できる「dhtmlxScheduler」。 このライブラリを使えば、次のような、Google カレンダーみたいなＵＩを簡単に実装できるみたいです。 しかも、こうしたライブラリにありがちな動作のモッサリ感はなく、非常に高速に動作してくれます。 デモページを見れば分かりますが、ドラッグ＆ドロップでスケジュールを作成できます。 Day, Week, Month タブがついていて、表示形式を切り替えることもできます。 ためしに月表示にしてみると、カレンダーみたいになりました。 これはむちゃくちゃ便利ですね。 ライブラリ自体のサイズも、gzippedで19KBと比較的軽くて、動作自体も高速。応用範囲は広いかもしれません。 ライセンスはGPL
アーティスト気分のポートフォリオサイトが構築できる「MyProFolio」:phpspot開発日誌
MyProFolio アーティスト気分のポートフォリオサイトが構築できる「MyProFolio」 HOME, PORTFOLIO(写真や作品など), ABOUT, CONTACT から構成されるようなページを作る際に使えるCMSです。 ギャラリーはかっこよくLightBox風になっていたり、クールなポートフォリオサイトを作る場合にサクッと構築できそう。 管理画面から簡単にサイトの構築が可能です。 こういう感じのサイトを作ってほしいという要望があった場合はすぐに構築できるかもしれませんね。 関連エントリ PHPでシンプルなCMSを作成する初心者向けチュートリアル サイトで使っているＣＭＳなどが一目でわかるFirefoxアドオン WordPress、MovableType等１０のウェブログエンジンのレビュー
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」:phpspot開発日誌
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 2009年04月14日- ie6-upgrade-warning - Google Code IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 IE6でアクセスすると次のように警告が出るみたいです。 各アイコンからはブラウザ配布サイトへのリンクが貼られています。 インストールは以下のように、1行。IE6限定で呼び出すようにするだけみたいです。 <!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]--> スクリプト自体は7.9kbで、IE6のみ読込み
SEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」 - GIGAZINE
Firefoxの拡張機能として利用でき、GoogleとYahooの検索結果がそのままSEO対策リンク集に早変わりします。ページランク、いつからそのページがネットに存在しているのか、被参照リンクの数、Alexaでのトラフィックランク、Whois情報などが簡単に一覧できるようになります。 特定の対策を施したいキーワードで検索し、結果を見ればどのようなSEO対策を行うべきか（どこが既に強いのか、どこが弱くて伸ばすべき点なのか）が分かるというわけです。 実際に使ってみましたので、インストール方法と使い方、設定については以下を参照。 SEO for Firefox ■インストール まずは上記サイトにアクセスし、「Click Here」をクリック 初期設定ではこのサイトからインストールできないので、上部に表示されるバーの右にある「設定を変更」をクリック 「許可」をクリック 「閉じる」をクリック もう一
無料ショッピングカート
※使用条件を読んでから使ってください。設置の仕方は解凍した中のreadme.txtをご覧ください。 現在カートは改良のためにメンテ中です。 旧タイプはこちらからダウンロードできます。
ブラウザ間の問題をjavascriptで回避する8つのTips「8 Javascript solutions to common CSS problems」
TOP > WebDesign > ブラウザ間の問題をjavascriptで回避する8つのTips「8 Javascript solutions to common CSS problems」 WEBデザイナーやWEB開発者なら一度は苦悩するブラウザの違いによるレイアウトの問題や形式の問題。業務の上で一つの障壁ともなり得ない問題です。今日紹介するのはそんなブラウザ間の表示に対しての問題を解決してくれるjavascriptを集めたエントリー「8 Javascript solutions to common CSS problems」を紹介したいと思います。 透過pngによる背景の問題だったり、カラム間の高さの問題などなど、レイアウトに関して起こりうる問題を簡単なjavascriptで回避する方法を示しています。今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以
これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」:phpspot開発日誌
これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」 2009年03月19日- snapfit.js (javascript jigsaw puzzle functionality for images) これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snapfit.js」。 JavaScriptだけでこんなことが簡単なの？と、最近はJavaScriptでもいろんなことができるから驚かなくなってきたんですが、これはたまげました。 画像があったとします。 どんな画像もパズル化しちゃいます。 パズルの難しさも選べます。 ハードレベルはかなり難しそう・・・ 使い方） 1) スクリプト読込み <script type="text/javascript" src="snapfit.js"></script> 2) imgのonl
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」:phpspot開発日誌
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお
チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
クールにデザインされた多機能LightBox「ColorBox」:phpspot開発日誌
ColorBox - customizable lightbox plugin for jQuery クールにデザインされた多機能LightBox「ColorBox」 もう成熟してきたこの分野ですが、ColorBoxはなかなか多機能かつクールなようなのでご紹介。 単一の写真表示 写真をグループ化してページ送り機能 AjaxでHTML取得 インラインＨＴＭＬも可能 ビデオ埋め込み IFRAMEで外部ページの埋め込み 機能も勿論多機能でいいのですが、デザインが色々と選べるところがいいです。 以下、３つのテーマが基本テーマ以外に用意されているみたいです。 シンプル調 Apple風(?) シンプル調2 カスタマイズして簡単にデザイン変更もできそうです。 jQueryプラグインで、MITライセンスとのこと。 関連エントリ カスタマイズできる多機能LightBox「Lightview」 表示法が新しく
iCal風の美しいカレンダーをページ上に配置可能なライブラリ:phpspot開発日誌
Create astonishing iCal-like calendars with jQuery | Stefano Verna iCal風の美しいカレンダーをページ上に配置可能なライブラリ 次のようなカレンダーをウェブ上に設置して自身のスケジュール公開なんかが出来ます。 動作デモはこちらでイベントのある日にカーソルを合わせるとアニメーションポップアップで内容を知ることが出来ます。 単にスケジュールを羅列するよりこうした仕組みで表示するようにしておけば、スマートかつオシャレな印象を与えられそうです。 関連エントリ とても洗練されたＵＩの日付ピッカー＆カレンダー集 超クールなカレンダー型日付入力補助用JSライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
m_send Ver.1.0 - Windows Live
http://pbs.darkgray.net/
404页面
gmeditor.com