Skip to content

Instantly share code, notes, and snippets.

@forcen
Last active Aug 29, 2015
Embed
What would you like to do?
Basic tag library
<html>
<head>
<title>
Tag library sample
</title>
<style type="text/css">
body{margin:0;padding:0}
.tag-header{background:gray;height:30px;text-align:center;color:white;margin:0 0 12px 0;padding:12px;}
.tag-header h1{font:bold 24px Helvetica;margin:0;padding:0;}
.tag-content{text-align:center;padding:0 16px}
.tag-content button{display:block;margin:16px auto;padding:12px;border-radius:8px;font:bold 18px Helvetica;width:100%;}
</style>
</head>
<body>
<div id="one" tag-role="header">
<h1>Test</h1>
</div>
<div tag-role="content">
<button id="first" tag-click="btnAlert">Click Me</button>
<button id="second" tag-click="btnAlert">Click Me Too</button>
</div>
</body>
<script>
function btnAlert (objItem) {
alert(objItem.id);
}
var libTag = {
applyStyles: function () {
var arrElements = document.getElementsByTagName('div'),
numElements = arrElements.length,
strRole, i;
for(i = 0; i < numElements; i++) {
strRole = arrElements[i].getAttribute('tag-role');
if(strRole) {
arrElements[i].setAttribute('class', 'tag-' + strRole);
}
}
},
createClickListener: function (strController, objItem) {
objItem.addEventListener('click',
function () {
if(window[strController] && typeof window[strController] === 'function') {
window[strController](objItem);
}
},
false);
},
applyControllers: function () {
var arrElements = document.getElementsByTagName('*'),
numElements = arrElements.length,
strController,
i;
for(i = 0; i < numElements; i++) {
strController = arrElements[i].getAttribute('tag-click');
if(strController) {
this.createClickListener(strController, arrElements[i]);
}
}
}
};
(function () {
libTag.applyStyles();
libTag.applyControllers();
}());
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment