11.bootstrap 드롭다운 메뉴, 스크롤 감청, 단추와 접기 플러그인

지식 포인트:

1、      
2、      
3、    
4、    

1. 드롭다운 메뉴 플러그인

   

              
       

           
첫 페이지
           
생산품
           
정보
           
정보
       
   

   //         ，     data-target     。
     

   //Dropdown     ：，      data-*
   $('#btn').dropdown();
   $('#btn').dropdown('toggle');

   //Dropdown     ：
   show.bs.dropdown       show          。
   shown.bs.dropdown               ，    CSS          。
   hide.bs.dropdown       hide      ，          。
   hidden.bs.dropdown              ，    CSS          。

   $('#dropdown').on('show.bs.dropdown', function () {
        alert('    show        ！');
   });

2. 스크롤 감청 플러그인
데이터-offset 기본값은 10입니다. 내용을 스크롤 용기 10픽셀 이내로 고정시키면 대응하는 메뉴를 강조 표시합니다. 데이터-spy 설정scroll, 스크롤 용기 감청 데이터-target 설정#nav, 지정한 감청 메뉴를 연결합니다.

   //scroll     ：
   $("#scroll").scrollspy({
        //offset: 0,
        target: "#nav"
   });

activate.bs.scrollspy는 새 항목이 활성화될 때마다 스크롤 감청 플러그인으로 이 이벤트를 터치합니다.//이벤트가 내비게이션에 $('#nav') 바인딩됩니다.('activate.bs.scrollspy', function() {alert('새 항목이 활성화되면 이 이벤트를 터치!');};

   //             DOM    
   refresh       DOM    
   function removeSec(e) {
       $(e).parents('.sec').remove();
       $('#content').scrollspy('refresh');
   }

3. 버튼 플러그인

   //    
       
    ：  Firefox        ，                。     ：    autocomplete="off"。

   //    
   

       
              
       
       
              
       
   
   //    
   

       
               
       
       
               
       
       
               
       
       
               
       
   

   //    
         
   $('#myButton').on('click', function () {
        var btn = $(this).button('loading');
        setTimeout(function () {
            btn.button('reset');
        }, 1000);
   });

   Button      button         ：toggle、reset、string(   loading、 complete)。
   //       data-toggle="button"
   $('button').on('click', function () {
        $(this).button('toggle');
   });

4. 플러그인 축소

   //    
    Bootstrap 
   

        

            Bootstrap   Twitter                  。   Twitter      Mark Otto   Jacob Thornton     ,    CSS/HTML   。   ,Bootstrap       3.0 。
        
   

   //Collapse     ：hide、show、toggle。
   $('button').on('click', function () {
        $('#collapseOne').collapse('toggle');
   });

   //Collapse     ：
   show.bs.collapse       show          
   shown.bs.collapse                
   hide.bs.collapse       hide        
   hidden.bs.collapse