Недавно я был очень занят работой и пересматриваю систему. Фон проекта была разработана MVC1.0, но передняя часть была изменена в нескольких версиях, и предыдущие дизайнеры очень мощные, и они являются проектированием и фронтальной разработкой. Он уже очень модный и передовый, и использует всегда популярный инструментарий для начальной загрузки, и есть много, которые определяют его как веб-фронт-фронтальную структуру CSS. Честно говоря, я знал только до того, как он был создан Twitter, и интерфейс был лучше. Но это не использовалось в реальных проектах. Мои новые коллеги из компании делали это раньше и планировали использовать его в официальном проекте компании. Поскольку я не знаю, лидер не заинтересован в этом, так что это бесполезно. Она сказала, что сотрудничество с меньшим количеством работы над проектами может повысить эффективность разработки и сделать систему более красивой и красивой, но она также лучше поддерживает адаптивный дизайн.
Требование проекта состоит в том, чтобы заменить нативный тег HTML Native Select на эффект раскрывающегося бокса, показанный на рисунке ниже. Я обычно вижу такой спрос. Если я хочу изменить нативные теги HTML, мне это не нравится. Хотя я также знаю, что те же функции, что и Select, могут быть достигнуты с помощью тегов пользовательского интерфейса и LI и кода JavaScript, я никогда не пытался писать их раньше. Если есть какие -либо проблемы с совместимостью ошибки и браузера, я буду общаться с PM. Нельзя ли менять этот выбор? Я буду использовать Native Select. PM сказал, что это сократить пользовательские помехи и позволить пользователям не обращать слишком большого внимания этой опции. Я думаю, что это то же самое. Прежде всего, он не выглядит так преувеличенным, как Select. Во-вторых, выпадающая стрелка немного маленькая, поэтому пользователь не будет нажимать слишком умышленно. На самом деле, нажатие на этот текст также откроет раскрывающий список ниже.
Изображение (HTML Native Select Tag) Изображение (Окончательный рендеринг)
(HTML Native Select Tag)
Оригинальная функция Select-нажать стрелку раскрывающегося списка справа, чтобы открыть раскрывающий список и дать пользователю выбор. Когда пользователь выбирает опцию, значение в текстовом поле следует изменить на соответствующий содержимое опции, а значение значения опции может быть получено. Другая очень важная функция заключается в том, что вариант имеет выбранное свойство. Если опция выбрана = «Выбран», раскрывающееся поле выберет текущую опцию по умолчанию.
Bootstrap обеспечивает выпадение кнопки для создания красивых меню, и это не функция для выбора. Когда я искал и увидел его, я думал, что Bootstrap может предоставить компонент Select, похожий на стиль выпадения кнопки. Но я бреден. Без этого компонента компонент должен быть реализован. На самом деле, у меня был опыт написания избранных тегов с UL и LI, поэтому это не очень сложно написать это.
<div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type = "button" id = "dropdownmenu1" data-toggle = "dropdown"> text 1 <pran> </span> </a> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation" value => <a role = "menuitem" tabIndex = "1" href = "#"> textem. rol = "presentation"> <a role = "menuitem" tabindex = "2" href = "#"> текст 2 </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "3" href = "#"> Текст 3 </a> </li> </ul> </div>
Это базовый код выпадения кнопки. Поскольку он будет применять сам стиль CSS, нам нужно изменить стиль в Bootstrap.min.css позже, поэтому нам нужно поставить несколько стилей на этой странице.
<! Doctype html> <html> <head> <title> шаблон Bootstrap 101 </title> <meta name = "viewport" content = "width = width-width, начальная шкала = 1.0" charset = "utf-8"> <! type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style> <!-[if ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! [endif]-> </head> <body> <p> Оригинал Select Tag </p> <Выберите> value = "1"> Text 1 </antain> <plative = "2"> «Опция 2 </». 3</option></select><div id="dropdown1"" style="margin-top:30px;"><div><a style="font-size:14px;" type="button" id="dropdownMenu1" data-toggle="dropdown"><!--After selecting the option, the selected value should be displayed here, similar to the text box in the original select--> <span>Text 1 </span> <pran> </span> </a> <ul rol = "menu" aria-labelledby = "dropdowdmenu1"> <li role = "presentation" value = "1"> <a role = "menuitem" tabindex = "1" href = "javascript: void (0);"> Текст 1 </l> </li> <li> <li = " rol = "menuitem" tabIndex = "2" href = "javascript: void (0);"> Текст 2 </a> </li> <li role = "presentation" value = "3"> <a role = "menuitem" tabindex = "3" href = "javascript: void (0);"> Text 3 </l> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </uf> </uf = javascript: void (0); Плагины Javascript от Javascript)-> <script src = "js/jquery-1.10.2.js"> </script> <!-включите все скомпилированные плагины (ниже) или при необходимости включайте отдельные файлы-> <script src = "js/bootstrap.min.js"> </script> <script = "javascript"> </script> <script = " CustomDropdown (ele) {this.dropdown = ele; this.placeholder = this.dropdown.find (". Placeholder"); this.options = this.dropdown.find ("ul.dropdown-menu> li"); this.val = ''; this.index = -1; -1; this.initevents ();} CustomDropdown.prototype = {initevents: function () {var obj = this; // Этот метод не может быть записан, потому что событие Click фиксируется самим начальником. раскрывающийся список obj.options.on ("click", function () {var opt = $ (this); obj.text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = opt.index (); obj.place.text (obj.text); this.text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (document) .ready (function () {var mydropdown = new CustomDropdowФон появится во время процесса щелчка. Просмотр элементов через Chrome является эффектом написания коробки. Но после того, как я исправил это, это все еще появилось. Давайте продолжим поиск завтра.
Добавьте 1 линию наложения стиля, Bootstrap.css внутри самого стиля.
<style type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style>ПРИМЕЧАНИЕ. Во время процесса экземпляра мы передаем объект селектора jQuery, поэтому, если на странице есть много пользовательских выпадений, будет использоваться категория. Затем вам нужно изменить код во время процесса экземпляра!
Демо -демонстрационный адрес: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap cdn http://www.bootstrapcdn.com/ Хотя у Baidu это также есть, версия немного старая и не будет обновлена.
Официальный веб-сайт Bootstrap http://getbootstrap.com/components/#btn-propdowns