john1992on,
Вот набыдлокодил вам по-быстренькому
<div id = "#wrapper"></div>
<style type = "text/css">
.normal{
color: gray;
}
.hvr{
color: green;
}
.act{
color: red;
}
</style>
<script type = "text/javascript">
function Tumbler(elem, quantity, pacific, hovered, active){
if(!elem) return;
quantity || (quantity = 1);
pacific || (pacific = "");
hovered || (hovered = "");
active || (active = "");
var elems = this.elems = [];
function makeHovered(){
if(!(this.className == active)){
this.className = hovered;
}
}
function removeHovered(){
if(!(this.className == active)){
this.className = pacific;
}
}
function makeActive(){
this.className = this.className == hovered ? active : hovered;
for(var i = 0, l = elems.length; i < l; i ++){
if(elems[i] === this){
continue;
}
if(elems[i].className == active){
elems[i].className = pacific;
}
}
}
for(var i = 0; i < quantity; i ++){
this.elems[i] = document.createElement(elem);
this.elems[i].className = pacific;
this.elems[i].onmouseover = makeHovered;
this.elems[i].onmouseout = removeHovered;
this.elems[i].onclick = makeActive;
}
}
Tumbler.prototype.getAll = function(){
var f = document.createDocumentFragment();
for(var i = 0, l = this.elems.length; i < l; i ++){
f.appendChild(this.elems[i]);
}
return f;
}
var buttons = new Tumbler("BUTTON", 5, "normal", "hvr", "act");
for(var i = 0, l = buttons.elems.length; i < l; i ++){
buttons.elems[i].innerHTML = "button " +i;
}
function byId(id){
return document.getElementById(id);
}
byId("#wrapper").appendChild(buttons.getAll());
</script>
можете наполнить протитип методами какими вдумается, css-классы свои нарисуйте, а лучше вообще по-своему сделайте, я просто набросал не подумав, если js будет выключен то кнопок не будет) ну или переделайте конструктор чтобы он ел узел или выборку.
И да про JQuery, у меня нет никакого принципа типа Jquery плохо, я считаю это гениальным изобретением, но пользоваться ей не вижу смысла(может, пока-что), и не хочу повторить судьбу тех, кто блестяще запомнил все методы и плюшки в ней, но нативных методов не знает и вообще не представляет как работает все в JS, или задает потом вопросы, а как мне в Jquery Регулярное выражение использовать?,
Вот когда смогу сам такую написать, то буду пользоваться, и то своей.
И наконец )) не знаю я Jquery, так что простите