Я решил создать эту тему после того, как реализовал закладочный интерфейс на JS и DOM.
Цель этой темы - повысить качество моего кода и предоставить рабочий вариант интерфейса всем, кому он может пригодиться.
Пример можно посмотреть тут:
http://presstrack.ru/test/
имя: admin
пароль: AtmoR1
Код я буду выкладывать этапами, что бы в нем было проще разобраться.
P.S. Возможно уже имеются подобные варианты сделанные лучше, пусть так. Но, я написал этот код сам, и хочу полностью понять, как подобные вещи нужно правильно реализовывать. И еще, не судите строго, подобными делами я занимаюсь, если не в первый раз, то во второй.
И так, часть первая.
Необходимо создать два слоя: один - рабочий слой, второй для закладок.
<div id="index_div"></div>
<div id="tab_div"></div>
Далее нужно сделать несколько ссылок, по нажатию на которые, будут создаваться новые(рабочие) слои и вставляться в index_div
<a href="#" id="slk1" name="slk1" onclick="cr_el('new_div1','Добавить контрагента');"> Добавить контрагента</a>
<a href="#" id="slk2" name="slk2" onclick="cr_el('new_div2','Добавить продкцию');"> Добавить продкцию</a>
<a href="#" id="slk3" name="slk3" onclick="cr_el('new_div3','Добавить материал');"> Добавить материал</a>
Функция cr_el() принимает первым параметром имя слоя, а вторым его заголовок.
Теперь сама функция создающая слои:
function cr_el(div_name, slk_name)
{
var index_div = get('index_div'); // основной слой
var tab_div = get('tab_div'); //Слой с закладками
var test = get(div_name); //текущий слой
// Создаем новый(рабочий) слой, если он еще не создан
if(test == null)
{
var div = document.createElement('div'); //основной слой
div.setAttribute("id", div_name);
div.setAttribute("class", "new_div");
div.style.backgroundColor = "#dddddd";
// Слой закрывающий рабочий при нажатии
var div_close = document.createElement('div');
div_close.setAttribute("id", "close_" +div_name);
div_close.setAttribute("class", "div_close");
div_close.setAttribute("onmouseup", "close_div('" +div_name +"');");
// Добавляем рабочий слой на страницу
index_div.appendChild(div);
// Создаем новую закладку
var tab = document.createElement('div');
tab.setAttribute("id", "tab" +div_name);
tab.setAttribute("onclick", "cr_el('" +div_name +"','');");
// Добавляем закрывающий слой в закладку
tab.appendChild(div_close);
// Добавляем закладку на страницу
tab_div.appendChild(tab);
// Добавляем текст в закладку
var tab_text = document.createTextNode(slk_name);
tab.appendChild(tab_text);
}
}
Жду Ваших комментариев
Спустя 37 минут, 34 секунды (11.03.2010 - 19:06) qpayct написал(а):
а тебе нужно сохранять какие то данные или при обновлении страницы всё заново?
Спустя 27 минут, 29 секунд (11.03.2010 - 19:33) ApuktaChehov написал(а):
Пока при обновлении все заново.
До сохранения еще дойдем.
До сохранения еще дойдем.
Спустя 8 минут, 15 секунд (11.03.2010 - 19:41) qpayct написал(а):
ну если дойдём, тогда лучше сразу в ООП классифицируй. я вот тоже сейчас начинаю думать о первом своём классе на JavaScript . для меню нужен
Спустя 19 часов, 33 минуты, 36 секунд (12.03.2010 - 15:15) ApuktaChehov написал(а):
Так как комментариев больше нет, продолжаем.
Теперь при нажатии на наши ссылки, будут создаваться и вставлять в страницу новые слои. А значит, нам нужно сделать, что бы при создании нового слоя, он становился активным, а все остальные слои скрывались, при этом вкладки должны работать так же, но только не скрываться, а менять свой стиль.
Я реализовал это на цикле, который пробегает по всем слоям страницы и сравнивает их имена с тем именем, которое я передал ему при нажатии на ссылку. Когда цикл находит совпадение переданного имени слоя с существующим на странице, он делает его активным, а все остальные слои скрывает.
Теперь при нажатии на наши ссылки, будут создаваться и вставлять в страницу новые слои. А значит, нам нужно сделать, что бы при создании нового слоя, он становился активным, а все остальные слои скрывались, при этом вкладки должны работать так же, но только не скрываться, а менять свой стиль.
Я реализовал это на цикле, который пробегает по всем слоям страницы и сравнивает их имена с тем именем, которое я передал ему при нажатии на ссылку. Когда цикл находит совпадение переданного имени слоя с существующим на странице, он делает его активным, а все остальные слои скрывает.
/**
* Определеяем общее кол-во ссылок меню существующие на странице,
* определяя, что предположительно на странице имеются столько же слоев
*/
function total_slk()
{
var st_pos = 1;
while( get( 'slk' +st_pos ) !== null )
{
var total_slk = st_pos;
st_pos++;
}
return total_slk;
}
//Цикл определяющий показ или скрытие основных слоев(рабочий и закладки)
for(i = 1; i<=total_slk(); i++)
{
//Если слой существует, обрабатываем его
if(get('new_div' +i) !== null)
{
var div_showhide = get('new_div' +i);
var tab_showhide = get('close_new_div' +i);
//Циклом проходим по всем существующим слоям
//Если имя нажатого слоя совпадает с именем слоя в цикле,
//тогда его нужно показать, а остальные слои скрыть
if(div_name == 'new_div' +i)
{
div_showhide.style.display = 'block';
tab_showhide.style.display = 'block';
//Активируем закладоку, задав ей стиль
var div_tabb = get('tabnew_div' +i);
div_tabb.setAttribute("class", "tab_active");
}else{
//Скрываем только те слои, которы раскрыты
if(get('new_div' +i).style.display == 'block')
{
div_showhide.style.display = 'none';
tab_showhide.style.display = 'none';
//Деактивируем вкладку, задав ей стиль
var div_tabb = get('tabnew_div' +i);
div_tabb.setAttribute("class", "tab_passive");
}
}
}
}
Спустя 12 минут, 11 секунд (12.03.2010 - 15:27) Nikitian написал(а):
Может проще скрыть все слои, например так: $(".items").hide(); А потом по идентификатору открыть нужный: $(".items[name='myitem']").show();
//Извините, не понял что такое имя слоя, поэтому принял как параметр элемента.
//Извините, не понял что такое имя слоя, поэтому принял как параметр элемента.
Спустя 56 минут, 43 секунды (12.03.2010 - 16:24) ApuktaChehov написал(а):
Скрыть все слои проще, но лишняя трата ресурсов. Потому, что в один момент активным может быть только один слой и соответственно, если переключаться на другой слой, скрытым нужно сделать только этот один, а не все слои, так как они и так скрыты.
Имя слоя, это id. При создании ему присваивается id = имя слоя.
Имя слоя, это id. При создании ему присваивается id = имя слоя.
Спустя 1 день, 9 часов, 28 минут, 21 секунда (14.03.2010 - 01:52) ApuktaChehov написал(а):
И так, продолжаем.
На данном этапе мы можем создавать вкладки и переключаться между ними. Теперь, нужно организовать их удаление(закрытие).
Тут я использовал тот же DOM - шикарная вещь
На данном этапе мы можем создавать вкладки и переключаться между ними. Теперь, нужно организовать их удаление(закрытие).
Тут я использовал тот же DOM - шикарная вещь
/**
* Функция для удаления слоев
* принимает единственный аргумент - имя слоя
* и сносит его и его закладку.
*/
function close_div(div_name)
{
var div_showhide = get(div_name);
var tab_showhide = get("tab" +div_name);
var index_div = get('index_div'); // Основной слой
var tab_div = get('tab_div'); //Слой с закладками
index_div.removeChild(div_showhide);
tab_div.removeChild(tab_showhide);
}
_____________