Многоуровневое меню
Запись от dark256 размещена 27.11.2015 в 00:10
Данный пост не есть декларация достижений,
а просьба наставить на истинный путь велосипедостроителя
Итак. Очередной раз возникла у меня необходимость сгенерить N-уровневое меню.
До настоящего момента такие конструкты в моей жизни случались, но все
как-то на колене и по-быстрому. А тут захотелось глобального универсального
мегагенератора. Структура меню выглядит так:
Как можно легко заметить невооруженным взглядом, тут 3 уровня вложенности.
На текущий момент мне этого достаточно, но хотелось именно N уровней.
Произвольное, стало быть, количество.
Задать генерацию хотелось максимально простым для взгляда способом.
Без ручной индексации элементов и буллетов. WYSIWYG, тк скть.
Мы просто пишем ДОБАВИТЬ, такой-то текст, на такой-то уровень ( lvl )
и что он делает ( par ). При этом последовательность строк кода задает
последовательность расположения элементов в меню без дополнительных телодвижений.
п.1. Как избавиться от задания уровня - я не придумал. Кроме как вкладывать вызовы друг в друга, но
это сразу становилось нечитаемым. Оставил так. Вроде не сильно режет глаз.
п.2. par -
клиент просит "поиграться" фонтами и т.п. Тут уж вандалоустойчивость в чистом виде и
этот аппендикс
Итак, садимся и пишем от руки "код":
Код:
addMenuIt( my_menu, { lvl:0, dsc:"История операций, выписки", lvl:0 } ) addMenuIt( my_menu, { lvl:1, dsc:"История операций", par:function(){} } ) addMenuIt( my_menu, { lvl:1, dsc:"Выписка по карточному счету", par:function(){} } ) addMenuIt( my_menu, { lvl:1, dsc:"История заявлений", par:function(){} } ) addMenuIt( my_menu, { lvl:0, dsc:"Карты и счета" } ) addMenuIt( my_menu, { lvl:1, dsc:"Карты и счета" } ) addMenuIt( my_menu, { lvl:2, dsc:"Услуги", par:function(){} } ) addMenuIt( my_menu, { lvl:2, dsc:"Информация", par:function(){} } ) addMenuIt( my_menu, { lvl:2, dsc:"Карты (Если выбран карточный счет)", par:function(){} } ) addMenuIt( my_menu, { lvl:2, dsc:"Платежные реквизиты", par:function(){} } ) addMenuIt( my_menu, { lvl:1, dsc:"Заявления", par:function(){} } ) addMenuIt( my_menu, { lvl:2, dsc:"Заявка на кредит", par:function(){} } ) addMenuIt( my_menu, { lvl:2, dsc:"Заявка на кредитную карту", par:function(){} } ) ....
Далее, перед тем как это рисовать, выводить, обрабатывать и вообще юзать, это куда-то надо
записать. Да? Ну, вроде да. Думаем структуру данных. Иерархия данного объекта
привиделась мне такой:
Элемент меню, описуха, фишки, плюс массив элементов следующего уровня...
Ну, допустим. Сажусь кодить, имея в виду всяческие красивые рекурсивные вызовы и...
И тут не выходит ничего и получается такой вот уродец:
// Ну понятно. Тут лежат эл-ты 1-го уровня. var my_menu:Array = new Array() // Массив ИНДЕКСОВ... ох... вложенности уровней... бррр..... // Типа Добавляем эл-т ур1. //1,0,0 // Добавляем к нему суб уровень //1,1,0 // Еще туда же //1,2,0 // Добавляем суб к субу //1,2,1 //Добавляем эл-т ур1. //2,0,0.... как-то так.... var mindx:Array = new Array(0,0,0,0,0) function addMenuIt( arr, DAT ){ switch ( DAT.lvl ){ case 0: // При обнаружении эл-та 1-го уровня обнуляем счетчики вложений всех последующих уровней mindx[ DAT.lvl+1 ] = 0 mindx[ DAT.lvl+2 ] = 0 mindx[ DAT.lvl+3 ] = 0 arr[ mindx[ 0 ] ] = new Object( DAT ) break; case 1: var NODE = arr[ mindx[0]-1 ] // Аналогично, но кроме уровня родителя mindx[ DAT.lvl+1 ] = 0 mindx[ DAT.lvl+2 ] = 0 // Если блока данных субменю нет - создаем if ( NODE.SUB == undefined ) NODE.SUB = new Array() //И пихаем в него аналогичную ветку для последующих уровней меню NODE.SUB.push( DAT ) break; case 2: var NODE = arr[ mindx[0]-1 ].SUB[ mindx[1]-1 ] // Аналогично! :) mindx[ DAT.lvl+1 ] = 0 // Если блока данных субменю нет - создаем if ( NODE.SUB == undefined ) NODE.SUB = new Array() NODE.SUB.push( DAT ) break; } // Увеличиваем счетчик текущего уровня меню mindx[ DAT.lvl ] ++ }
По идее, кейс можно до посинения укопипащивать в бесконечность, путем дописывания
arr[ mindx[0]-1 ].SUB[ mindx[1]-1 ].SUB[ mindx[2]-1 ].SUB[ mindx[3]-1 ]....SUB[ mindx[N]-1 ]
Но, естественно, это безобразная гадость.
С рекурсивной отрисовкой полученного объекта, как ни странно, проблем не возникло.
function buildMenu( DAT ){ trace("■ buildMenu") var ct = 0 var yPos = DAT.Y var dest = DAT.TARG.createEmptyMovieClip( "dest", DAT.TARG.getNextHighestDepth() ) function addMItem( iDat, PT ){ var obj = dest.attachMovie( "menu"+iDat.lvl,"menu"+ct, dest.getNextHighestDepth() ) ct++ obj._x = DAT.X + DAT.xShift*iDat.lvl obj._y = yPos obj.cap.text = PT+". "+iDat.dsc//+". "+ct yPos += 18 if ( iDat.SUB != undefined ) for ( var j=0; j<iDat.SUB.length; j++ ) addMItem( iDat.SUB[j], PT+"."+(j+1) ) } for ( var i=0; i<DAT.STRUCT.length; i++ ){ addMItem( DAT.STRUCT[i], (i+1) ) } }
menuBuilder2.rar
Всего комментариев 17
Комментарии
27.11.2015 14:57 | |
А если вот так хранить меню?
Первый пункт Второй пункт *Вложенный пункт **Вложенный во вложенный **Второй вложенный во вложенный *Второй вложенный Третий пункт |
27.11.2015 15:54 | |
Погоди addMenuIt это что не функция в коде что ли? Строчки меняются. Короче добавляй ИД и парентИД. И будет тебе вообще все списком.
|
27.11.2015 16:50 | |
Ну смотри.... Общая идея и задача - максимально простой и интуитивно понятный генератор структуры данных.
Если следовать указаниям тебя и Тигры: я прописал все уровень-, парент- и суб- айди. Работает. Показал клиенту........... Он репу почесал и предложил переставить пункты меню местами. На коленке, быстро за 6 сек. Потом еще раз. Потом опять. Переписывать переиндексировать переделывать блок данных? И переподписывать лэйблы с пересчитыванием буллетов? Я же просто меняю местами addMenuIt и: Было: http://dark256.space/HALK/S1.JPG Стало: http://dark256.space/HALK/S2.JPG Программирования в данном случае как такого не производится |
|
Обновил(-а) dark256 27.11.2015 в 17:10
|
27.11.2015 18:57 | |
Да тебе даже пересобирать не надо будет, просто текстовый файлик рядом поправил и все - красота. А так сажаешь клиента на твою поддержку.
|
28.11.2015 00:56 | |
Ох.... не могу я донести свою мысль до умов... не могу......
Я спросил - как рекурсивно или как еще сгенерить структуру данных описания.... Выждем..... |
09.12.2015 21:34 | |
Обычный шаблон Composite. И Тигра умница по поводу depth. Впрочем, как обычно. Кору не читал, наверное опять грубит.
|
10.12.2015 15:03 | |
dimarik - чей то грублю то сразу? ))) Наоборот было весело)
|
Последние записи от dark256
- Многоуровневое меню (27.11.2015)
- О многоядерности. (21.03.2013)
- Равномерное распределение в полярных координатах. (07.12.2012)
- CS3 Crash (29.06.2011)
- Отладка по-темному (01.02.2011)