[Gozar]

fj - сокращение от fiji

Конструктор html элементов. Фреймворк. Не описаны в документации динамическое добавление и удаление вложенных элементов и мало тестовых примеров. Нашлепаю в ближайшем будущем.

Суть:
Добавляем шаблон. Указываем: методы работы с шаблоном, стили, родителя к которому крепить элемент, обработчики. Есть встроенная модель.

Пример файла pages.js

/js/min/fj.min.js  //взять с git
/css/fj-pages.css  //нарисовать свои стили

var gui,
    totalPages,
    dataPages = [],
    i;

gui = new fj();

totalPages = 14; // количество кнопок

for (i = 1; i <= totalPages; i += 1) {
    dataPages.push({page: i});
}

gui.addElement({
    pages: {
        tpl: '<div class="fj-pages-block {cls}" data-fj-id="{this.id}" data-fj-name="{name}" style="{style}">\
                  <ul class="fj-pages-link">\
                      <li class="fj-pages-range">Страница {from} из {total}</li>\
                      % foreach %\
                          <li class="fj-pages" data-fj-item="page">{data.page}</li>\
                      % foreach; %\
                  </ul>\
              </div>'
    }
});

gui.ui({
    type: 'pages',
    name: 'pages',
    parent: '#pages-wrap',
    from: 1,
    total: totalPages,
    data: dataPages,
    dataEvents: {
        click: function () {
            var page = this.innerHTML;
            console.log(page);
        }
    }
});