Skip to content

Instantly share code, notes, and snippets.

@jiangtao

jiangtao/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save jiangtao/1950f338c63947487861 to your computer and use it in GitHub Desktop.
Save jiangtao/1950f338c63947487861 to your computer and use it in GitHub Desktop.
Download ZIP
jquery namespace test
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery namespace test</title>
</head>
<body>
<div id="container">
<div class="namespace1">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
<div class="namespace2">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</div>
<input class="button" type="button" value="Trigger NameSpace1" />
</body>
</html>
Raw
script.js
var state = 0;
var html = ['Trigger Namespace1', 'Trigger namespace2'];
$('input').bind('click', function(){
if(state == 0){
startNS1();
$('.namespace2 .box').off('.namespace2').css('color', '#000').each(function(i){
$(this).html('box' + (i + 1))
}); // stop NS2
state = 1;
}else{
startNS2();
$('.namespace1 .box').off('.namespace1').css('color', '#000').each(function(i){
$(this).html('box' + (i + 1))
}); // stop NS1
state = 0;
}
$(this).val(html[state]);
});
function startNS1() {
$('.namespace1 .box').on('click.namespace1', function(){
var index = $(this).index();
$(this).css('color', '#f00');
});
$('.namespace1 .box').on('mousemove.namespace1', function(){
var index = $(this).index();
$(this).html('moved' + index);
});
};
function startNS2() {
$('.namespace2 .box').on('click.namespace2', function(){
var index = $(this).index();
console.log(index);
$(this).css('color', '#00f');
});
$('.namespace2 .box').on('mousemove.namespace2', function(){
var index = $(this).index();
$(this).html('moved' + index);
});
}
Raw
style.css
body{margin: 0;padding: 0;}
[class^=namespace]{
margin-bottom:5px;
border-bottom:1px dashed #ccc;
}
[class^=namespace] .box{
height:30px;
line-height: 30px;
}
input{
outline: none;
}
.button{
display: inline-block;
padding:0px 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment