В предыдущей статье мы использовали easyui, чтобы создать структуру для страницы бэкэнд. Нажмите здесь, чтобы просмотреть его. В этом разделе мы в основном используем технологию EasyUI, чтобы просто внедрить меню бэкэнд. Сначала мы будем создавать простые функции и продолжать обогащать их позже.
1. Реализуйте левое меню
Сначала посмотрите на визуализации:
Мы можем нажать «Основные операции» и «другие операции», чтобы переключить параметры меню. В конкретных параметрах нажмите на разные соединения и будут отображаться справа. Давайте сначала сделаем меню слева.
Существует два основных содержимого меню слева: «Управление категориями» и «Управление продуктом». Мы знаем, что в предыдущем разделе структура фоновой страницы должна быть встроена в aindex.jsp, поэтому теперь нам просто нужно сделать эти две гиперссылки и поместить их в соответствующий div в aindex.jsp. Итак, мы сначала создаем новый файл temp.jsp в папке WebRoot в качестве временного файла разработки, потому что вы можете напрямую измерить его, написав здесь JSP. После того, как эффект будет доступен, скопируйте содержимое в соответствующее место в aindex.jsp.
Страница temp.jsp выглядит следующим образом:
<%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <cead> <%@ inclod {ширина: 200px; /*Граница: 1PX Solid Red;*/} #menu ul {list-style: none; Заполнение: 0px; поля: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Преобразовать тег A в элемент уровня блока сначала, чтобы установить ширину и внутреннее расстояние* / display: block; фоновый цвет: #00a6ac; Цвет: #fff; Заполнение: 5px; Текстовое декорация: нет; } #menu ul li a: Hover {founal-color: #008792; } </style> </head> <body> <div id = "menu"> <ul> <li> <a href = "#"> управление категорией </a> <li> <a href = "#"> Управление продуктом </a> </ul> </div> </body> </html>В Temp.jsp есть только две ссылки, инкапсулированные с LI и размещены в Div. Приведенный выше CSS устанавливает стиль для этих двух ссылок, а затем мы включаем Tomcat и проверяем эффект следующим образом:
После создания этих двух гиперссылок мы скопируем UL из инкапсулированных двух гиперссылок в положение отображения содержимого меню слева в aindex.jsp и кратко изменить его следующим образом:
Часть CSS может быть непосредственно перенесена в теги aindex.jsp. Посмотрите на тег A A, который содержит атрибут заголовка, а не HREF, потому что мы не прыгаем на новую страницу, потому что EasyUI - это просто эта страница, мы хотим поместить нажмите на вкладку на вкладку справа, поэтому мы сначала записываем действие Jump в атрибуте заголовка, а затем изменили его позже. Далее мы хотим нажать «Управление категорием», чтобы вспомнить функцию конкретных категорий на вкладке справа.
2. Реализуйте вкладку справа
Чтобы реализовать функцию щелчка на левой строке меню, чтобы вспомнить правую вкладку, вам необходимо добавить код JS. Идея использования easyUI: сначала нажмите на гиперссылку и получить имя гиперссылки, потому что заголовок вкладки всплывающего окна должен быть таким же, как и название гиперссылки, например «Управление категориями»; Затем определите, существует ли вкладка «Изменение имени», отобразите его, если оно существует, создайте его, если оно не существует, и отобразите контент, который будет отображаться. Давайте посмотрим на код в части JS:
<script type = "text/javascript"> $ (function () {$ ("a [title]"). click (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // Судите, есть ли соответствующая вкладка прямо сейчас, если ($ "#tt"). $ ("#tt"). Вкладки ("select", text); URL -адрес, но это только часть тела // href: 'send_category_query.action'}); </script> Давайте проанализируем этот код JS. Во -первых, получите метку. Обратите внимание, что этот тег - это тег с атрибутом заголовка, который является гиперссылкой «управление категорием» выше, а затем нажмите, а в щелчке есть еще одна функция. Что делает эта функция? Во -первых, получите имя текущей ссылки, то есть текст, а затем получите URL через атрибут заголовка (потому что мы только что написали URL в атрибут заголовка). Затем определите, есть ли опция (вкладка) для этого имени. Если есть, опция для этого имени будет отображаться, и если нет, создайте его.
Давайте посмотрим на заявление в if. Сначала используйте «#TT», чтобы получить объект jQuery справа, а затем вызовите метод построения вкладок, чтобы получить объект вкладки. Если есть, это вернет True, иначе он вернет ложь. Итак, что означают два параметра в Tabs ()? Прежде всего, первый параметр - это имя метода, а второй параметр - соответствующий параметр первого параметра (метод). Вкладки («существует», текст) означает называть метод существования EasyUI. Параметр - это текст, то есть определение того, существует ли вкладка с текстом имени. Аналогичным образом, следующие вкладки («Select», Text) означает выбрать вкладку с текстом имени для отображения, вкладки («Добавить», {}) означает создание новой вкладки, а некоторые свойства недавно добавленной вкладки добавляются в {}: заголовок означает название, закрыто: True означает, что есть кнопка закрытия, то есть форк в верхнем правом углу, а содержание означает, что содержание для отображения. Позже, содержимое страницы упаковано с тегом <iframe>. Эта страница не может быть доступна напрямую и перенаправлена через действие. Из имени действия можно увидеть, что оно представлено на странице Web-Inf/Category/Query.jsp. Если мы напишем что -то случайно в теге тела на странице, а затем нажмите на строку меню слева, контент будет отображаться на правой вкладке. следующее:
Наконец, поместите код в aindex.jsp здесь:
<%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <cead> <%@ inclod {ширина: 60px; /*Граница: 1PX Solid Red;*/} #menu ul {list-style: none; Заполнение: 0px; поля: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Преобразовать тег A в элемент уровня блока сначала, чтобы установить ширину и внутреннее расстояние* / display: block; фоновый цвет: #00a6ac; Цвет: #fff; Заполнение: 5px; Текстовое декорация: нет; } #menu ul li a: Hover {founal-color: #008792; } </style> <script type = "text/javascript"> $ (function () {$ ("a [title]"). click (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // Существует, есть ли соответствующая вкладка «Прямо сейчас, если ("#tt "). $ ("#tt"). Вкладки ("select", text); Адрес, но это только часть тела //href:'send_category_query.action '}); }); </script> </head> <body> <div data-options = "region: 'North', заголовок:« Добро пожаловать в yigou Backend Management ', Split: True "style =" Height: 100px; "> </div> <div Data-options =" Регион: "Запад", название: "Системная операция", split: true "> <!-System Menu отображается здесь-div Id =" Div ID "Div ID =" Div ID = "Div ID =" Div Id. data-options = "iconcls: 'icon-save'"> <ul> <li> <a href = "#"> Управление категорией </a> <li> <a href = "#"> Управление продуктами </a> </ul> </div> <div Data-options = "iconcls: 'icon-reload'"> <ul> <li> <li> <A hRef = "#/"#"#"#"#"#/#"#"#/" <li> <a href = "#"> Управление продуктом </a> </ul> </div> </div> </div> <div Data-options = "Region: 'Center', заголовок: 'Backend Operation Page'" style = "Padding: 1px; фон: #EEE;"> <div ID = "TT" options = "fit: true: div stile =" 10P-systemble: 10p-systemble: 10p-systems opporting: 10p-systems opporting: 10p-systems opporting: 10p-systems opporting: 10p-systems vomehding opporting: 10p-systems. Будущее (тип текущей операционной системы, доменное имя текущего проекта, конфигурация, связанную с оборудованием, или отчет о дисплее </div> </div> </div> </body> </html> Очевидно, что код не был извлечен, а CSS и JS смешаны на одной странице JSP. Это не имеет значения, он будет извлечен позже.
До сих пор мы завершили реализацию меню EasyUI. Здесь мы только завершили метод реализации, и конкретный отображаемый контент будет улучшен в соответствии с конкретными потребностями.
Адрес загрузки исходного кода всего проекта: //www.vevb.com/article/86099.htm
Оригинальный адрес: http://blog.csdn.net/eson_15/article/details/51297705
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.