[JS]タブと連動するNext/Previousボタンを設置するスクリプトタブにNext/Previousボタンを設置し、操作を補助するスクリプトをCSS TRICKSから紹介します。 jQuery UI Tabs with Next/Previous demo タブの数が多くなると、タブだけのナビゲーションではマウスをちょっとずつ動かす動作が不便なため、定位置でクリックできるように設計した、とのことです。 スクリプトの実装には、jQueryとjQuery UIが必要となっています。
[JS]ページを多言語に翻訳するスクリプト＆ブックマークレット -Sunday Morning
Google AJAX Language APIを利用して、ページ内のテキストを30以上の言語に自動翻訳するスクリプト&ブックマークレット「Sunday Morning」を紹介します。 Sunday Morning jQuery + Google Translation デモでは、ダブルクリックでナビゲーションを表示してインラインのテキストを翻訳するものと、単語単位で翻訳するものがあり、サイトのテキストもダブルクリックすると翻訳されます。 ブックマークレットは、下記ページにて作成することができます。 SundayMorning Bookmarklet Generator Sunday MorningはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
複数選択のドロップダウンにチェックボックスを付ける·Dropdown Check List MOONGIFT
「神は細部に宿る」。ほんのちょっとした機能だからと見過ごすのではなく、ほんのちょっとしたことだからこそ誠心誠意作り込んでいくといったような意味合いが込められた言葉だ。コンピュータのGUIインタフェースはまだここ十年、二十年の話でありまだまだ改善の余地は大きい。 ドロップダウンリストが便利に！ 例えばファイルのアップロード、一つ一つファイルを指定するなんて愚の骨頂だ。さらに複数選択のドロップダウンも選んでいる途中のちょっとしたミスで全ての項目が非選択に戻ったりする。これも問題だが、解決策としてDropdown Check Listがある。 今回紹介するオープンソース・ソフトウェアはDropdown Check List、ドロップダウンリストにチェックボックスを付けるというjQueryプラグインだ。 これは良いアイディアだ。Dropdown Check Listを使うとドロップダウンの複数項目
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
[JS]リスト要素に自動でナンバリングを追加するスクリプト
リスト要素のclassや新しい要素に自動でナンバリングして追加するスクリプトをWeb Designer Wallから紹介します。 jQuery Sequential List demo 上記キャプチャのデモでは、「class="item1", class="item2"、、、」をスクリプトで自動追加し、Step1, Step2...の背景画像を表示させています。 元のHTMLにはclassを記述せず、下記のようなコードで実装されています。 ※キャプチャ箇所（Step1, Step2）のみ抜粋。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ol id="step"> <li><h3>PhotoShop Part</h3></li> <li><h3>jQuery</h3></li> </ol> </textarea>
IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル:phpspot開発日誌
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
[JS]jQueryのプラグイン33+1選 -2009年1月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Ajaxify さまざまなAJAXコンテンツを実装。 Agile Carousel パネルをダイナミックにスライド。 Start/S
これは面白い！JavaScriptでcron実行「jsCron」:phpspot開発日誌
jsCron, portando Cron a Javascript | aNieto2K これは面白い！JavaScriptでcron実行「jsCron」 0 10 * * * コマンド の形式で実行できるcronですが、JavaScriptで特定の関数をcron形式で実行できるようにしたライブラリが公開されました。 サンプルコードは次のようになっています。 // 実行する関数定義 function hola() { alert("Hola"); } // cron設定 jsCron.set("35 17 * * * hola()"); 訪問者が訪れた時刻によって処理を変えたい場合など、なかなか使えそうですね。 関連エントリ JavaScriptでページスライダー用ライブラリいろいろ Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx Library」 使えるJav
コンテンツを滑らかにスライドさせるjQueryプラグイン:phpspot開発日誌
jQuery plugin - Easy Image or Content Slider | Css Globe This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. コンテンツを滑らかにスライドさせるjQueryプラグイン。 各種デモが以下で閲覧できます。 Default non-styled image slider Non-styled vertical image slider Non-styled vertical content slider マークアップが次のようにシンプルに記述できる点も導入の敷居が低くていいかんじです。 <div id="slider
jQueryをナイスにナビゲーションに活用したサイト集:phpspot開発日誌
8 Sites with Excellent jQuery Navigation | Build Internet! jQueryをナイスにナビゲーションに活用したサイト集。 jQueryを巧みに活用して、JavaScript で本当に出来ているの？と思ってしまうほどのサイト集です。jQueryをうまく使う際の参考にできそう。 Carrot Creative 一見、普通のHTMLサイトですが、ヘッダーのメニューをクリックすると・・・ 色々なところが凝っていて参考になる上、動きが楽しい。 Aviary 角丸ドロップダウンメニューがカッコいい。アニメーションなどの仕掛けも。 WP Coder 一部画面遷移を同一画面内ポップアップ表示 Matt Dempsey 内容がスライドのようにダイナミックに切り替わる Bright Creative 画面内をクールにスライドさせるＵＩ 全部見る フルスクラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
[JS]画像をさくっと回転させるスクリプト -ImageRotate
リッチインターネットアプリケーションの実装時に検討したい30のUI
Site Under Maintenance
