VPF::Выпадающее меню на Javascript - Форум программистов

DiverSerge

Дата 22.4.2007, 20:03 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 12.4.2007

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

Очень нужна ваша помощь.

Есть выпадающее меню, реализованное как слой.

В закрытом виде: user posted image

В открытом виде: user posted image

Ссылка на само меню

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

Заранее спасибо,
Сергей.

feosr

Дата 27.4.2007, 18:27 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

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

Тама к картинке присабачено действо :

Код


onClick="ESystem_WebSite_DropDown_OnClick('Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_Div','Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_MainDiv')"

Тебе надо додумать как прикрутить это действие к тому, что ты хочеш.

Вот, сделал кое как:

Код


<html>
<head>
<title>Пример</title>    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">    
</head>
<body>

<script language='javascript' type='text/javascript'>

function ESystem_WebSite_DropDown_OnClick(containerName, controlName)
{
    var containerControl = null;
    var mainControl = null;

    containerControl = document.getElementById(containerName);
    mainControl = document.getElementById(controlName);
    
    if (containerControl != 'undefined' && containerControl != null)
    {
        if (ESystem_WebSite_DropDown_IsShow(containerControl))
        {
            ESystem_WebSite_DropDown_Hide(containerControl);
        }
        else
        {
            ESystem_WebSite_DropDown_SetPosition(containerControl, mainControl)
            ESystem_WebSite_DropDown_Show(containerControl)
        }
    }
}


function ESystem_WebSite_DropDown_IsShow(Element)
{
    if (Element.style.visibility == "visible")
    {
        return true;
    }
    return false;
}

function ESystem_WebSite_DropDown_Show(Element)
{
    Element.style.visibility = "visible";
    Element.style.display = "";
}

function ESystem_WebSite_DropDown_Hide(Element)
{
    Element.style.visibility = "hidden";
    Element.style.display = "none";
}

function ESystem_WebSite_DropDown_SetPosition(container, edit)
{
    container.style.width = edit.offsetWidth;
    container.style.height = 100;
}

function ESystem_WebSite_DropDown_CreateElement (type, parent) 
{
    var el = null;
    if (window.self.document.createElementNS)
        // use the XHTML namespace; IE won't normally get here unless
        // _they_ "fix" the DOM2 implementation.
        el = window.self.document.createElementNS("http://www.w3.org/1999/xhtml", type);
    else
        el = window.self.document.createElement(type);
    if (typeof parent != "undefined" &&parent != null)
        parent.appendChild(el);
    return el;
};
 </script>

<table>
<tr>
<td>&nbsp;Отель:<br>
            
<table id="Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_MainDiv" name="Page:PriceSearchControl:DepartureCitiesDropDownListControl:DepartureCitiesList:MainDiv" nowrap cellpadding="0" cellspacing="0" border="1" bgcolor="White" width="185">
  <tr><td>
    <table width="100%" cellspacing="0" cellpadding="0">
        <tr nowrap>
            <td nowrap width="100%"><a href="#" onClick="ESystem_WebSite_DropDown_OnClick('Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_Div','Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_MainDiv')">Выберите отель </a></td>
            <td><img onClick="ESystem_WebSite_DropDown_OnClick('Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_Div','Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_MainDiv')" src="DropDown.gif" hspace="0" vspace="0" border="0" />
            </td>
        </tr>
    </table>
</td></tr></table><table id="Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList_Div" name="Page:PriceSearchControl:DepartureCitiesDropDownListControl:DepartureCitiesList:Div" id="Page_PriceSearchControl_DepartureCitiesDropDownListControl_DepartureCitiesList" cellpadding="0" cellspacing="0" bgcolor="White" border="1" height="24" width="150" style="overflow:auto;overflow-x:hidden;background-color:White;position:absolute;scrollbar-3dlight-color:#0A95D2;visibility:hidden;scrollbar-highlight-color:White;width:150px;display:none;border-color:#0A95D2;scrollbar-face-color:#0A95D2;cursor:hand;z-index:10000;scrollbar-darkshadow-color:#0A95D2;scrollbar-arrow-color:White;scrollbar-track-color:White;scrollbar-shadow-color:White;"><tr><td>
  <FORM>
    <select name="select" size=10 multiple>
      <option selected>ANA HotelGold Coast 5*
      <option>Angsana Resort & SPA 5*
      <option selected>Batmans Hill 3*
      <option>Beach Club 5*
      <option>Bedarra Island 5*
      <option>Brampton Island 3*
      <option>Citigate Sebel Sydney 4*
      <option>Creative El Nabila Makadi 
      <option>Diamond Hotel & Beach Resort 
      <option>Fortuna 4* Sharm
    </select>
  </FORM>
</td>
</tr></table></span>
</td>
</span>
</td>
</tr>
</table>
</body>
</html>

Это сообщение отредактировал(а) feosr - 27.4.2007, 18:30

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