タグ

ブックマーク / 5509.me (5)

  • selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509

    セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合(rebuildメソッド) サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか?jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの

    massava
    massava 2013/04/10
  • JSとCookieを使った新規ユーザーのみに表示するコンテンツで心を掴もう :: 5509

    サイト運営において 目標はそれぞれ異なると思いますが、そもそも目標を達成するためにはどうすればいいでしょうか。 LPOもそれなりに浸透してきましたが 新規ユーザーの心を掴めるかどうか(ユーザーの目的に合った情報を提示してあげること) が重要になってくると思います。 注目を惹くための手段は色々とあると思いますが 新規ユーザーのみに提示するようなコンテンツを表示してあげる というのもひとつの手段になります。 今回はJavaScriptCookieを使って表示する情報をコントロールする方法を紹介します。 この方法はとても簡単に導入できるので覚えておいて損はないと思います。 まずは何もしていない状態のサンプルを見てください。 では次に新規ユーザーのみに提示するようなコンテンツを表示してあげるサンプルを見てください。 サンプルをもう一度見たい場合は タイトルの下の 新規ユーザーに戻る リンクをクリ

  • ありそうでなかった?要素をふわっと表示させるjQueryプラグイン whatInOut :: 5509

    Windows7のウィンドウのようにふわっと表示・非表示させることができます。ふわっとと、whatをかけ・・・(ry 色々な環境で試せてないので、バグというか予期しない動きは多いかもしれないです。twitterかコメントで報告もらえれば対応できる範囲で対応します。 ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください(!)それかeasing関数を書いてもらえると・・・ Live demo Download demo files 導入方法 1. jQueryとeasingプラグイン、whatinoutを読み込む。 3. 実行する $()で対象にする要素を指定します。実際に使う場合は、ふわっと表示させたいときにwhatIn()、ふわっと消したいときにwhatOut()、ふわっとスライドインしたいときにwhatSlideI

  • どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509

    jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

    massava
    massava 2010/08/10
  • マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法 :: 5509

    jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。 何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。 どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。 で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。 結論は簡単で .stop(true, false)を.animate()の前に入れる .animate()メソッドのオプション部分でqueue: falseを指定する のいずれかです。 このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わ

  • 1