<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
script
src
=
"../common/libs.js"
></
script
>
</
head
>
<
body
class
=
"no-top-bar"
>
<
script
class
=
"demo-js"
>
$(document).ready(function () {
"use strict";
// Tnitialize taskbar and
$(".taskbar").taskbar();
// Initialize window
$(".window").window({
title: "Draggable or resizable",
containment: "visible",
width: 500,
height: 300,
// Logs all events
dragStart: function (event, ui) {
demo.log("dragStart");
},
drag: function (event, ui) {
// Log drag event
if (Math.random() <
0.05
) {
demo.log("drag");
}
},
dragStop: function (event, ui) {
// Logs event when the drag is stopped
demo.log("dragStop");
},
resizeStart: function (event, ui) {
demo.log("resizeStart");
},
resize: function (event, ui) {
// Log resize event
if (Math.random() < 0.05) {
demo.log("resize");
}
},
resizeStop: function (event, ui) {
demo.log("resizeStop");
},
});
// Containment change value is saved
$(".switch-containment").on("click", function () {
var containment = $(".window")
.window("option", "containment");
// When the value is toggled
containment
= containment ===
"viewport" ? "visible" : "viewport";
// Setting the new value
$(".window").window("option",
"containment", containment);
// Button click value is set
$(this).find("span.state")
.text("\"" + containment + "\"");
}).button();
});
</script>
<
div
class
=
"demo-html"
>
<
div
class
=
"taskbar"
></
div
>
<
div
class
=
"window"
></
div
>
<
div
class
=
"demo"
>
<
div
class
=
"description"
>
Window drag and resize
events are triggered.
</
div
>
<
button
class
=
"switch-containment"
>
Switch containment (currently:
<
span
class
=
"state"
>"visible"</
span
>)
</
button
>
<
div
class
=
"log"
></
div
>
</
div
>
</
div
>
</
body
>
</
html
>