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"));
});

따라서 드롭 다운에 동적으로 생성 된 목록 항목이 있고 항목의 텍스트 값이 아닌 데이터를 사용해야하는 경우 드롭 다운 목록 항목을 만들 때 데이터 속성을 사용한 다음 클래스에 각 항목을 제공 할 수 있습니다. 각 항목의 ID를 참조하고 클릭 이벤트를 생성하는 것이 아니라 이벤트입니다.

Knockout JS 통합을 찾는 모든 사람.

다음 HTML (표준 부트 스트랩 드롭 다운 버튼)이 주어지면 :

<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>

다음 JS를 사용하십시오.

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

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

녹아웃 관찰 가능 배열을 기반으로 드롭 다운 옵션을 생성하려는 경우 코드는 다음과 같습니다.

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 -->

관찰 가능한 배열 항목은보기 모델 코드에서 사용하기 위해 클릭 함수 핸들러로 암시 적으로 전달됩니다.

버튼 그룹을 전혀 변경하지 않고도 다음을 수행 할 수 있습니다. 다음, 당신의 드롭 다운 가정 button이 id의를 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>

이제이 .btn-group항목 자체가 idof 를 갖도록 설정하면 fldCategory실제로 jQuery가 더 효율적이고 조금 더 빠르게 실행됩니다.

<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>