jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする
jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする方法を紹介します。 テーブルをソートするには、jQuery UI Soatableを利用します。 １．基本 まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。 サンプル サンプルのコード（抜粋）は次のとおりです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> $(function(){ $('tbody').sortable(); }); </script> <table> <thead> <tr> <
iOSにものすごくそっくりなJQuery Mobileのテーマ
最近話題になることの多い、JQuery Mobileを使ってiOSにそっくりな外観のテーマが作成されたようです。そのそっくり具合はデモを見れば一目瞭然です。ネイティブアプリケーションに限りなく近いUIを独自に再現する際には使えるかもしれません。 また簡単なモックアップをPCベースで作るというような応用もできそうですね。 作者のTait BrownさんはメルボルンのUIデザイナーでコードとサイトはgithubで公開されています。 via:http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
本をペラペラめくる風UI実装jQueryプラグイン「Booklet」:phpspot開発日誌
Demos - Booklet - jQuery Plugin 本をペラペラめくる風UI実装jQueryプラグイン「Booklet」。 よくあるペラペラめくる風UIを実装できます。めくる領域の縦横サイズを自由に指定できたり、ページ番号を降ったり、スピードやキーボードコントロール等、カスタマイズが容易で小回りが効きそう 使い方によっては単なるリンクでのページ送りの方が分かりやすくなってしまいそうなところに注意ですが、なかなか便利そうです。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 フルスクリーンでページめくりをするUI実装デモ Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日本語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
jquery.pep.js | kinetic drag for mobile & desktop
jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery). All of Pep’s options are outlined on Github, so take a look. Feel free to email me with
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
