jQueryを使ってのドラッグ＆ドロップUIをiPhoneやAndroidでも簡単に動作するようにしてくれるプラグイン「jQuery UI Touch Punch」 2012/05/09

先日ここでも紹介したjQueryを使ってのドラッグ＆ドロップUI。通常jQueryでドラッグ＆ドロップを実装するには「jquery-ui.js」を使って「.draggable()」「.droppable()」といったアクションを使って操作しますがこれらはiPhoneやAndroidには対応していません。そこで、これらの… →ReadMore

jQueryで画像をドラッグ＆ドロップするUIを実装する実験 2012/04/25

以前にもjQueryを使ってドラッグでコンテンツ要素をスクロールさせるUIを紹介しましたが、ストレージサービスなどでたまに見かける、画像を特定のエリアにドラッグ＆ドロップさせるUIの実験的サンプルを作ってみたのでここでも紹介してみます。jQueryで画像をドラッグ＆ドロップするUIを実装する実験まずは動作のサンプルから… →ReadMore

リスト要素を簡単にページネーションを付けて分割することができるjQueryプラグイン「jPages.js」 2012/04/18

ページ内にニュースや画像など、たくさんのリスト要素を表示する際にページネーションを使ってリストを決められた数で分割して表示する方法はよくありますがそれをjQueryで簡単に実装することができるプラグイン「jPages」がとても便利で活用できそうだったのでご紹介。jPages≫jPagesjQueryファイルとjPage… →ReadMore

jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験 2012/04/11

先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたがその動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。まずは動作サンプルから。jQueryでリキッドカルーセルUIに自動スライド機… →ReadMore

jQueryでCSSの「!important」宣言の扱い方 2012/04/04

jQueryを使ってページ内でのあらゆる制御をする際、コンテンツ要素の表示／非表示を切り替えたりアニメーションを付けたりするにはCSSのSTYLE属性を制御してプロパティに指示を与えることになります。そのようなCSSのプロパティを制御する際に、「!important」宣言をどうしても使いたい状況が意外と出てくるので、j… →ReadMore

jQueryでリキッド対応のカルーセルUIを作成する実験 2012/03/28

今までここでカルーセルパネルUIを実装するサンプルをいくつか紹介していますが、amazonのサイトでも使われているような、ブラウザ枠のサイズによってカルーセルに表示する個数を変化させるリキッド対応のカルーセルパネルを試しに作ってみたので紹介してみます。まずは動作サンプルから。jQueryでリキッド対応のカルーセルUIを… →ReadMore

jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」を作ってみる 2012/03/21

入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ（placeholder）」。入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますがHT… →ReadMore

jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験 2012/03/14

前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作するフリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、前回の単純なフリック／スワイプのUI動作に加えて、自動で次の画像に切り替わるスライドショー動作とメインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの画… →ReadMore

jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験 2012/03/06

iPhoneやiPad、Androidといったスマートフォンやタブレット端末ではフリック／スワイプと呼ばれる指でスライドさせるUIが付き物になっています。jQueryでもこのフリック／スワイプ動作を実装できるプラグインはたくさんありますがいざ自分で作ろうとすると意外と大変な動作だったりします。この動作についていろいろ調… →ReadMore