Изменение порядка пунктов в меню
Привет, может кто-нибудь подсказать как сделать на jquery такой механизм?
Имеем меню с несколькими пунктами: -Главная -Раздел 1 -Раздел 2 и т.д. При клике, например, на "Раздел 1", он перемещается вверх в списке меню, т.е. изменяется порядок меню: -Раздел 1 -Главная -Раздел 2 В jquery не шарю, помогите! |
vyrtime, ты хоть бы тестовый пример своего "меню" сделал...
|
искать надо в сторону сортировки таблиц
|
Вот такое меню:
<ul>
<li>
<ul>
<li>Раздел 1</li>
<li>Раздел 2</li>
<li>Раздел 3</li>
</ul>
</li>
<li>
<ul>
<li>Раздел 4</li>
<li>Раздел 5</li>
<li>Раздел 6</li>
</ul>
</li>
</ul>
Необходимо чтобы механизм работал только для конечных пунктов меню |
Цитата:
|
для объяснения механизма который мне нужен
а прикрутить к многоуровнему меню сам попробую |
vyrtime, так не понятно чего тебе сортировать. :) Первый уровень или второй внутри себя... Или второй уровень "сквозняком" через все элементы первого уровня...
Покажи какой хтмл хочешь получить из первого примера если куда-то клацнуть... |
Ок, щас попробую объяснить :write:
Меню выглядит так:
<ul>
<li>
<ul>
<li>Раздел 1</li>
<li>Раздел 2</li>
<li>Раздел 3</li>
</ul>
</li>
<li>
<ul>
<li>Раздел 4</li>
<li>Раздел 5</li>
<li>Раздел 6</li>
</ul>
</li>
</ul>
щелкнув, например, по пункту "Раздел 3" - он просто переместится наверх (поменяет позицию) и меню уже будет выглядеть вот так:
<ul>
<li>
<ul>
<li>Раздел 3</li>
<li>Раздел 1</li>
<li>Раздел 2</li>
</ul>
</li>
<li>
<ul>
<li>Раздел 4</li>
<li>Раздел 5</li>
<li>Раздел 6</li>
</ul>
</li>
</ul>
Теперь, например мы щелкнем по "Раздел 2", он также возьмет и переместиться на самую верхнюю позицию и меню будет выглядеть так:
<ul>
<li>
<ul>
<li>Раздел 2</li>
<li>Раздел 3</li>
<li>Раздел 1</li>
</ul>
</li>
<li>
<ul>
<li>Раздел 4</li>
<li>Раздел 5</li>
<li>Раздел 6</li>
</ul>
</li>
</ul>
Теперь щелкнув по "Раздел 3" он переместится опять же вверх и меню будет выглядеть так:
<ul>
<li>
<ul>
<li>Раздел 3</li>
<li>Раздел 2</li>
<li>Раздел 1</li>
</ul>
</li>
<li>
<ul>
<li>Раздел 4</li>
<li>Раздел 5</li>
<li>Раздел 6</li>
</ul>
</li>
</ul>
И т.д. Т.е. при клике не на первый в позиции меню пункт, а на другие пункты, они(пункты) будут перемещаться на первую позицию, а первый пункт в позиции будет просто съезжать/перемещаться вниз вместе с остальными пунктами. Тот же механизм должен работать у разделов 4,5,6. Надеюсь более менее объяснил:) |
Т.е. движение только внутри подраздела, так?
|
да
|
Ну как вариант...
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
</style>
<script type="text/javascript">
function Go(Obj) {
var o=Obj.parentNode
var oe=o.childNodes
var i
for (i=0; i<oe.length; i++) {
if (oe[i]==Obj) break
o.appendChild(oe[i])
}
}
</script>
</head>
<body>
<ul>
<li onclick='Go(this)'>Раздел 1</li>
<li onclick='Go(this)'>Раздел 2</li>
<li onclick='Go(this)'>Раздел 3</li>
</ul>
</body>
</html>
|
Вариант )))
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
</style>
<script type="text/javascript">
function Go(Obj) {
var o=Obj.parentNode
var oe=o.childNodes
if (Obj!=oe[0]) o.insertBefore(Obj,oe[0])
}
</script>
</head>
<body>
<ul id="ff">
<li onclick='Go(this)'>Раздел 1</li>
<li onclick='Go(this)'>Раздел 2</li>
<li onclick='Go(this)'>Раздел 3</li>
</ul>
</body>
</html>
|
рони, так лучше.
|
$("#menu").delegate("li", "click", fuction(){
if ( $(e.currentTarget).prev() ) {
$(e.currentTarget.parentNode).prepend($(e.currentTarget).remove());
}
})
'menu' - id верхнего уровня меню |
Спасибо всем большое!:)
|
офтопом: а анимация где? я так думал всё красиво будет, пункт так смещается на верхний слой и плывет и проч....
|
почему офтопом?:)
я специально выбрал форум jQuery, чтобы мне подсказали как на нем сделать, а мне на javascript'e написали:) но и на этом спасибо! |
Ну потому офтопом, что не в тему)) А анимация подразумевалась такая http://mootools.net/demos/?demo=Fx.Sort
|
неплохая анимация, как бы её ещё и прикрутить...
|
| Часовой пояс GMT +3, время: 12:37. |