jQuery UI node.js

Electron+Browserify(debowerify)+jQueryUi

投稿日:2016年2月24日 更新日:

bower install

browserify(debowerify)

debowerifyはbowerのコンポーネントをbrowserifyでパッケージしてくれるやつ.

package.jsonでtransformを指定

あとは、普通にbower_compornent内のディレクトリ名をrequireすればbrowserifyでパッケージングしてくれる.

require

例えば、Sortableを利用する場合.
Sortableの依存ライブラリはcore.js、widget.js、mouse.js
api.jqueryui.com/sortable/

jQueryUI 1.12.0からは、browserifyに対応するそうだ.

jQueryUIをMarionetteと一緒に使う

jQueryプラグインを使うときは、MarionetteViewのonRenderを使うと便利.
sortableの場合はCollectionViewなどリストを束ねるul要素などに対して使う.

Marionette.CollectionViewでsortableの順番を保持する

もろもろ試行錯誤のすえ、次の通りで動いた.

まず、collectionにcomparatorを設定する.
すると、そのcollectionはcomparatorで設定した順番で基本sortされる.

そして、ItemViewのidにmodelのidを設定する.
ここでは、Backbone.LocalStorageを使っているので、idは複雑なやつが指定される.
modelのidが単純なidで被りそうな場合はprefixをつけて、次のserializeのときに、オプションをつける.

次に、sortableのupdateイベントで順番を再設定する.

参考:
Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list
Saving jQuery UI Sortable’s order to Backbone.js Collection

reorderOnSortが思い通りに動かなかった.
filterとの関係かと思うけど未調査.

themeをsassに変換

同梱されているsass-convertを使うため、sassをインストール.

npmでsass-convertのラッパーとgulp-renameをインストール

gulpタスクでまとめてパーシャルにする.
必要ならimageもコピーしておく.

自分のscssでインポート

参考:
how to import jquery ui theme with sass
sass-convert
gulp の gulp-rename モジュールを使って出力するファイルに .min をつける方法

screenshot

jquery-ui-contextmenu

jquery uiのMenuは右クリックのメニューとして使いづらいのでプラグインを使う.
mar10/jquery-ui-contextmenu

bower

require

jquery uiのmenuも必要.

使う

使い方はMarionette.CollectionViewのonRenderなどで指定すると、その要素内のliでコンテクストメニューを作ってくれる.
メニューの値は、ui.cmd、右クリック対象の値はui.targetで取得できる.

screenshot

-jQuery UI, node.js
-,

執筆者:

関連記事

Electronでmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …

Electronで簡単にMac風UI〜Photon

By: Patrick Hoesly – CC BY 2.0 目次1 Photon2 gulpfile.coffee3 index.scss4 Todolistに適用する5 できた Pho …

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

By: Nrico – CC BY 2.0 目次1 package.json2 gulpfile.coffee3 bower + browserify4 ストップウォッチ package. …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …

no image

socket.ioでリアルタイムチャット

目次1 環境2 準備3 サーバー側~express4 socket.ioのイベント駆動5 サーバー側~socket.io6 クライアント側7  接続者全員にメッセージを流したいので修正8  情報 環境 …