VPF::Построение многоуровнего меню из JSON

fclmfan

Дата 19.2.2010, 17:37 (ссылка)

(нет голосов)

Загрузка ...

Werdum face

Профиль
Группа: Awaiting Authorisation
Сообщений: 64
Регистрация: 21.10.2008

Репутация: нет
Всего: нет

Всем привет!

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

вот код... P.S. тестировать только в IE

Код


<html>

<head>
<title>;gfhjoirjtio n</title>
<style type="text/css">
table.cMenu
{
position:absolute;
border:1px solid #000;
width:150px;
cursor:default;
z-index:98;
}
table.cMenu tr
{
padding: 0px 5px;
background-color:#EDEDED;
z-index:99;
}
table.cMenu tr.cHover
{
background-color: #0A246A;
color: #FFF;
}
table.cMenu td
{
width:100%;
}
table.cMenu td.cArrow
{
font-family:'Webdings';
}
</style>
<script type="text/javascript">
var _ = document;
var _Menu = [
{
   label : "Menu 1", childs : [
   {
      label : "Menu 1_1"
   }
   ,
   {
      label : "Menu 1_2"
   }
   ]
}
,
{
   label : "Menu 2"
}
,
{
   label : "Menu 3", childs : [
   {
      label : "Menu 3_1"
   }
   ,
   {
      label : "Menu 3_2"
   }
   ,
   {
      label : "Menu 3_3", childs : [
      {
         label : "Menu 3_3_1"
      }
      ,
      {
         label : "Menu 3_3_2"
      }
      ,
      {
         label : "Menu 3_3_3"
      }
      ,
      {
         label : "Menu 3_3_4"
      }
      ]
   }
   ,
   {
      label : "Menu 3_4"
   }
   ]
}
,
{
   label : "Menu 4"
}
];
var _lastMenu = null;
var _lastItem = null;

function drawMenu(menuParent, menu, _x, _y)
{
   var Menu = _.createElement("table");
   Menu.className = "cMenu";
   Menu.cellSpacing = "0";
   Menu.style.left = _x;
   Menu.style.top = _y;
   Menu.onselectstart = function()
   {
      return false
   }
   ;
   for (var m in menu)
   {
      var mni = Menu.insertRow();
      var mniL = mni.insertCell();
      var mniR = mni.insertCell();
      mni.tag = menu[m];
      mni.i = m;
      mni.menuParent = menuParent;
      if (mni.tag.childs && mni.tag.childs.length > 0)
      {
         mniR.innerHTML = "4";
      }
      mniL.innerHTML = menu[m].label;
      mniR.className = "cArrow";
      mni.onmouseover = function()
      {
         this.className = "cHover";
         if (this.tag.childs && this.tag.childs.length > 0)
         {
            var subMenu = this.parentNode.parentNode;
            this.child = drawMenu(this, this.tag.childs, _x + subMenu.offsetWidth, _y + (this.offsetHeight * this.i));
         }
         _lastItem = this;
      }
      ;
      mni.onmouseout = function()
      {
         this.className = "";
         if (this.child)
         {
            this.child.removeNode(true);
         }
      }
      ;
   }
   _.body.appendChild(Menu);
   return Menu;
}

function onLoad()
{
   _.body.oncontextmenu = function()
   {
      if (_lastMenu)
      {
         _lastMenu.removeNode(true);
      }
      _lastMenu = drawMenu(null, _Menu, event.clientX, event.clientY);
      return false;
   }
   ;
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

ПОМОГИТЕ ПЛИЗ.....=)

12345c

Дата 19.2.2010, 21:54 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

M
12345c

Не размножайте вопрос в разделах, а ставьте его в раздел в соответствии со своим уровнем программирования. Сейчас удалил такую же тему из "Новичков".

Ставьте задержку в строчке 133.

Код


     mni.onmouseover = function()
      {
         if(this.ww){
          if(this.onmouseout.a) this.onmouseout.a();
          clearTimeout(this.ww); //сброс задержки
          this.ww=0;
         }
         this.className = "cHover";
         if (this.tag.childs && this.tag.childs.length > 0)
         {
            var t=this;
            (function(){
              var subMenu = t.parentNode.parentNode;
              t.child = drawMenu(t, t.tag.childs, _x + subMenu.offsetWidth, _y + (t.offsetHeight * t.i));
            })()
         }
      }
      mni.onmouseout = function() //ставить задержку
      {
        var t=this;
        var a = function(){
           t.className = "";
           if (t.child)
           {
              t.child.removeNode(true);
           }
         }
         this.ww =setTimeout(a, 400);
      }

Работу посмотреть можно здесь: http://savedbythegoog.appspot.com/?id=57d1...176dbca32a5ae6d
Видно, что оно сильно недоработано на предмет правильного поведения на более, чем 1-м уровне. Поэтому показан только принцип задержки срабатывания, действующий на 1-м уровне меню - параметры убираемого блока сохраняются в замыкании.

(И что мешает делать сразу кроссбраузерно?)

Код

<html>
<head>
<title>;gfhjoirjtio n</title>
<style type="text/css">
table.cMenu
{
position:absolute;
border:1px solid #000;
width:150px;
cursor:default;
z-index:98;
}
table.cMenu tr
{
padding: 0px 5px;
background-color:#EDEDED;
z-index:99;
}
table.cMenu tr.cHover
{
background-color: #0A246A;
color: #FFF;
}
table.cMenu td
{
width:100%;
}
table.cMenu td.cArrow
{
font-family:'Webdings';
}
</style>
<script type="text/javascript">
var _ = document;
var _Menu = [
{
   label : "Menu 1", childs : [
   {
      label : "Menu 1_1"
   }
   ,
   {
      label : "Menu 1_2"
   }
   ]
}
,
{
   label : "Menu 2"
}
,
{
   label : "Menu 3", childs : [
   {
      label : "Menu 3_1"
   }
   ,
   {
      label : "Menu 3_2"
   }
   ,
   {
      label : "Menu 3_3", childs : [
      {
         label : "Menu 3_3_1"
      }
      ,
      {
         label : "Menu 3_3_2"
      }
      ,
      {
         label : "Menu 3_3_3"
      }
      ,
      {
         label : "Menu 3_3_4"
      }
      ]
   }
   ,
   {
      label : "Menu 3_4"
   }
   ]
}
,
{
   label : "Menu 4"
}
];
var _lastMenu = null;
var _lastItem = null;
function drawMenu(menuParent, menu, _x, _y)
{
   var Menu = _.createElement("table");
   Menu.className = "cMenu";
   Menu.cellSpacing = "0";
   Menu.style.left = _x;
   Menu.style.top = _y;
   Menu.onselectstart = function()
   {
      return false
   }
   ;
   if(!_.all) {alert('ff дальше не может');return;}
   for (var m in menu)
   {
      var mni = Menu.insertRow();
      var mniL = mni.insertCell();
      var mniR = mni.insertCell();
      mni.tag = menu[m];
      mni.i = m;
      mni.menuParent = menuParent;
      if (mni.tag.childs && mni.tag.childs.length > 0)
      {
         mniR.innerHTML = "4";
      }
      mniL.innerHTML = menu[m].label;
      mniR.className = "cArrow";
      mni.onmouseover = function()
      {
         if(this.ww){
          if(this.onmouseout.a) this.onmouseout.a();
          clearTimeout(this.ww); //сброс задержки
          this.ww=0;
         }
         this.className = "cHover";
         if (this.tag.childs && this.tag.childs.length > 0)
         {
            var t=this;
            (function(){
              var subMenu = t.parentNode.parentNode;
              t.child = drawMenu(t, t.tag.childs, _x + subMenu.offsetWidth, _y + (t.offsetHeight * t.i));
            })()
         }
      }
      ;
      mni.onmouseout = function() //ставить задержку
      {
        var t=this;
        var a = function(){
           t.className = "";
           if (t.child)
           {
              t.child.removeNode(true);
           }
         }
         this.ww =setTimeout(a, 400);
      }
      ;
   }
   _.body.appendChild(Menu);
   return Menu;
}
function onLoad()
{
   _.onclick = 
   _.body.oncontextmenu = function(e)
   {
      if(_.all && event.type=='click'|| (!_.all && e.which !=3)) return true;
      if(!_.all && e.which ==3) e.preventDefault();
      if(!_.all) event = e;
      if (_lastMenu)
      {
         _lastMenu.removeNode(true);
      }
      _lastMenu = drawMenu(null, _Menu, event.clientX, event.clientY);
      return false;
   }
   ;
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

Это сообщение отредактировал(а) 12345c - 19.2.2010, 21:56

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

fclmfan

Дата 24.2.2010, 19:54 (ссылка)

(нет голосов)

Загрузка ...

Werdum face

Профиль
Группа: Awaiting Authorisation
Сообщений: 64
Регистрация: 21.10.2008

Репутация: нет
Всего: нет

Цитата(12345c @ 19.2.2010, 21:54

)

Ок

Спасибо за помощь, но я подумал и сделал по своему smile

Код


<html>

<head>
<title>;gfhjoirjtio n</title>
<style type="text/css">
table.cMenu
{
position:absolute;
border:1px solid #000;
width:150px;
cursor:default;
z-index:98;
}
table.cMenu tr
{
padding: 0px 5px;
background-color:#EDEDED;
z-index:99;
}
table.cMenu tr.cHover
{
background-color: #0A246A;
color: #FFF;
}
table.cMenu td
{
width:100%;
}
table.cMenu td.cArrow
{
font-family:'Webdings';
}
</style>
<script type="text/javascript">
var _ = document;
var _Menu = [
{
   label : "Menu 1", childs : [
   {
      label : "Menu 1_1"
   }
   ,
   {
      label : "Menu 1_2"
   }
   ]
}
,
{
   label : "Menu 2", action : function()
   {
      alert("Menu 2")
   }
}
,
{
   label : "Menu 3", childs : [
   {
      label : "Menu 3_1"
   }
   ,
   {
      label : "Menu 3_2"
   }
   ,
   {
      label : "Menu 3_3", childs : [
      {
         label : "Menu 3_3_1", action : function()
         {
            alert("Menu 3_3_1")
         }
      }
      ,
      {
         label : "Menu 3_3_2"
      }
      ,
      {
         label : "Menu 3_3_3"
      }
      ,
      {
         label : "Menu 3_3_4", childs : [
         {
            label : "Menu 3_3_4_1"
         }
         ,
         {
            label : "Menu 3_3_4_2"
         }
         ,
         {
            label : "Menu 3_3_4_3"
         }
         ,
         {
            label : "Menu 3_3_4_4", childs : [
            {
               label : "Menu 3_3_4_4_1"
            }
            ,
            {
               label : "Menu 3_3_4_4_2"
            }
            ,
            {
               label : "Menu 3_3_4_4_3"
            }
            ,
            {
               label : "Menu 3_3_4_4_4"
            }
            ,
            {
               label : "Menu 3_3_4_4_5"
            }
            ,
            {
               label : "Menu 3_3_4_4_6"
            }
            ,
            {
               label : "Menu 3_3_4_4_7", childs : [
               {
                  label : "Menu 3_3_4_4_7_1"
               }
               ,
               {
                  label : "Menu 3_3_4_4_7_2"
               }
               ,
               {
                  label : "Menu 3_3_4_4_7_3"
               }
               ]
            }
            ]
         }
         ]
      }
      ]
   }
   ,
   {
      label : "Menu 3_4"
   }
   ]
}
,
{
   label : "Menu 4", childs : [
   {
      label : "Menu 4_1"
   }
   ,
   {
      label : "Menu 4_2"
   }
   ,
   {
      label : "Menu 4_3"
   }
   ,
   {
      label : "Menu 4_4"
   }
   ,
   {
      label : "Menu 4_5"
   }
   ]
}
];

var _lastContextMenu = null;
var _lastItem = null;

function drawMenu(menuParent, menu, _x, _y)
{
   var Menu = _.createElement("table");
   Menu.className = "cMenu";
   Menu.cellSpacing = "0";
   Menu.onselectstart =  new Function("return false");
   for (var m in menu)
   {
      var mni = Menu.insertRow();
      var mniL = mni.insertCell();
      var mniR = mni.insertCell();
      mni.tag = menu[m];
      mni.i = m;
      mni.menuParent = menuParent;
      if (mni.tag.childs && mni.tag.childs.length > 0)
      {
         mniR.innerHTML = "4";
      }
      mniL.innerHTML = menu[m].label;
      mniR.className = "cArrow";
      mni.onmouseover = function()
      {
         this.className = "cHover";
         var menuBlock = this.parentNode.parentNode;

         removeMenu(menuBlock);

         if (this.tag.childs && this.tag.childs.length > 0)
         {
            if ( ! this.child)
            {
               this.child = drawMenu(this, this.tag.childs, _x + menuBlock.offsetWidth, _y + (this.offsetHeight * this.i));
            }
         }
         _lastItem = this;
      }
      ;
      mni.onmouseout = function()
      {
         this.className = "";
      }
      ;
      if (mni.tag.action)
      {
         mni.onclick = mni.tag.action;
      }
      ;
   }
   _.body.appendChild(Menu);

   if(_.body.clientWidth - _x < Menu.offsetWidth)
     Menu.style.left = _x - Menu.offsetWidth;
   else
     Menu.style.left = _x;

   if(_.body.clientHeight - _y < Menu.offsetHeight)
     Menu.style.top = _y - Menu.offsetHeight;
   else
     Menu.style.top = _y;
   
   return Menu;
}

function removeMenu(mp)
{
   var mpr = mp.getElementsByTagName("tr");
   for (var i = 0; i < mpr.length; i ++ )
   {
      if (mpr[i].child)
      {
         removeMenu(mpr[i].child);
         mpr[i].child.removeNode(true);
         mpr[i].child = null;
      }
   }
}

function onLoad()
{
   _.body.oncontextmenu = function()
   {
      if (_lastContextMenu)
      {
         removeMenu(_lastContextMenu);
         _lastContextMenu.removeNode(true);
         _lastContextMenu = null;
      }
      _lastContextMenu = drawMenu(null, _Menu, event.clientX, event.clientY);
      return false;
   }
   ;
   _.body.onclick = function()
   {
      if (_lastContextMenu)
      {
         removeMenu(_lastContextMenu);
         _lastContextMenu.removeNode(true);
         _lastContextMenu = null;
      }
   }
   ;
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

вродь неплохо получилось, правда ещё чуток доработать нужно.....

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »