Twitter Bootstrap 드롭 다운을위한 이벤트 핸들러?

Twitter Bootstrap 드롭 다운을위한 이벤트 핸들러?

---

Twitter Bootstrap 드롭 다운 버튼 을 사용하고 싶습니다 .

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </div><!-- /btn-group -->

사용자가 단순히으로 이동하는 대신 버튼의 값을 '다른 작업'으로 변경하면 #실제로 사용자 지정 방식으로 작업을 처리하고 싶습니다.

하지만 드롭 다운 플러그인에서 이벤트 핸들러 를 볼 수 없습니다 .

실제로 부트 스트랩 드롭 다운 버튼을 사용하여 사용자 작업을 처리 할 수 ​​있습니까? 내비게이션 전용인지 궁금합니다. 예제가 작업 목록을 제공하는 것이 혼란 스럽습니다.

---

Twitter 부트 스트랩은 기본 기능을 제공하기위한 것이며 화면에서 작업을 수행하는 기본 자바 스크립트 플러그인 만 제공합니다 . 추가 콘텐츠 또는 기능은 직접 수행해야합니다.

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#" id="action-1">Action</a></li>
    <li><a href="#" id="action-2">Another action</a></li>
    <li><a href="#" id="action-3">Something else here</a></li>
  </ul>
</div><!-- /btn-group -->

그리고 jQuery로

jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});

---

이 시도:

$('div.btn-group ul.dropdown-menu li a').click(function (e) {
    var $div = $(this).parent().parent().parent(); 
    var $btn = $div.find('button');
    $btn.html($(this).text() + ' <span class="caret"></span>');
    $div.removeClass('open');
    e.preventDefault();
    return false;
});

---

Bootstrap 3에서 'dropdown.js'는 트리거되는 다양한 이벤트를 제공합니다.

click.bs.dropdown
show.bs.dropdown
shown.bs.dropdown

기타

---

다음은 앵커에 대한 사용자 지정 함수를 구현할 수있는 방법에 대한 실제 예제입니다.

http://jsfiddle.net/CH2NZ/43/

앵커에 ID를 첨부 할 수 있습니다.

<li><a id="alertMe" href="#">Action</a></li>

그런 다음 jQuery의 클릭 이벤트 리스너를 사용하여 클릭 작업을 수신하고 함수를 실행합니다.

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});

---

나는 이것을보고 있었다. 드롭 다운 앵커를 채울 때 클래스 및 데이터 속성을 지정 했으므로 작업을 수행해야 할 때 다음을 수행 할 수 있습니다.

<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>

그런 다음 jQuery에서 다음과 같은 작업을 수행합니다.

$('.dropDownListItem').click(function(e) {
    var name = e.currentTarget;
    console.log(name.getAttribute("data-name"));
});

So if you have dynamically generated list items in your dropdown and need to use the data that isn't just the text value of the item, you can use the data attributes when creating the dropdown listitem and then just give each item with the class the event, rather than referring to the id's of each item and generating a click event.

---

Anyone here looking for Knockout JS integration.

Given the following HTML (Standard Bootstrap dropdown button):

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select an item               
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 1</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 2</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 3</a>
        </li>
    </ul>
</div>

Use the following JS:

var viewModel = function(){
    var self = this;

    self.clickTest = function(){
        alert("I've been clicked!");
    }  
};

For those looking to generate dropdown options based on knockout observable array, the code would look something like:

var viewModel = function(){
    var self = this;

    self.dropdownOptions = ko.observableArray([
        { id: 1, label: "Click 1" },
        { id: 2, label: "Click 2" },
        { id: 3, label: "Click 3" }
    ])

    self.clickTest = function(item){
        alert("Item with id:" + item.id + " was clicked!");
    }  
};

<!-- REST OF DD CODE -->
<ul class="dropdown-menu" role="menu">
    <!-- ko foreach: { data: dropdownOptions, as: 'option' } -->
    <li>
        <a href="javascript:;" data-bind="click: $parent.clickTest, text: option.clickTest"></a>
    </li>
    <!-- /ko -->
</ul>
<!-- REST OF DD CODE -->

Note, that the observable array item is implicitly passed into the click function handler for use in the view model code.

---

Without having to change your button group at all, you can do the following. Below, I assume your dropdown button has an id of fldCategory.

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory').parent().find('UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

Now, if you set the .btn-group of this item itself to have the id of fldCategory, that's actually more efficient jQuery and runs a little faster:

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory BUTTON').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

참고URL : https://stackoverflow.com/questions/11989146/event-handlers-for-twitter-bootstrap-dropdowns