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
-,

執筆者:

関連記事

no image

jQuery UIの将棋でつくったまとめ~jQuery UI draggable droppable

  目次1 盤上の駒の動き2 盤上の駒の座標を取得する3 手番(ターン)の変更4 盤外からの駒の動き5 将棋のルールの分析6 ゲームの計算処理など 盤上の駒の動き draggableの設定 …

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …

Electronでsql.js

By: Dmitry Baranovskiy – CC BY 2.0 目次1 sql.js2 準備3 インストール4 main.coffee5 index.coffee6 index.ht …

no image

CentOS5.8にnodebrewでnode.jsをインストール

github.com/hokaccha/nodebrew インストールは簡単

.bashrcに追加 [crayon-58b5a8e5e …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …