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 + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

By: Purple Slog – CC BY 2.0 目次1 はじめに2 gulpの準備3 Hello electron4 Hello Backbone.js & eco5 Ba …

Electronでmaterialize

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

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

Todolistをmarionette化

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

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok