JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.38.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20141.38.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.38.min.js"></script>
WijDialog with Custom Drawing
<br />
<br />
<input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')" />
<input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')" />
<div id="dialog" title="Basic dialog">
<br />
<p>
This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.
</p>
</div>
JavaScript
$(document).ready(function () {
$('#dialog').wijdialog({
autoOpen: true,
captionButtons: {
refresh: { visible: false }
}
});
//obtain the outest container of the dialog
var canvas = $("#dialog").data("wijmo-wijdialog").uiDialog;
//create the container where the line will be drawn in and append it to the dialog container.
var lineContainer = $("<div id='div1'></div>").appendTo(canvas);
//locate the line container so that it can be moved along with dialog.
lineContainer.css("position", "absolute");
lineContainer.css("left", "10px");
lineContainer.css("top", "50px");
lineContainer.css("width", "100px");
lineContainer.css("height", "20px");
// draw line by Raphael
var rpLine = Raphael(lineContainer[0], 100, 10).path("M0 0L100 0");
rpLine.attr("stroke-width", 10);
rpLine.attr("stroke", "red");
//draw line by html
var htLine = $("<div style='width:100px; height:10px; position:relative;background-color:blue'></div>");
htLine.appendTo(lineContainer);
});