hifiveとjQuery UIを組み合わせる【DOMの並び替え】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はDOMのソートです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。各要素をドラッグして上下に移動したり、別なカラムにドロップできます。
HTMLについて
少し長いですがHTMLは次のようになります。portlet クラスごとに移動できます。
<div id="container" style="padding: 30px;"> | |
<div class="column"> | |
<div class="portlet"> | |
<div class="portlet-header">Feeds</div> | |
<div class="portlet-content" style="height: 320px;">Lorem | |
ipsum dolor sit amet, consectetuer adipiscing elit</div> | |
</div> | |
<div class="portlet"> | |
<div class="portlet-header">News</div> | |
<div class="portlet-content">Lorem ipsum dolor sit amet, | |
consectetuer adipiscing elit</div> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="portlet"> | |
<div class="portlet-header">Shopping</div> | |
<div class="portlet-content">Lorem ipsum dolor sit amet, | |
consectetuer adipiscing elit</div> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="portlet"> | |
<div class="portlet-header">Links</div> | |
<div class="portlet-content">Lorem ipsum dolor sit amet, | |
consectetuer adipiscing elit</div> | |
</div> | |
<div class="portlet"> | |
<div class="portlet-header">Images</div> | |
<div class="portlet-content">Lorem ipsum dolor sit amet, | |
consectetuer adipiscing elit</div> | |
</div> | |
</div> | |
<ul id="list" style="list-style: none;"></ul> | |
</div> |
スタイルシートについて
スタイルシートはカラム部分の設定などになります。
.column { | |
width: 220px; | |
float: left; | |
padding-bottom: 100px; | |
} | |
.portlet { | |
margin: 0 1em 1em 0; | |
} | |
.portlet-header { | |
margin: 0.3em; | |
padding-bottom: 4px; | |
padding-left: 0.2em; | |
} | |
.portlet-header .ui-icon { | |
float: right; | |
} | |
.portlet-content { | |
padding: 0.4em; | |
} | |
.ui-sortable-placeholder { | |
border: 1px dotted black; | |
visibility: visible !important; | |
height: 50px !important; | |
} | |
.ui-sortable-placeholder * { | |
visibility: hidden; | |
} |
JavaScriptについて
JavaScriptは次のようになります。まずは概要です。
$(function() { | |
var controller = { | |
__name: 'SortableController', | |
// 初期化処理 | |
__ready: function() { | |
}, | |
// ドロップ時のコールバック | |
stop: function(event, ui) { | |
} | |
}; | |
// コントローラの作成と要素へのバインド. | |
h5.core.controller('#container', controller); | |
}); |
初期化処理
hifiveのコントローラが初期化された段階でソートの設定を行います。ここではドロップした時のイベント(stop)だけ指定しています。
__ready: function() { | |
var that = this; | |
$('.column').sortable({ | |
connectWith: '.column', | |
stop: that.own(that.stop) | |
}); | |
$('.portlet').addClass('ui-widget ui-widget-content ui-helper-clearfix ui-corner-all') | |
.find('.portlet-header').addClass('ui-widget-header ui-corner-all').prepend( | |
'<span class="ui-icon ui-icon-minusthick"></span>').end().find( | |
'.portlet-content'); | |
$('.portlet-header .ui-icon').click(function() { | |
$(this).toggleClass('ui-icon-minusthick').toggleClass('ui-icon-plusthick'); | |
$(this).parents('.portlet:first').find('.portlet-content').toggle(); | |
}); | |
$('.column').disableSelection(); | |
}, |
ドロップ時のコールバック
次にドロップを止めた時のイベントです。
stop: function(event, ui) { | |
var target = $(ui.item); | |
$('#list').append('<li>' + target.find('.portlet-header').text() + 'が移動しました。</li>'); | |
} |
このように実装することでhifiveとjQuery UIのソート機能をシームレスに連携させられるようになります。ダッシュボードであったり、ユーザが自分でコンテンツを自由に設定できるページを作るのに使えるのでぜひ参考にしてください。
実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。
コメントは受け付けていません。