VPF::<select> - Форум программистов

dm9

Дата 4.5.2005, 23:05 (ссылка)

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

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

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

Думаю, никак smile

Смотри мой первый вариант.

Цитата(dm9 @ 27.4.2005, 11:44)

Могу порекомендовать найти хороший скрипт выпадающего меню (или спросить народ в форуме JavaScript) и использовать его

Aliance

Дата 22.5.2005, 23:00 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Вот нашел оригинальный способ группировки для select`а:

Код


<form>
<p>Справочники:</p>
 <select name="ask">
 <optgroup label="HTML">
  <option label="3.2">HTML 3.2
  <option label="4.0">HTML 4.0
 </optgroup>
 <optgroup label="CSS">
  <option label="1">CSS-1
  <option label="1">CSS-2
  <option label="3">CSS-3
 </optgroup>
  <option value="js">JavaScript
  <option value="dhtml">DHTML
 </select></p>
</form>

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Irokez

Дата 23.5.2005, 11:38 (ссылка)

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

Загрузка ...

индеец

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

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

Цитата(Aliance @ 22.5.2005, 23:00)

Вот нашел оригинальный способ группировки для select`а:

а что оригинального smile

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

Irokez CM - открытая система управления сайтами

liliana2

Дата 31.3.2009, 09:44 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(dm9 @ 4.5.2005, 23:05)

Думаю, никак smile

Смотри мой первый вариант.

Цитата(dm9 @ 27.4.2005, 11:44)

А непосредетсвенно сам скрипт ен порекомендуете? Буду премного благодарна

Violator

Дата 31.3.2009, 12:02 (ссылка)

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

Загрузка ...

Бывалый

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

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

liliana2,
скачайте библиотеку jquery
http://docs.jquery.com/Downloading_jQuery

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $("#dd_currency").mouseover(function () {
          $("#curr_list").removeClass("hidden");
      });
      $("#dd_currency").mouseout(function () {
          $("#curr_list").addClass("hidden");
      });
      $("#curr_list a").bind("click", function() {
        $("#curr_list").addClass("hidden");
        $("#currency").attr("value", $(this).attr("id"));
        $("#curr_selected").text($(this).text());
        return false;
      });
    });
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .hidden {
      display: none;
    }
    .dropdown {
      font: 11px arial;
      border: 1px solid #08488d;
      background-color: #d4e2f7;
      background-image: url(arrow.gif);
      background-repeat: no-repeat;
    }
    .dropdown a {
      display: block;
      color: #262626;
      background-color: #d4e2f7;
      padding: 3px 10px;
      text-decoration: none;
    }
    .dropdown a:hover {
      background-color: #e5ecf5;
    }
    #curr_selected {
      color: #262626;
      padding: 3px 10px;
      cursor: pointer;
    }
    #dd_currency {
      width: 155px;
      background-position: 138px 8px;
    }
    * html .dropdown a {
      height: 1%;
    }
  </style>
</head>

<body>
  <form method="post" action="/">
    <input id="currency" type="hidden" name="currency" value="aud" />
    <div id="dd_currency" class="dropdown">
      <div id="curr_selected">Australian dollar (AUD)</div>
      <div id="curr_list" class="hidden">
        <a id="aud" href="#">Australian dollar (AUD)</a>
        <a id="cad" href="#">Canadian dollar (CAD)</a>
        <a id="czk" href="#">Czech coruna (CZK)</a>
        <a id="huf" href="#">Hungarian forint (HUF)</a>
      </div>
    </div>
  </form>
</body>
</html>

Это сообщение отредактировал(а) Violator - 31.3.2009, 12:05

Присоединённый файл ( Кол-во скачиваний: 7 )

arrow.gif 0,05 Kb

liliana2

Дата 31.3.2009, 14:38 (ссылка)

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

Загрузка ...

Бывалый

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

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

простите,за возможно глупый вопрос, а чтос этой библиотекой делать?
Как то можно по русски тоже самое почитать? а то совсем непонятно, или если не сложно сами поясните пожалуйста

Это сообщение отредактировал(а) liliana2 - 31.3.2009, 14:39

liliana2

Дата 1.4.2009, 06:58 (ссылка)

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

Загрузка ...

Бывалый

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

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

ага, разобралась, что бибилиотеку нужно подключать, вставила ваш код, все отлично смотрится, и теперь даже работает, а можно ли как то сделать чтобы он раскрывался не пр наведении а при клике? пробовала заменить mouseover на onclick - не помогает

Это сообщение отредактировал(а) liliana2 - 1.4.2009, 07:16

Violator

Дата 1.4.2009, 12:06 (ссылка)

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

Загрузка ...

Бывалый

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

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

Код


    $(document).ready(function() {
      $("#curr_selected").bind("click", function() {
        $("#curr_list").toggleClass("hidden");
      });
      $("#curr_list a").bind("click", function() {
        $("#curr_list").addClass("hidden");
        $("#currency").attr("value", $(this).attr("id"));
        $("#curr_selected").text($(this).text());
        return false;
      });
    });

Это сообщение отредактировал(а) Violator - 1.4.2009, 12:16

liliana2

Дата 1.4.2009, 12:27 (ссылка)

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

Загрузка ...

Бывалый

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

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

спасибо огромное, где тут кнопка "сказать спасибо", только еще один вопрос, этот самодельный селект будет работат как элемент формы, то есть там данные в форму посылать и так далее?

Violator

Дата 1.4.2009, 12:34 (ссылка)

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

Загрузка ...

Бывалый

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

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

liliana2,
да, будут отсылатся

liliana2

Дата 6.4.2009, 06:09 (ссылка)

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

Загрузка ...

Бывалый

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

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

еще такой вопрос, у меня на странице не один селект, ну и соотвественно чтобы все работало правильно каждому задается свои id, а как сделать это в одном скрипте?

liliana2

Дата 7.4.2009, 06:16 (ссылка)

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

Загрузка ...

Бывалый

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

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

И еще хотелось бы чтобы этот селеккт схлопывался когда убираешь мышь или щелкаешь мимо, а не как простое выпадающее меню, то есть по поведению юлиже к селекту

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