タグ

uiとjQueryに関するrikuoのブックマーク (6)

  • Post by @hamalog

    jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。

    Post by @hamalog
  • スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish

    ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd

    スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish
  • jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの

    jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの 説明 たくさんのアイテムの中からひとつ選びたいというケース。 対象の名前は知ってる。でも検索するのもだるい。 単なるドロップダウンだとどこにあるかわからなくて困る。 というケースにどうぞ。 ユーザビリティメモ: jsが無効な人は恩恵を受けられないので代替手段を何とかしたほうがいいんじゃないっすかね。 ついでにmigemoっぽい検索する機能もつけてみた。 入力されたローマ字を元に正規表現作って読みデータ(ひらがな)を検索するだけ。 ちょっとかしこいハイライト機能つき。 操作: 上下キーで移動、Enterで確定、ESC or 検索窓がフォーカス失うとキャンセル。 Windows XP上のOpera 9.64、Firefox 3.0.10、IE 7.0で動作確認。

  • くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です

    とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1. そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた. とりあえずこんな風になった このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に: 時計回りにドラッグするとカウントアップ 半時計回りにドラッグするとカウントダウン します. 欠点 入力の仕方がわかりにくい*2 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3 あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQu

    くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です
  • moto-mono.net

    This domain may be for sale!

  • [JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト

    マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani

  • 1