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

執筆者:

関連記事

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

jQuery UI Buttonsetの選択状態を変えたり、色を変えたり

  目次1 jQuery UI Buttonsの設定(Radioボタン)2 チェック状態を変えるには3 ボタンの色を変えるには4 チェックした要素のvalueを取得するには jQuery U …

no image

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

  前回 Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails &nbsp …

jQuery UI BootstrapにGoogle Mapが来た〜gmap3

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

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