나는 최근에 일로 매우 바빴고 시스템을 수정하고 있습니다. 프로젝트 배경은 MVC1.0에 의해 개발되었지만 프론트 엔드 부분은 여러 버전으로 수정되었으며 이전 디자이너는 매우 강력하며 설계 및 프론트 엔드 개발입니다. 그것은 이미 매우 유행하고 최첨단 에드이며 항상 인기있는 부트 스트랩 툴킷을 사용하며 웹 프론트 엔드 CSS 프레임 워크로 정의하는 많은 사람들이 있습니다. 솔직히 말해서, 나는 그것이 트위터에 의해 제작되었고 인터페이스가 더 좋았다는 것을 알았습니다. 그러나 실제 프로젝트에는 사용되지 않았습니다. 회사의 새로운 동료들은 이전에 이것을 해왔으며 회사의 공식 웹 사이트 프로젝트에서 사용할 계획이었습니다. 내가 모르기 때문에 지도자는 이것에 관심이 없으므로 쓸모가 없습니다. 그녀는 프로젝트에 대한 작업을 적게 협력하면 개발 효율성을 향상시킬 수 있으며 시스템을 더 아름답고 아름답게 만들 수 있지만 적응 형 디자인도 더 잘 지원한다고 말했다.
프로젝트 요구 사항은 HTML Native Select Tag를 아래 그림에 표시된 드롭 다운 박스 효과로 바꾸는 것입니다. 나는 보통 이런 종류의 요구를 본다. 기본 HTML 태그를 변경하려면 마음에 들지 않습니다. 또한 UI 및 LI 태그 및 JavaScript 코드를 통해 SELECT와 동일한 함수를 달성 할 수 있다는 것을 알고 있지만 이전에는 작성하려고 시도한 적이 없습니다. 버그 및 브라우저의 호환성에 문제가 있으면 PM과 통신합니다. 이 선택을 변경하지 않아야합니까? 기본 선택을 사용하겠습니다. PM은 사용자 간섭을 줄이고 사용자 가이 옵션에 너무 많은주의를 기울이지 않도록하는 것이라고 말했다. 나는 이것이 동일하다고 생각한다. 우선, 선택한 것만 큼 과장된 것처럼 보이지 않습니다. 둘째, 드롭 다운 화살표는 약간 작으므로 사용자는 너무 의도적으로 클릭하지 않습니다. 실제로 해당 텍스트를 클릭하면 아래의 드롭 다운 목록이 열립니다.
이미지 (HTML 기본 선택 태그) 이미지 (최종 렌더링)
(HTML 기본 선택 태그)
Select의 원래 기능은 오른쪽의 드롭 다운 화살표를 클릭하여 드롭 다운 목록을 열고 사용자에게 선택을 제공하는 것입니다. 사용자가 옵션을 선택하면 텍스트 상자의 값을 해당 옵션 컨텐츠로 변경하고 옵션 값을 얻을 수 있습니다. 또 다른 매우 중요한 기능은 옵션에 선택된 속성이 있다는 것입니다. 옵션이 선택된 경우 = "선택된"경우 드롭 다운 상자는 기본적으로 현재 옵션을 선택합니다.
부트 스트랩은 아름다운 메뉴를 만들기 위해 버튼 드롭 다운을 제공하며 선택할 수있는 기능이 아닙니다. 검색하고 보았을 때 Bootstrap은 버튼 드롭 다운 스타일과 유사한 선택 구성 요소를 제공 할 수 있다고 생각했습니다. 그러나 나는 망상입니다. 이 구성 요소가 없으면 구성 요소를 구현해야합니다. 사실, 나는 UL과 Li로 선택된 태그를 작성한 경험이 있었으므로 이것을 작성하는 것은 그리 어렵지 않습니다.
<div style = "margin-top : 30px;"> <a Style = "font-size : 14px;" type = "button"id = "dropdownmenu1"data-toggle = "dropdown"> text 1 <span> </span> </a> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li role = "value => <a 역할 ="menuitem "tabindex ="1 "href ="</a> </<li role = ""</li>> <li>> <li> <li robel = "</<li robel"> 역할 = "menuitem"tabindex = "2"href = "#"> text 2 </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "3"href = "#"> text 3 </a> </li> </ul> </div>
이것은 버튼 드롭 다운의 기본 코드입니다. CSS 스타일 자체를 적용하므로 나중에 bootstrap.min.css에서 스타일을 변경해야 하므로이 페이지에 스타일을 넣어야합니다.
<! docType html> <html> <head> <title> bootstrap 101 템플릿 </title> <meta name = "viewport"content = "width = device-width, initial-scale = 1.0"charset = "utf-8"> <!-bootstrap-> <link href = "css/bootstap.css" "rel ="rel = "rel ="rel = "rel shye type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow : none; box-shadow : none;} </style> <!-[Lt IE 9]> <스크립트 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 </p> <select> <옵션 value = "1"> 옵션 옵션> <옵션> <옵션> <옵션> <옵션> <옵션 옵션 = "2"> 3 </옵션> </select> <div id = "dropdown1" "style ="margin-top : 30px; "> <div> <스타일 ="font-size : "font-size :"font-size : "type ="button "id ="dropdownmenu1 "data-toggle ="dropdown "> <!-옵션을 선택한 후 여기에 텍스트가 표시되어야합니다. 1 </span> <span> </span> </a> <ul 역할 = "메뉴"aria-labelledby = "dropdownmenu1"> <li role = "프리젠 테이션"value = "1"> <a 역할 = "menuitem"tabindex = "1"href = "javascript : void (0);"> </li> <li> <li role = "" "" "" "" "" ". 역할 = "menuitem"tabindex = "2"href = "javaScript : void (0);"> 텍스트 2 </a> </a> </li> <li 역할 = "프리젠 테이션"value = "3"> <a 역할 = "menuitem"tabindex = "3"href = "javaScript : void (0); 텍스트 3 </a> </ul> </ul> </ul> </li> Bootstrap의 JavaScript 플러그인)-> <script src = "js/jquery-1.10.2.js"> </script> <!-모든 컴파일 된 플러그인을 포함 시키거나 필요에 따라 개별 파일을 포함 시키거나-> <script src = "js/bootstrap.min.js"> <js/bootsprap.min.js "> customdropdown (ele) {this.dropdown = ele; this.placeholder = this.dropdown.find ( ". 자리 표시 자"); this.options = this.dropdown.find ( "ul.dropdown-menu> li"); val = ''; this.index = -1; // default -1; this.initevents ();} customDropdown.prototype = {initevents : function () {var obj = this;이 메소드는 클릭 이벤트가 부트 스트랩 자체에 의해 캡처되기 때문에 작성 될 수 없습니다. 드롭 다운 목록 obj.options.on ( "click", function () {var opt = $ (this); obj.text = opt.find ( "a"). text (); obj.val = opt.attr ( "value"); obj.index = opt.index (); obj.placeholder.text (obj.text);}); this.text;}, getValue : function () {return this.val;}, getIndex : getIndex : function () {return this.index;}} $ (document () {function () {var mydropdown = new CustomDropdown ( "#dropdown1");}); </scroct> </html> </html>클릭 프로세스 중에는 배경이 나타납니다. Chrome을 통한 요소를 보는 것은 Box-Shodow를 작성하는 효과입니다. 그러나 내가 그것을 수정 한 후에도 여전히 나타났습니다. 내일 계속 검색합시다.
스타일 자체 안에 1 줄의 스타일 오버레이, bootstrap.cs를 추가하십시오.
<스타일 유형 = "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도 가지고 있지만 버전은 조금 오래되었으며 업데이트되지 않습니다.
부트 스트랩 공식 웹 사이트 http://getbootstrap.com/components/#btn-dropdowns