Circle Menu
A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu. See it in action. Author Jason Hutchinson (zikes@zikes.me) How to Use Download and include the JS file in your page. Create a list, with the first list item representing the icon at the center of the menu. <ul> <li><a href="#">+
[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu
デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」:phpspot開発日誌
cantipi | Look like clock, work like clock! アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」。 インプットにフォーカスをあてると次のようなアナログ時計が現れ、内側をクリックで時刻の針を、外側をクリックで分数の針を変更することができます。 こういう入力のさせ方もあるのかと感心しました。 最初、一瞬使い方に戸惑う部分があるかもしれませんが、使い方によっては便利な使い方ができるかもしれません。 関連エントリ 時刻の入力に便利なJS入力補助ライブラリ「jquery.timepickr.js」 アナログ時計から簡単に時刻を指定できるJavaScriptライブラリ「Time Picker」
SVG with a little help from Raphaël
function pieMe() { var values = [], labels = [], nfTable=document.getElementById("nutritionFacts"), i = 0, rows = nfTable.rows.length; for(;i < rows;i++) { trRow = nfTable.getElementsByTagName("tr")[i]; labels.push(trRow.getElementsByTagName("th")[0].firstChild.nodeValue); values.push(parseInt(trRow.getElementsByTagName("td")[0].firstChild.nodeValue, 10)); } nfTable.style.position='absolute'; nfTa
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」:phpspot開発日誌
jQuery Radmenu Example 回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」。 UIとしては次のような円形のメニューで、回転させるとなかなか面白い動きをします。 具体的にどう使うか、というのはアイデア次第ということになってきそうですが、アイテムをシャッフルさせたり、動きがなかなか面白いメニューになっています。 デモページ 利用者にちょっとした驚きの効果を与える分には申し分ないですが、使い方には注意が必要かもしれませんね。 HTML的には、次のようなulを使ったリストです。 <div id='radial_container'> <ul class='list'> <li class='item'><div class='my_class'>0</div></li> <li class='item'><div class='my
プログラマ視点でみたjQueryの魅力 - EC studio 技術ブログ
jQueryは、リッチなUIを簡単な記述で実装できます。 デザイナーにも理解しやすい仕様（そこも魅力の一つ！）なので、 いまやデザイナー向けにjQueryを説明するブログもたくさんありますね。 ただ、完全にデザイナー向けのライブラリなのか？というと、そうでもなく デザイナーだけではなくプログラマ視点から見ても魅力があるライブラリだと 言えるでしょう。 今回はプログラマ視点でみたjQueryの魅力と感じた点を簡単にまとめてみます。 コードがスマートになる なんといってもココに魅力を感じます！ 細かく言うと以下のものがあげられます。 ・要素の操作もシンプル簡単！ jQueryはセレクタを利用して要素を簡単に取得し、 エフェクトの追加やDOMの操作ができます。 （CSSとほぼ同様のセレクタを指定して 簡単にDOMの操作ができるところがデザイナーにも優しいですね！） これは、記述方法をみていただけ
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html
ブログ
jQuery HTML5 Audio-Video Kit: jMediaelement
opensocial-jquery - Google Code