Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: ComboBox

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: элемент управления ComboBox в html & javaScript
Поиск в теме | Версия для печати
valenok
Отправлено: 19 Июля, 2007 - 22:40:24
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
Всем знакомый элемент управления ComboBox из других языков программирования принимает такой вид в моём исполнении:

index.html
PHP:
скопировать код в буфер обмена
  1.  
  2.  
  3. <body onclick="close_menu('manual')">
  4.  
  5. <div id='all' onmouseover='javascript:combo_leave=false;' onmouseout='javascript:combo_leave=true;'>
  6.  
  7. <table cellspacing='0' cellpadding='0' border='0' class='combo' id='combo' >
  8. <tr><td><input id='input' type='text' name='val' class='inp' maxlength='20'  
  9. onblur='javascript:menu_onclose();'/>
  10. </td><td><img src='down.bmp' class='img' id='img'  onclick="javascript:img_click()"
  11. onmouseout="javascript:img_blur()" onmouseover="javascript:img_over()"/></td></tr>
  12. </table>
  13.  
  14. <table id='menu'  class='menu' border='0' cellspacing='0'
  15. cellpadding='0' style="display:none" >
  16.  
  17. <tr><td> some value1 </td> </tr>
  18. <tr><td> some value2 </td> </tr>
  19. <tr><td> some value3 </td> </tr>
  20. </table>
  21.  
  22. </div>
  23.  
  24. </body>
  25.  
  26.  
  27.  





menu.css
PHP:
скопировать код в буфер обмена
  1. .combo
  2. {
  3.        
  4.         border:1px solid #7F9DB9;
  5.         height:10px;
  6.        
  7. }
  8.  
  9. .inp
  10. {
  11.         border:none;
  12.         width:150px;
  13. }
  14.  
  15. .img
  16. {
  17.         border:none;
  18.         width:15px;
  19.         height:16px;
  20. }
  21.  
  22. .menu
  23. {
  24.         border:1px solid #7F9DB9;
  25.         border-top:none;
  26.         width:167px;
  27.         cursor:default;
  28.         font-size:small;
  29.        
  30. }
  31.  
  32.  
  33. .menu_item_hover{
  34.         background-color:#316AC5;
  35.         color:white;
  36.        
  37. }
  38.        
  39. .menu_item{
  40.         background-color:white;
  41.         color:black;
  42.        
  43. }
  44.  



menu.js
PHP:
скопировать код в буфер обмена
  1.  
  2. var menu_leave = true;
  3. var img_leave = true;
  4. var combo_leave = true;
  5. var close_through_img = false;
  6. var menu = document.getElementById('menu');
  7.  
  8.  
  9. var auto_close = true; // Скрывать меню автоматически?
  10. var auto_close_time = 3000; // Время видимости меню до автоскрытия в милисекудах.
  11.  
  12. function close_menu(bool){
  13.  
  14.         if(bool=='') window.setTimeout("close_menu('true')",auto_close_time);
  15.         if(bool=='false') window.setTimeout("close_menu('stop')",1);
  16.         if( (bool=='true' && menu_leave && img_leave) || (bool=='manual' && combo_leave) || (bool=='close') ) {
  17.                
  18.                 var menu_previous_state = menu.style.display;
  19.                 var img_close_through_prev = close_through_img;
  20.                 close_through_img = false;
  21.                 menu.style.display='none';
  22.                 document.getElementById('img').setAttribute('src','down.bmp');
  23.                 if(menu_previous_state=='' && !img_close_through_prev) menu_onclose();
  24.                
  25.         }
  26.  
  27. }
  28.  
  29.  
  30. menu.onmouseover =  menu.onmouseout = menu.onclick = function(e)
  31.         {
  32.                 if (!e) e = window.event;
  33.                 var elem = e.target || e.srcElement;
  34.                        
  35.                         if(elem.tagName=='TD' && elem.parentNode.parentNode.parentNode.id=='menu') {
  36.                                
  37.                         if(e.type=="mouseover"){
  38.                                 elem.className = 'menu_item_hover';
  39.                                 if(!auto_close) return false;
  40.                                 menu_leave = false;
  41.                                 close_menu('false');
  42.                         }
  43.                         if(e.type=="mouseout"){
  44.                                 elem.className = 'class','menu_item';
  45.                                 if(!auto_close) return false;
  46.                                 menu_leave = true;
  47.                                 close_menu('');
  48.                         }
  49.                         if(e.type=="click")
  50.                 document.getElementById('input').value=elem.innerHTML.replace(/(^ *)|( *$)/,"");
  51.                 }
  52.                        
  53.                        
  54.  
  55.         }
  56.  
  57.  
  58.  
  59. document.onclick = function(e) {close_menu('manual');}
  60.  
  61.  
  62. function img_click(){
  63.        
  64.         if(document.getElementById('img').getAttribute('src').match(/down.bmp/ig)){
  65.                 document.getElementById('img').setAttribute('src','pressed.bmp');
  66.                 menu.style.display='';
  67.         }
  68.         else { close_through_img = true; close_menu('close'); }
  69.        
  70. }
  71.  
  72.  
  73. function img_over(){
  74.         if(!auto_close) return false;
  75.         img_leave = false;
  76.         close_menu('false');
  77. }
  78.  
  79. function img_blur(){
  80.         if(!auto_close) return false;
  81.         img_leave = true;
  82.         close_menu('');
  83. }
  84.  
  85.  
  86. // Edit this function. Being runned when menu become closed
  87. function menu_onclose(){
  88.         // do whatever
  89. }
  90.  
  91.  










-----
Truly yours, Sasha.
 
My status
 Top
valenok
Отправлено: 20 Июля, 2007 - 15:37:35
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
-


-----
Truly yours, Sasha.
 
My status
 Top
Джур
Отправлено: 21 Июля, 2007 - 15:13:40
Post Id



Посетитель


Покинул форум
Сообщений всего: 423
Дата рег-ции: Март 2007  


Помог: 0 раз(а)
прикольно, не спорю... а вот косяки присутствуют... Улыбка как я понимаю выподалочка всего 3с висит. В опере, даже с мышкой в поле выбора, поле норовит закрытся. Недовольство, огорчение А так вполне удачное решение.


-----
Тамбовский каджит тебе товарищ
 
 Top
valenok
Отправлено: 21 Июля, 2007 - 15:21:18
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


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


-----
Truly yours, Sasha.
 
My status
 Top
Джур
Отправлено: 21 Июля, 2007 - 18:49:24
Post Id



Посетитель


Покинул форум
Сообщений всего: 423
Дата рег-ции: Март 2007  


Помог: 0 раз(а)
надеюсь автор не против, что мы его решение слямзили с коллегами? Улыбка


-----
Тамбовский каджит тебе товарищ
 
 Top
valenok
Отправлено: 21 Июля, 2007 - 19:30:54
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
Да пожалуйста..
Для вас и выкладывал.


-----
Truly yours, Sasha.
 
My status
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Хранилище функций на JavaScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB