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でsqlite3を使ったアプリ

By: fdecomite – CC BY 2.0 目次1 環境2 electronでnpmモジュールを使うには3 jqueryをレンダラプロセスで使う4 slqite3の使い方5 ipc …

Railsでdate_fieldにjquery uiのdatepickerを使おうとしたらchromeのdatepickerとかち合ってしまったとき

By: Randy Heinitz – CC BY 2.0 text_fieldにしとけば、jQuery UI datepickerは使える. [crayon-59ca7bcdb9c126 …

RailsのフォームにjQuery UIのSliderを使う

By: woodleywonderworks – CC BY 2.0 目次1 jQuery UI Slider2 ライブラリを読み込む3 コード4 できた jQuery UI Slider …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

Electronでsql.js

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