Twitter Bootstrap의 data-toggle 속성

Twitter Bootstrap의 data-toggle 속성

무인 does does 가 뭐죠?data-toggleTwitter Bootstrap Attribute는 Atribute?Bootstrap API는 Bootstrap API입니다.

저도 비슷한 질문을 본 적이 있어요, 링크.하지만 큰 도움이 되지 않았다.

요소를 위젯 유형에 자동으로 연결하는 부트스트랩 데이터 특성입니다.Data-*는 html5 사양의 일부이며 data-toggle은 부트스트랩에 고유합니다.

몇 가지 예:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Bootstrap JavaScript 문서를 살펴보고 data-togle을 검색하면 코드 예에서 사용되는 것을 볼 수 있습니다.

1가지 작업 예:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

「」로 .data-는 특정 목적에 사용되는 커스텀아트리뷰트의 프리픽스입니다(그 목적은 애플리케이션에 따라 다릅니다).말은 사람들이 되었다.rel의 목적(「아트리뷰트」)rel고급 툴팁 등의 데이터를 보관하는 데 자주 사용되었습니다.)

Bootstrap의 경우 내부 동작에 대해서는 잘 모르지만, 이름만 보면 시야를 전환하기 위한 후크일 수도 있고, 연결되어 있는 요소의 모드(Octopress.org의 접을 수 있는 사이드바 등)일 수도 있습니다.

html5doctor는 데이터 속성에 대한 좋은 기사를 가지고 있다.

사이클 2는 데이터 속성을 광범위하게 사용하는 또 다른 예입니다.

예를 들어, 요리법을 나열하고 표시하는 웹 응용 프로그램을 만들고 있다고 가정합니다.고객이 열 레시피를 선택하기 전에 목록을 정렬하고 레시피의 특징을 표시하는 등의 작업을 할 수 있도록 하는 것이 좋습니다.그러기 위해서는 조리 시간, 주요 재료, 식사 위치 등을 레시피의 리스트 요소 안에 연관지을 필요가 있습니다.

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

그 정보를 페이지에 넣기 위해서, 여러가지 일을 할 수 있습니다.각 LI 요소에 코멘트를 추가하거나 목록 항목에 rel 속성을 추가하거나 시간, 식사 및 재료(예: )에 따라 모든 레시피를 별도의 폴더에 저장할 수 있습니다.대부분의 개발자가 채택한 솔루션은 클래스 속성을 사용하여 현재 요소에 대한 정보를 저장하는 것이었습니다.여기에는 몇 가지 장점이 있습니다.

• 하나의 요소에 여러 클래스를 저장할 수 있습니다.
• 클래스 이름은 사람이 읽을 수 있습니다.
• JavaScript(className)를 사용하여 쉽게 클래스에 액세스할 수 있습니다.
• 클래스는 클래스가 속한 요소와 관련되어 있습니다.

그러나 이 방법에는 몇 가지 큰 결점이 있습니다.

• 당신은 수업이 무엇을 하는지 기억해야 합니다.프로젝트를 잊어버렸거나 새 개발자가 프로젝트를 인계받으면 응용 프로그램 실행 방식에 영향을 미치는지도 모르고 클래스가 제거되거나 변경될 수 있습니다.
• 클래스는 CSS를 사용한 스타일링에도 사용됩니다.CSS 클래스와 데이터 클래스가 실수로 중복되어 라이브 페이지에 이상한 스타일이 표시될 수 있습니다.
• 여러 데이터 요소를 추가하는 것은 더 어렵습니다.여러 데이터 요소가 있는 경우 클래스 이름 또는 클래스 목록의 위치를 사용하여 JavaScript를 사용하여 데이터 요소에 액세스해야 합니다.하지만 망치기 쉬워요.

제가 제안한 다른 모든 방법들은 다른 방법들과 마찬가지로 이러한 문제점들을 가지고 있었습니다.하지만 데이터를 빠르고 쉽게 포함시킬 수 있는 유일한 방법이었기 때문에 그렇게 했습니다.복구에 대한 HTML5 데이터 속성

HTML5는 모든 요소에 새로운 유형의 속성인 커스텀 데이터 요소(data-*)를 추가했습니다.이러한 속성은 HTML 요소에 추가하여 원하는 유형의 데이터를 정의할 수 있는 사용자 정의(*로 표시) 속성입니다.두 부분으로 구성되어 있습니다.

Attribute Name Attribute의 이름입니다.하나 이상의 소문자여야 하며 접두사 data-가 있어야 합니다.예를 들어, 데이터 관리, 데이터 조리 시간, 데이터 식사입니다.데이터 이름입니다.

속성 Vaule 다른 HTML 속성과 마찬가지로 등호로 구분된 따옴표 안에 데이터 자체를 포함합니다.이 데이터는 웹 페이지에서 유효한 문자열일 수 있습니다.예를 들어 data-main-interient="data"와 같이 입력합니다.

그런 다음 이러한 데이터 속성을 원하는 HTML 요소에 적용할 수 있습니다.예를 들어, 위의 예제 목록에서 정보를 정의할 수 있습니다.

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

HTML에 해당 정보가 있으면 JavaScript로 액세스하여 해당 데이터를 기반으로 페이지를 조작할 수 있습니다.

부트스트랩독스에서

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

너무 많은 답이 나왔지만 요점을 파악하지 못하고 있다.이걸 고칩시다.

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

간단명료한

1. 다음 문자로 시작하는 임의의 속성data-는 HTML5 파서에 의해 해석되지 않습니다.
2. 부트스트랩은data-toggle속성을 지정하여 축소 기능을 만듭니다.

사용방법:2단계만

1. 더하다class="collapse"자연 그대로의#A무너지고 싶겠지
2. 더하다data-target="#A"그리고.data-toggle="collapse".

목적:data-toggleAtribute를 사용하면 컨트롤이 생성되어 Atribute를 축소/축소할 수 있습니다.div(block)을 클릭합니다.

이 데이터 속성이 존재하면 부트스트랩은 사용자 상호 작용 시 다른 요소의 시각적 상태 또는 논리적 상태를 전환하도록 지시합니다.

모드, 탭 내용, 툴팁 및 팝오버 메뉴를 표시하고 토글 버튼의 누름 상태를 설정하는 데 사용됩니다.명확한 문서 없이 여러 가지 방법으로 사용됩니다.

부트스트랩의 데이터 토글의 목적은 jQuery를 사용하여 특정 유형의 모든 태그를 검색할 수 있도록 하는 것입니다.예를 들어, 모든 팝오버 태그에 data-buffer="popover"를 입력한 다음 JQuery 선택기를 사용하여 모든 태그를 찾고 popover() 함수를 실행하여 초기화할 수 있습니다.태그에 class="myPopover"를 붙이고 .myPopover 셀렉터를 사용하여 동일한 작업을 수행할 수 있습니다.이 문서는 그 속성에 뭔가 특별한 일이 일어나고 있는 것처럼 보이기 때문에 혼란스럽습니다.

이것.

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

정상적으로 동작합니다.

부트스트랩 정의 HTML5 데이터 속성입니다.버튼을 이벤트에 바인드합니다.

여기에서는, 다음의 값의 예도 참조할 수 있습니다.data-toggle할당할 수 있습니다.페이지를 방문하면 됩니다.CTRL+F찾다data-toggle.

부트스트랩은 HTML5 표준을 활용하여 Javascript 내에서 DOM 요소 속성에 쉽게 접근할 수 있습니다.

data-*

스크립트에서 사용할 수 있는 HTML과 해당 DOM 표현 간에 독점 정보를 교환할 수 있는 사용자 정의 데이터 속성이라고 하는 속성 클래스를 형성합니다.이러한 커스텀 데이터는 모두 속성이 설정된 요소의 HTMlement 인터페이스를 통해 사용할 수 있습니다.HTMLement.dataset 속성을 통해 액세스 할 수 있습니다.

언급

언급URL : https://stackoverflow.com/questions/15113537/the-data-toggle-attributes-in-twitter-bootstrap