ФорумРазработкаКлиентская сторонаВерстка и оформление → Красивый select как вконтакте

Красивый select как вконтакте

  • Kvs

    Сообщения: 420 Репутация: N Группа: Кто попало

    Spritz 10 ноября 2010 г. 7:57


    Думаю все видели выпадающие письки у вконтакте?

    для тех кто не видел

    как такое сделать? Без полоски скрола и с выделением ?
  • Абырвалг

    Сообщения: 6480 Репутация: N Группа: Джедаи

    Spritz 10 ноября 2010 г. 8:02, спустя 5 минут 28 секунд

    гугли. Есть всякие решения на основе js-frameworks
  • rider-sx

    Сообщения: 2706 Репутация: N Группа: Адекваты

    Spritz 10 ноября 2010 г. 8:27, спустя 24 минуты 31 секунду

    В исходники глянуть не?
  • }/{EHR

    Сообщения: 734 Репутация: N Группа: Адекваты

    Spritz 10 ноября 2010 г. 8:57, спустя 30 минут 25 секунд


    <div style="width: 1262px;" id="pageContainer">
    <div id="pageLayout">
     <div id="pageBody" class="pageBody">
      <div id="wrap2">
     <div id="wrap1">
      <div id="content">
    <style>
    ul.t0 .tab_word {
    margin-right: 8px;
    margin-left: 8px;
    }
    </style>
    <div id="editor" class="profileEditor">
       <div id="general">
         <div class="row">
         <div class="labeled">
    <div style="width: 215px;" class="selector_container dropdown_container" id="container10">
    <table class="selector_table" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>      
    <td class="selector">
    <span class="selected_items"></span>      
    <input style="color: rgb(0, 0, 0); width: 188px;" class="selector_input selected" readonly="true" type="text">
    </td>
    <td style="width: 16px;" id="dropdown10" class="selector_dropdown"> 
    </td>
    </tr>
    </tbody>
    </table>
    <div class="results_container">
    <div class="result_list" style="width: 215px; height: auto; display: none;">
    <ul style="position: relative; visibility: visible;">
    <li onmousemove="Select.itemMouseMove(10, 0, this)" onmousedown="Select.itemMouseDown(10, 0, this)" val="0" class="first">- Не выбраны -</li>
    <li onmousemove="Select.itemMouseMove(10, 1, this)" onmousedown="Select.itemMouseDown(10, 1, this)" val="8" class="">Индифферентные</li>
    <li onmousemove="Select.itemMouseMove(10, 2, this)" onmousedown="Select.itemMouseDown(10, 2, this)" val="1" class="">Коммунистические</li>
    <li onmousemove="Select.itemMouseMove(10, 3, this)" onmousedown="Select.itemMouseDown(10, 3, this)" val="2" class="">Социалистичеcкие</li>
    <li onmousemove="Select.itemMouseMove(10, 4, this)" onmousedown="Select.itemMouseDown(10, 4, this)" val="3" class="">Умеренные</li>
    <li onmousemove="Select.itemMouseMove(10, 5, this)" onmousedown="Select.itemMouseDown(10, 5, this)" val="4" class="">Либеральные</li>
    <li onmousemove="Select.itemMouseMove(10, 6, this)" onmousedown="Select.itemMouseDown(10, 6, this)" val="5" class="">Консервативные</li>
    <li onmousemove="Select.itemMouseMove(10, 7, this)" onmousedown="Select.itemMouseDown(10, 7, this)" val="6" class="">Монархические</li>
    <li onmousemove="Select.itemMouseMove(10, 8, this)" onmousedown="Select.itemMouseDown(10, 8, this)" val="7" class="last">Ультраконсервативные</li>
    </ul>
    </div>
    <div style="width: 215px; display: none; margin-top: 171px;" class="result_list_shadow">      
    <div class="shadow1"></div>    
    <div class="shadow2">
    </div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    Вот тебе код этой страницы, вот те ссылка на css http://vkontakte.ru/css/ui_controls.css
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 10 ноября 2010 г. 9:16, спустя 18 минут 20 секунд

    вк дает свои гуи вроде как, поройся в разделе для разработчиков
    Сапожник без сапог
  • Kvs

    Сообщения: 420 Репутация: N Группа: Кто попало

    Spritz 10 ноября 2010 г. 11:28, спустя 2 часа 12 минут 18 секунд

    разобрался, спасибо

Пожалуйста, авторизуйтесь, чтобы написать комментарий!