Kendo UI

jQuery + Kendo UI + MockJax

by burkeholland

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://www.kendoui.com/docs/default-source/script/kendo-youtube.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<div class="container">
    <div class="center">
        <div id="youtube" data-role="youtube" data-template="template"></div>
    </div>
</div>

<script type="text/x-kendo-template" id="template">
    <div style="padding: 10px;">
        <div style="float: left;">
            <a href="\#" data-id="#= id #" data-title="#= title #" class="k-youtube-popup">
                <img height="90" width="120" src="#= thumbnail.sqDefault #" alt="thumbnail"/>
            </a>
        </div>
        <div style="margin-left: 130px; height: 90px;">
            <h4 style="margin: 2px">
                <a href="#= player.default #" target="_blank">#= title #</a>
            </h4>
            <div style="font-size: .8em">
                <p>#= description #</p>
            </div>
        </div>
    </div>
</script>

<script type="text/x-kendo-template" id="popup"><iframe width='640' height='480' src='http://www.youtube.com/embed/#= data #?rel=0' frameborder='0'></iframe>
</script>

CSS

.container {
    padding-top: 10px;
}

.center {
    width: 650px;
    margin: auto;
}

h2 {
    font-size: 2em;
    font: "Helvetica";
}

JavaScript

// create the popup window for the result

var win = $("<div></div>").kendoWindow({
    visible: false,
    modal: true,
    deactivate: function(e) {
        $(this.element).html("");
    }
}).data("kendoWindow");

popupTemplate = kendo.template($("#popup").html());

$(".container").on("click", ".k-youtube-popup", function(e) {

    var id = $(e.currentTarget).data("id");
    var title = $(e.currentTarget).data("title");

    win.content(popupTemplate(id));
    win.title(title);
    win.center();
    win.open();
    
    e.preventDefault();
});

kendo.bind($(".container"));