brite
Version:
DOM Centric Minimalistic MVC Framework
88 lines (70 loc) • 2.65 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>briteUITest - nested view popup</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 ****** -->
<script type="text/javascript" src="js/Popup.js" ></script>
<script type="text/javascript" src="js/AddTaskPopup.js" ></script>
<link rel="stylesheet" href="css/Popup.css"/>
<style type="text/css">
#message{
margin: 32px;
height: 64px;
width: 600px;
border: solid 1px #ddd;
}
</style>
<!-- The UserListView Component -->
<script type="text/javascript">
$(function(){
$("#raw-popup-btn").on("click", function(){
brite.display("Popup");
});
$("#add-item-btn").on("click", function(){
brite.display("AddTaskPopup").done(function(addTaskPopup){
addTaskPopup.onOk(function(data){
$("#message").html("Will create task with title: " + data.title);
});
addTaskPopup.onCancel(function(){
$("#message").html("Add Task Popup cancelled");
})
});
});
});
</script>
</head>
<body>
<h2>Nested Popup / AddTaskPopup</h2>
<button id="raw-popup-btn">Raw Popup</button>
<button id="add-item-btn">Add Task Popup</button>
<div id="message"></div>
<!-- ********* Handlebars Inline Template ********* -->
<script id="tmpl-AddTaskPopup" type="text/html">
<header>Add Item</header>
<section class="content">
<form>
<div class="form-group">
<label>Task Title</label>
<input name="title" class="form-control" placeholder="Enter task title">
</div>
</form>
</section>
<footer>
<button class="btn btn-default action-cancel">Cancel</button>
<button class="btn btn-primary action-ok">Add Item</button>
</footer>
</script>
<!-- ********* /Handlebars Inline Template ********* -->
</body>
</html>