吉米.NET

最近寫前端的js比寫後端的c#程式還要多。用了滿多的plugin，記錄一下@@。

像在做「進階搜尋」UI時滿常看到的：

HTML：

<div id="demo"></div>  
<div>
  <input type="button" id="GetUnSelected" value="取得沒選到的元素" />
  <input type="button" id="GetSelected" value="取得所有可選擇的元素" />
</div>
<div>
  <h3>Selected Items:</h3>
  <ul id="SelectedItems"></ul>
</div>

引用 jQuery：

<script src="@Url.Content("~/Scripts/jquery.MoverBoxes.js")" type="text/javascript"></script>

 jQuery：

$(document).ready(function () {

            //放置左邊listbox，即是所有可選的元素
            var dataLeft = [];
            dataLeft.push("1, Unassigned Value One");
            dataLeft.push("2, Unassigned Value Two");
            dataLeft.push("3, Unassigned Value Three");

            //放置右邊listbox，即是已選中的元素
            var dataRight = [];
            dataRight.push("4, Assigned Value One");
            dataRight.push("5, Assigned Value Two");

            $('#demo').MoverBoxes({ 
                'dataleft': dataLeft,   //左邊的元素集合 
                'dataright': dataRight, //右邊的元素集合
                size: 20,
                'leftLabel':"Unassigned", //左邊listbox的title 
                'rightLabel':"Assigned"   //右邊listbox的title
            });

            //取得選擇的值(=右邊listbox)，並且可以做後續的處理用。
            $('#GetSelected').click(function () {
                //清除所有舊的選取
                $('#SelectedItems').html('');
                var selectedData = $('#demo').data('MoverBoxes').SelectedValues();

                //for each element in the array we will add to the listbox.
                for (var i in selectedData) {
                    var li_item = document.createElement("li");
                    $(li_item).html(selectedData[i])
                    $('#SelectedItems').append(li_item);
                }

            });

            //取得未選擇的值(=左邊listbox)，並且可以做後續的處理用。
            $('#GetUnSelected').click(function () {
                //clear out old 
                $('#SelectedItems').html('');
                var selectedData = $('#demo').data('MoverBoxes').NotSelectedValues();

                //for each element in the array we will add to the listbox.
                for (var i in selectedData) {
                    var li_item = document.createElement("li");
                    $(li_item).html(selectedData[i])
                    $('#SelectedItems').append(li_item);
                }
            });
        });

CSS:

.MoverBox { margin: 10px; width: 150px; padding: 5px; height:200px !important; }
    .MoverBox-label{ display:block; font-weight:bold; padding:10px 10px 0px 10px;}
    #moveLeft { width:30px;}
    #moveRight { width:30px;}
    #moveLeftAll { width:30px;}
    #moveRightAll { width:30px;}
    #SelectedItems li { float:left; }

Option	Description
dataleft	Array: The items to be displayed in the left side listbox.
dataright	Array: The items to be displayed in the right side listbox.
size	int: controls the height of the boxes.
leftLabel	string: The label at the top of the left box.
rightLabel	string: The label at the top of the right box.

PS:這裡的Option: Size，會讓2個listbox高度變動，所以固定了height:200px。

參考：

Mover Box- https://github.com/kgaddy/Jquery.MoverBoxes