it-place.net > Скриптове > JavaScript > Трикове
Не сте регистриран! Регистрирайте се БЕЗПЛАТНО, за да използвате услугите на сайта!

 Създаване на SELECT меню чрез DIV
Автор  Mutatos (06.01.2008 21:06) съобщение до автора
Погледнат  757 пъти добави към любими
Оценка добави коментар
Гласове  -- изпрати на приятел
Коментари  (0) абонирай се за JavaScript
     
Mutatos
     
 

Един пример за създаване на SELECT меню чрез DIV, използващ фреймуорка prototype. За да заработи, е нужно да си свалите този фреймуорк от този адрес и да си свалите няколко знаменца, който да послужат като икони.

CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
   <head>
     <script type='text/javascript' src='prototype.js'></script>
     <script type='text/javascript'>
        function change_country(type, value) {
           $('country_type').value=type;
           $('country_value').value=value;
        }
     </script>
     <style type="text/css">       
        #select_countries {
           border: 1px solid #aaa;
           margin-top: 5px;
           height: 200px;
           width: 220px;
           overflow: auto;
        }
        .co a:hover{
            background-color:#666666;
            border:1px solid #999999;
            text-decoration:none;
            display:block;
            color:#fff;
        }
     </style>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head>
<body>
<form action="" method="post">
   <fieldset>
      <legend>Държави</legend>
      <input type="text" name="country_value" id="country_value" value="United States" />
      <input type="hidden" name="country_type" id="country_type" value="us" />
      <a href="#" onclick="Element.show('select_countries'); return false;">Промени</a><br />
      <div id="select_countries" style="display: none;">
         <div id="close" onclick="Element.hide('select_countries'); return false;">Затвори</div>
         <div class="co">
            <a href="#" onclick="change_country('us', 'САЩ')">
            <img src="usa.png" alt="САЩ" border="0" /> САЩ</a>
         </div>
         <div class="co">
             <a href="#" onclick="change_country('ru', 'Англия')">
            <img src="uk.png" alt="Англия" border="0" /> Англия</a>
         </div>
         <div class="co">
             <a href="#" onclick="change_country('es', 'Испания')">
            <img src="sp.png" alt="Испания" border="0" /> Испания</a>
         </div>
         <div class="co">
             <a href="#" onclick="change_country('ca', 'Канада')">
             <img src="ca.png" alt="Канада" border="0" /> Канада</a>
         </div>
      </div>
   </fieldset>
</form>
</body>
</html>

Приятно кодиране!



Ключови думи: javascript div select меню фреймуорк prototype select menu селект меню




 За автора: Mutatos  
Николай Николов се занимава с програмиране на PHP/MySQL повече от 6 години. Заедно с разработката на уеб приложения на PHP, се занимава с Java, XML и Webservices.
   
 1 посетител чете този скрипт (0 потребители и 1 гост)  
Активни потребители: ---
   
  

Еmail  
 

 

 
  • Интересно от Софтуер
Wine 1.1.4 Development Wine 1.1.4 Development
OpenOffice.org 3.0.0 Release Candidate 1 for Linux OpenOffice.org 3.0.0 Release Candidate 1 for Linux
OpenOffice.org 3.0.0 Release Candidate 1 for Windows OpenOffice.org 3.0.0 Release Candidate 1 for Windows
Opera 9.60 Build 10421 Beta Opera 9.60 Build 10421 Beta
Mozilla Firefox 3.1 Alpha 2 Mozilla Firefox 3.1 Alpha 2
The Bat! 4.0.34.0 Beta The Bat! 4.0.34.0 Beta
BS.Player 2.31.973 BS.Player 2.31.973
ATI Tray Tools 1.5.8.1279 Beta ATI Tray Tools 1.5.8.1279 Beta
AIMP 2.5 Build 293 Release Candidate 3 AIMP 2.5 Build 293 Release Candidate 3
 
  • Интересно от myLINKS
Хакване на Skype парола Хакване на Skype парола
Asus EeePC 901 или Acer Aspire One A150L? Asus EeePC 901 или Acer Aspire One A150L?
Количеството спам зависи от първата буква в e-mail адреса Количеството спам зависи от първата буква в e-mail адреса
Google със собствен браузър Google със собствен браузър
Реални снимки на HTC Dream! Реални снимки на HTC Dream!
Още готини темплейти! Още готини темплейти!
Хакери удрят и в сърцето Хакери удрят и в сърцето
Western Union за издатели на AdSense в България Western Union за издатели на AdSense в България
"Феникс" откри вода на Марс
 
 
 
 


Материали Услуги Ресурси Форум Информация
Уроци Работна борса Аватари PHP форум Права и задължения
Скриптове myLinks RSS Feed C++ форум Връзка с нас
Новини Форум Toolbar SEO форум За реклама
Термини Уебмастър Туулс WiFi Точки Java форум Регистрация



IT-PLACE.NET © 2004 - 2008