brite
Version:
DOM Centric Minimalistic MVC Framework
80 lines (64 loc) • 2.54 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>brite test - event - btap</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 ****** -->
<style>
.test-container{
padding: 20px;
border: solid 1px #ddd;
}
.test-container.on{
background: #ddffdd;
}
</style>
</head>
<body>
<p>UserAgent with touch events will use the "touchstart" event, others will use the tranditional "click" event.</p>
<h2>btap tests</h2>
<div>
<div id="test-container-1" class="test-container">
<div id="test-direct-button-1" type="button" class="btn btn-default">Direct bTap</div>
<div class="btn btn-default test-button">Delegate bTap</div>
<div id="test-direct-click-button-1" class="btn btn-default">Standard Click</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// we bind the row events to make sure it does not stop the other event
$("#test-container-1").on("mouseup",function(){
//console.log("test-container-1 mouseup");
});
// direct binding
$("#test-direct-button-1").on("btap",onButton);
$("#test-container-1").on("btap",".test-button",onButton);
// delegate binding
$("#test-container-1").on("btap",function(event){
var $container = $(event.target);
// change state only if the element clicked is the container
if ($container.hasClass("test-container")){
$container.toggleClass("on");
}
});
// make sure it behave the same than the btap
$("#test-direct-click-button-1").on("click",onButton);
function onButton(event){
var $button = $(event.target);
$button.toggleClass("btn-default");
$button.toggleClass("btn-success");
}
});
</script>
</body>
</html>