タグ

jQueryに関するharehare1110のブックマーク (62)

  • stickyMojo contained fixed position sticky sidebar jquery plugin

    stickyMojo.jsFinally, a contained fixed positioned sticky sidebar jQuery plugin. Brought to you by Introduction stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE. Background After looking around for a contained fixed position s

  • 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌

    画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ

  • 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」:phpspot開発日誌

    使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。

  • iPadのようなソフトウェアキーボードをWEBで実現するjQueryプラグイン:phpspot開発日誌

    jQuery.keyboard iPadのようなソフトウェアキーボードをWEBで実現するjQueryプラグイン。 次のようにテキストエリアにフォーカスを合わせるとキーボードが出てくるようにできます。 日語も使えないので、どこに使うんだろうという疑問はさておき、なかなか面白いですね。 関連エントリ 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」 ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」

  • 全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」:phpspot開発日誌

    Jquery.ascensor.js 全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」 全画面でスライドが切り替わりつつ2次元のスライド移動が可能な機能を実装できるjQueryプラグインです。 各スライドはDIVで記述するので簡単です。 スライド画面右下にスライドのマップのようなものが表示され、これをクリックすることでも移動することが可能です。 単なる横方向のプレゼンではなくて、なかなかオシャレで目を引くプレゼンが作れそうです スライド切り替えはアニメーションされます。 個人的にも、いつものPowerPointをやめてこういうのでやりたいですね 関連エントリ JavaScriptでプレゼンテーションを作る際に使えそうなjQueryプラグイン「Fathom.js」 WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward

  • リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌

    jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」

  • パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」:phpspot開発日誌

    パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 2011年10月03日- Azoff Design | Overscroll | An iOS scrolling emulator for jQuery パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 Googleマップみたいな感じといえばそうなんですが、加速度がついてアニメーションしながら移動する点なんかも再現されています。 使い方が簡単でスクリプトを読み込んだら、iOSちっくにしたい部分を $(element).overscroll() だけで設定できるのが熱いです。 ホイールにも対応していて芸が細かいです。 使いどころは色々ありそうですが、スマホアプリの紹介ページなんかでつかってもインパクトがありそうですね。 関連エ

  • 編集できるコンボボックスを実装するjQueryプラグイン「Editable Combo Box」:phpspot開発日誌

    編集できるコンボボックスを実装するjQueryプラグイン「Editable Combo Box」 2011年09月09日- Editable Combo Box | jQuery Plugins 編集できるコンボボックスを実装するjQueryプラグイン「Editable Combo Box」。 HTML標準では編集できるコンボボックスというのは存在せず自分で作る必要がありますが、このjQueryプラグインを使えば、select 要素を .comboEditable() として初期化するだけで実装できます。 例) $(this).find('select').comboEditable(); 編集できる&ドロップダウンから選択肢を選べます HTML的にも<select>の中に<option>として定義していけばいいため、JavaScriptの配列などを使わなくとも簡単に実装できます。 関連エ

  • 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」:phpspot開発日誌

    jQuery.Smart3D Info for Coders 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」 マウス位置に応じて画像をずらせて奥行きを表現できます。 実装方法が簡単で、ul以下にliとimgタグを並べて初期化するだけというものです。マークアップ的にあんまりよろしくないのかもしれませんが、こうしたUIが必要なときに手軽に実装できます。 単なる画像よりも、こうしたインタラクティブな要素を入れるとより注目を集められそうですね 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 ページの要素を3D化できる面白jQueryプラグイン「3Dify」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMapster」

  • ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」:phpspot開発日誌

    ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」 2011年08月24日- AJAX-ZOOM jQuery Image Zoom Viewer & Pan Gallery, PHP - Javascript 360 Spin & Zoom Rotate Fullscreen ECサイトなどで使えそうな360度ズーム機能を実装するjQueryプラグイン「AJAX-ZOOM」。 商品なんかを360度回転させながら詳細を確認するみたいなUIが作れます。最初に画像を一気にダウンロードする必要はなくて、ajaxベースなのも特徴です 大きな画面で見れるようにフルスクリーンモードなんかがついたりして凝った作りになっています 以下は回転させて別のアングルでズームしてみたところ 3Dだけではなくて、2Dの大きな画像にも適用することができるみたいです 用途に

  • ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル:phpspot開発日誌

    Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる(ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」

  • 今見ている場所が分かりやすいヘッダー固定のjQuery&CSSテクニック:phpspot開発日誌

    Persistent Headers | CSS-Tricks 今見ている場所が分かりやすいヘッダー固定のjQuery&CSSテクニック。 文書は表などの長さが長くなってくると今どこを見ているかわかりづらいようなケースがありますが、このテクニックを使えば、今読んでいるパートがなんなのかをページの上部に表示することができて分かりやすいです。テーブルヘッダーなんかも上部固定できます 固定したい部分はjqueryのセレクタで指定できるため、利用も簡単です 関連エントリ テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 CSS3のよく使いそうな10個のテクニックのまとめ 使える.htaccessテクニック10個

  • Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」:phpspot開発日誌

    "Docklr" - Simple jQuery OSX-like Dock Menu | jQuery Plugins Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」。 次のように上下左右、ページ内、どこにでも設置できるDock風UIを実現できるプラグインです。 ページの左側に設置してもなかなかオシャレですね。 デモページ アイコンをクリックするとバイーンとアイコンがアニメーションするあたりもそっくりです。 上下左右だけでなく、ページ内に普通に設置することもできるみたいです 関連エントリ レイアウトに関する強力なjQueryプラグイン6つ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 画像スライダーに関することならお任せ!なjQueryプ

  • 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」:phpspot開発日誌

    JQuery Magic Tabs Plugin | jQuery Plugins 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」。 次のように、横に長くなってもスクロールできつつ、閉じるボタンもついて、インタフェースもなかなかクールなタブUIが実現できます。 ありそうであまり無かったかもしれないプラグインですね。もちろん「タブの追加」みたいなのもできます。 実装コードはこちらに掲載されています。デモもあります ページの構成によっては使うことでより利便性の高いインタフェースを提供できそうですね 次のようなコードで比較的容易に実装が可能です。 関連エントリ 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」

  • http://www.designwalker.com/2010/06/jquery-forms.html

    http://www.designwalker.com/2010/06/jquery-forms.html
  • 特許の保護とリスク管理

    新亜光学工業株式会社 新亜光学工業株式会社は、急速に変化するビジネス環境において、特許の保護とリスク管理がデジタルトランスフォーメーションとビジネス革新に与える影響に注目しています。この記事では、同社が採用する戦略に焦点を当て、特許を活用したビジネスモデルの変革、効果的な業務プロセスの改善、そして顧客エクスペリエンスの向上について探求します。デジタル時代の競争において成功するためにどのように特許とリスク管理を組み合わせているのか、詳細に見ていきましょう。 日立Astemo株式会社 自動車産業は急速に変化しており、新たな技術と革新が日々生まれています。日立Astemoは、この競争の激しい分野で、自動車の未来を切り拓く存在として高く評価されています。その成功の背後には、特許の保護とリスク管理という堅実な戦略があります。この記事では、日立Astemoの取り組みを紹介し、自動車業界におけるリーダー

  • http://www.designwalker.com/2009/09/jquery-table.html

    http://www.designwalker.com/2009/09/jquery-table.html
  • 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」:phpspot開発日誌

    縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 2011年05月17日- Lightweight Scrollable Tables | jQuery Plugins 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 $('table').scrollbarTable();のように呼び出すだけで簡単にスクロール化してくれます。 特に派手な演出はありませんが、シンプルで汎用的に使うことが出来ます。とかく長くなりがちなテーブルも1行で簡単にスクロール化できるというのは色々な場面で使えるでしょう。 $('table').scrollbarTable(100)のように引数を渡せば高さを100pxに指定出来ます。 デモページはこちら 関連エ

  • ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン:phpspot開発日誌

    MITYA.CO.UK | Scripts | Animated table sort (REGEXP friendly) ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン。 どこからどこに移動するというのが目視で確認できるので、無駄に、というのは言い過ぎかもで便利かもしれません。 テーブルの内容が、「ほげほげ(111)」のような文字を含む値であっても、正規表現で数値をマッチさせることでソートするなんて機能もあるみたいです。 比較テーブルなんかで使うと分かりやすい比較のUIが作れそうです。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 CSV形式のデータを簡単にテーブルに出来るjQueryプラグイン「csvtotable」 ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMe

  • 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌

    Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます 実装コードの例。 prefix+"top-left"+拡張子 prefix+"top"+拡張子 prefix+"bottom"+拡張子 ・・・ という感じで画像を8枚用意すれば独自の縁が簡単にできます グラデーションがかかったものも簡単に実装できます 単純にdivで分割しているだけです 関連エントリ IEでもCSS3を使うためのツールやリソース集 CSS3の擬似クラスをIE6-8でも使えるように