attr-chooser
v2.0.0
Published
select among a list of dom elements with the same attribute
Downloads
9
Readme
attr-chooser
select among a list of dom elements with the same attribute
example
First write some html with a chooser attribute (or whatever you want) on the
items you want to select:
<html>
<head>
<style>
.item {
cursor: pointer;
width: 200px;
padding: 2px;
}
.item:hover {
background-color: rgb(200,200,230);
}
.item.active {
background-color: rgb(150,150,250);
color: white;
}
</style>
</head>
<body>
<div id="items">
<div class="item" x-chooser="item">one</div>
<div class="item" x-chooser="item">two</div>
<div class="item" x-chooser="item">three</div>
<div class="item" x-chooser="item">four</div>
</div>
<script src="bundle.js"></script>
</body>
</html>Then wire up some browser code:
var choose = require('attr-chooser')('active', function (elem) {
console.log('selected', elem.textContent);
});
var elems = document.querySelectorAll('*[x-chooser]');
for (var i = 0; i < elems.length; i++) {
choose(elems[i]);
}or you can use attractor:
var scope = {
item: function (elem) {
console.log('selected', elem.textContent);
}
};
var attr = require('attractor')({
'x-chooser': [ require('attr-chooser'), 'active' ]
}, scope);
attr.scan(document);Compile your browser code with browserify:
$ browserify browser.js > bundle.jsmethods
var chooser = require('attr-chooser')var choosef = chooser(className, cb)
Return a function choosef(elem, attrName) that you should call on every
element you want to wire up for item selection.
When somebody clicks on an element,
cb(elem, ev, name) fires with the dom element elem, the click event ev,
and the group name set in the attribute value.
choosef(elem, group)
Create a group based on the group string for the dom element elem.
install
With npm do:
npm install attr-chooserlicense
MIT