skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(基本編)

投稿日:

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。

今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更したいときです。

csvheader

左の項目から任意の項目を選び、クリックすると右側に値が移動します。

いろいろと大変だったんで今回メモします。

プラグイン

multiselectというプラグインです。そのまんまや・・・

http://loudev.com/

インストール

ほとんど公式のコピペなんですが、下記のように書けば動きます。

これだけでスクショでとったようなきれいな複数選択が可能になります。

参考リンク

http://logicalerror.seesaa.net/article/408512412.html

しかし、順番を保持したい場合、さまざまな難題が付きまといます。これについては次回。

-JavaScript, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5c146863ab …

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-5c14 …