[javascript] Twitter 부트 스트랩의 데이터 토글 속성

data-toggleTwitter 부트 스트랩에서 속성은 무엇입니까 ? Bootstrap API에서 답변을 찾을 수 없습니다.

내가 전에뿐만 아니라 비슷한 질문을 본 링크를 . 그러나 그것은별로 도움이되지 않았습니다.

답변

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

몇 가지 예 :

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

관통 이동 부트 스트랩 자바 스크립트 문서 및 데이터 토글을 검색하고 당신은 코드 예제에 사용되는 볼 수 있습니다.

한 가지 실례 :

<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종종 고급 툴팁과 같은 것에 대한 데이터를 보유하는 데 사용되었습니다).

부트 스트랩의 경우 내부 작업에 익숙하지 않지만 이름으로 판단하면 가시성 또는 부착 된 요소 모드 (예 : 접을 수있는 모드)를 전환 할 수있는 고리라고 생각합니다 Octopress.org의 사이드 바 ).

html5doctor는 data-attribute에 관한 좋은 기사를 가지고 있습니다.

사이클 2는 data-attribute를 광범위하게 사용하는 또 다른 예입니다 .

답변

예를 들어, 레시피를 나열하고 표시하기 위해 웹 애플리케이션을 작성한다고 가정하십시오. 고객이 레시피를 선택하기 전에 목록을 정렬하고 레시피의 기능을 표시하는 등의 작업을 고객이 원할 수 있습니다. 이렇게하려면 조리법의 목록 요소 안에 요리 시간, 기본 재료, 식사 위치 등과 같은 것들을 연결해야합니다.

<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 요소에 추가 할 수있는 사용자 정의 (*로 표시) 속성입니다. 그들은 두 부분으로 구성됩니다.

속성 이름 속성의 이름입니다. 적어도 하나의 소문자 여야하며 접두사 data-가 있어야합니다. 예를 들어 : 데이터 주성분, 데이터 쿠킹 시간, 데이터 식사. 이것은 데이터의 이름입니다.

특성 값 다른 HTML 특성과 마찬가지로 데이터 자체를 등호로 구분하여 따옴표로 묶습니다. 이 데이터는 웹 페이지에서 유효한 문자열 일 수 있습니다. 예를 들면 다음과 같습니다. data-main-ingredient = “chocolate”.

그런 다음 이러한 데이터 속성을 원하는 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

요점

로 시작하는 모든 속성 data-은 HTML5 파서에 의해 구문 분석되지 않습니다.
부트 스트랩은 data-toggle속성을 사용하여 축소 기능을 만듭니다.

사용 방법 : 2 단계 만

축소하려는 class="collapse"요소에 추가하십시오 #A.
추가 data-target="#A"및 data-toggle="collapse".

목적 : data-toggle 속성 div을 사용하면 부트 스트랩을 사용하는 경우 (블록) 을 축소 / 확장하는 컨트롤을 만들 수 있습니다 .

답변

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

토글 버튼에 대한 프레스 상태 설정뿐만 아니라 모달, 탭 내용, 툴팁 및 팝 오버 메뉴를 표시하는 데 사용됩니다. 명확한 문서없이 여러 가지 방법으로 사용됩니다.

답변

부트 스트랩에서 데이터 토글의 목적은 jQuery를 사용하여 특정 유형의 모든 태그를 찾을 수 있도록하는 것입니다. 예를 들어, 모든 popover 태그에 data-toggle = “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>

잘 작동합니다.