Статическое HTML-меню - PullRequest
2 голосов
/ 16 мая 2011

Вместо обычных выпадающих меню мне нужно статическое меню, в котором пользователи могут переключать скрытое / видимое состояние, а пользовательский интерфейс должен помнить это состояние.

Меню слева и должно выглядеть так:

  Link
> Menu
v Open Menu
    Sub Menu

Это означает, что при переходе назад и вперед в истории браузера должно восстанавливаться состояние меню, которое было на момент оставления страницы. Изменения в меню не должны регистрироваться в истории браузера, должны только клики по реальным ссылкам.

Ответы [ 2 ]

2 голосов
/ 16 мая 2011

Полагаю, вы можете назвать это «представлением дерева».

Для того, чтобы получить веб-элемент управления, подобный древовидному, на стороне клиента, вам нужен JavaScript, потому что raw (X) HTML и CSS не имеют к этому никакого отношения.

Если вышанс использовать библиотеку JavaScript, вы хотели бы знать, что jQuery имеет много плагинов, выполняющих такую ​​задачу.Ищите их в Google, и вы найдете что-то вроде этого:

Другая тема о государственном управлении, я полагаю, вам нужно Тейлорваше собственное решение, и, похоже, у вас будет два варианта:

  • на стороне клиента : с помощью файлов cookie вы можете хранить некоторые JSON, представляющие иерархию древовидного представления и отмечая каждыйуровень и элемент с логическими значениями, так что вы можете перебирать это дерево и восстанавливать состояние при обновлении страницы и обратной передаче.

  • На стороне сервера : вряд ли у меня будет шансдля предложения конкретного решения, потому что я не знаю, какую серверную технологию вы сейчас используете в своем проекте, но вам нужно будет имитировать клиентское решение в логике вашего сервера, сохраняя такую ​​иерархию в каком-то состоянии сеанса или представленияуправлять и отправлять такие JSON клиентского решения, но с сервера, и выполнять некоторую функцию восстановления JavaScript состояния клиента.

1 голос
/ 16 мая 2011

Если вы хотите очень простое древовидное меню с JavaScript, попробуйте этот код.

<html>
<head>
<title>Sample HTML Tree Menu</title>
<style type="text/css">
a {
  color: black;
  text-decoration: none;
}
div {
  display: inline-block;
  _display: inline;
}
</style>
<script language="JavaScript">
//<![CDATA[
function treeMenu(treeName) {
  branch = document.getElementById(treeName + "_branch").style;
  icon = document.getElementById(treeName + "_icon")
  if(branch.display == 'none') {
    branch.display = "block";
    icon.innerHTML = "v";
  } else {
    branch.display = "none";
    icon.innerHTML = ">";
  }
}
//]]>
</script>
</head>
<body>
<a href="javaScript:treeMenu('menu1')"><div id="menu1_icon">&gt;</div> Menu 1</a><br/>
<div id="menu1_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu2')"><div id="menu2_icon">&gt;</div> Menu 2</a><br/>
<div id="menu2_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu3')"><div id="menu3_icon">&gt;</div> Menu 3</a><br/>
<div id="menu3_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...