hugh
/
select2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="qunit-1.14.0.css">
    <script src="jquery-2.1.0.js" type="text/javascript"></script>
    <script src="jquery.sortable.js" type="text/javascript"></script>
    <script src="decorators.js"></script>


    <script>


        $(function () {

            var Selection = clazz(Object, {
                construct: function () {
                    this.data = ["value1", "value2"]
                },
                render: function () {

                    var markup = "<ul>";
                    for (var i = 0; i < this.data.length; i++) {
                        markup += "<li>" + this.renderItem(this.data[i]) + "</li>";
                    }
                    markup += "</ul>";
                    return markup;
                },
                renderItem: function (item) {
                    return item;
                },
                bind: function (container) {
                    $(container).on("click", "li", function () {
                        alert("clicked: " + $(this).text());
                    })
                }
            });

            var ClearExtension = clazz(Object, {
                construct: function (opts) {
                    this.opts = opts;
                },

                renderItem: function (item) {
                    var markup = this.decorated(item);

                    if (this.opts.position === "right") {
                        markup += " <a href='#' class='clear'>x</a>";
                    } else {
                        markup = " <a href='#' class='clear'>x</a>" + markup;
                    }
                    return markup;
                },
                bind: function (container) {
                    this.decorated(container);
                    container.on("click", "a.clear", function (e) {
                        alert("clear: " + $(this).parents("li").text());
                        e.stopPropagation();
                    });
                }
            });

            var SortableExtension = clazz(Object, {
                bind: function (container) {
                    this.decorated(container);
                    $(container).find("ul").sortable().bind('sortupdate', function () {
                        alert("sorted");
                    });
                }
            });

            var FooterExtension=clazz(Object, {
                render: function() {
                    return this.decorated()+"<div>I am a footer</div>";
                }
            });

            var selection = new Selection();

            selection
                    .decorateWith(new ClearExtension({position: "right"}))
                    .decorateWith(new SortableExtension())
                    .decorateWith(new FooterExtension());

            var markup = selection.render();
            $("#container").html(markup);
            selection.bind($("#container"));

        });

    </script>


</head>
<body>


<div id="container"></div>


</body>
</html>