brite
Version:
DOM Centric Minimalistic MVC Framework
75 lines (59 loc) • 2.64 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>briteUITest - brite</title>
<!-- ****** Generic Test Includes ****** -->
<link rel="stylesheet" href="css/test.css"/>
<link rel="stylesheet" href="../others/bootstrap/css/bootstrap.css" />
<!-- only brite.js dependency -->
<script type="text/javascript" src="../js-dependencies/jquery.js" ></script>
<!-- include the brite.min.js in prod -->
<script type="text/javascript" src="../dist/brite.js" ></script>
<!-- some test utilities -->
<script type="text/javascript" src="../others/handlebars.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<!-- ****** /Generic Test Includes ****** -->
<!-- DialogPrompt Resources -->
<script type="text/javascript" src="js/DialogPrompt.js" ></script>
<link rel="stylesheet" href="css/DialogPrompt.css"/>
<!-- /DialogPrompt Resources -->
</head>
<body>
<h2>brite Dialog</h2>
<h3>Dialog</h3>
<button id="promptBut">Click for Popup</button>
<div id="promptAnswer" style="margin: 30px;border: solid 1px #dddddd;height: 30px;overflow:hidden;position:relative;">
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#promptBut").click(function() {
// Note: brite.display always return a jQuery Deferred that will get resolved with the component instance
// Note: the "parent" here is null so that we can give the "data" object. Dialog box have usually a fixed parent, which is defined in the registerView config.
var dfd = brite.display('DialogPrompt',null, {
title : 'Test Dialog',
prompt : 'Are you sure you want to continue?'
});
// when the display is done, then we register the onAnswer function callback.
dfd.done(function(dialog) {
dialog.onAnswer(function(result) {
$("#promptAnswer").text("You answered: " + result);
});
});
});
});
</script>
<!-- ********* Handlebars Inline Template ********* -->
<script id="tmpl-DialogPrompt" type="text/html">
<div class="DialogPrompt">
<h2>{{title}}</h2>
<p>{{prompt}}</p>
<div class="dialogPrompt-buttonbar">
<button class="cancel">Cancel</button>
<button class="ok">OK</button>
</div>
</div>
</script>
<!-- ********* /Handlebars Inline Template ********* -->
</body>
</html>