Инкапсуляция вложенных списков при динамической загрузке списка

Question

Я загружаю содержимое 3-уровневого выпадающего списка через базу данных (тот же проект, что и мои другие вопросы - очевидно, я просто изучаю язык, извините). я хочу, чтобы верхний уровень был похож на меню вкладок, с границей вокруг пространства под ним, где остальные списки спускаются. Но проверьте мой код:

<ul id="catsMenu">
    <cfloop query="getCats">
        <li><h2><span><cfoutput>#getCats.group_name#</cfoutput></span></h2>
            <ul>
                <cfloop query="getMain">
                    <li><cfoutput>#getMain.section_name#</cfoutput>
                        <ul>
                            <cfloop query="getDetail">
                                <li><a href="somelink"</a></li>
                            </cfloop>
                        </ul>
                    </li>
                </cfloop>
            </ul>
        </li>
    </cfloop>
</ul>

(мне нужен запрос getdetail, чтобы узнать, на какую ссылку он идет)

Я не могу понять, как бы я тогда создал прямоугольник вокруг всего раздела под ним. Должен ли я абсолютно позиционировать div, до или после этого списка кода? Не совсем уверен, как это сделать. Заранее спасибо за помощь.

РЕДАКТИРОВАТЬ: Это то, что я ищу:

---------------------------------
| Tab 1 | Tab 2 | Tab 3 | etc.. |
---------------------------------
-----DIV W/ BORDER---------------
|  /* dropdown stuff            |
|     goes inside here */       |
|                               |
|                               |
|                               |
-------DIV W/ BORDER------------

Answer 1

Эрик,

Если я правильно понял ваш вопрос, вы должны использовать теги cflayout и cflayoutarea.он может легко достичь того, что вы показали на картинке.

Эта ссылка показывает простой пример.

http://coldfusion -example.blogspot.com / 2009/03 /how-to-use-cflayout-with-cflayoutarea.html

Вы можете передать значение из одной cflayoutarea в следующую, используя область «request» и передав родительскую область макета через ColdFusion.navigate ().

надеюсь, это поможет

Answer 2

Рассматривали ли вы, например, использование jQuery и jQuery-UI? http://jqueryui.com/demos/tabs/

Если нет, то ваш код cf выглядит нормально, единственное, что вам нужно сделать, это немного поиграть с CSS. Например, первый UL будет иметь плавающее положение влево, чтобы выровнять его по остальной части страницы, внутри элементов списка будет иметь плавающее положение, а также отображать inline и некоторые отступы, ширину, высоту и т. Д.

Вот примеры http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/ http://daniel.glazman.free.fr/weblog/targetExample.html#others (используйте firebug, чтобы увидеть, как это делается)

Если я правильно понял ваш вопрос ...