Tìm kiếm một trình cắm thêm JQuery tương tự như Accordian, nhưng cho phép nhiều phần mở cùng một lúc

Question

Tôi đang tìm một phần tử giao diện người dùng tương tự như phần được cung cấp bởi trình cắm thêm JQUERY Accordian, nhưng cho phép người dùng giữ nhiều phần mở cùng một lúc.

Tài liệu có những điều sau đây để nói và đề xuất phương pháp thay thế bằng đoạn mã (xem bên dưới). Đó là điều tuyệt vời và tất cả, và mã họ cung cấp về cơ bản hoạt động, nhưng tôi thấy mình đã tạo lại rất nhiều thứ được xây dựng trong plugin như chuyển đổi các lớp và áp dụng các chủ đề theo cách thủ công trong XHTML.

Câu hỏi của tôi:

1. Trước khi tôi nhận được quá xa dọc theo tuyến đường thủ công , không ai biết của một tương tự plug-in, hoặc mod này một cho phép nhiều tấm là mở cùng một lúc?

2. Có một tên gọi chung cho điều khiển giống như accordion rằng phép nhiều tấm mở mà tôi thể sử dụng để Google cho lựa chọn khác?

Đây là phần tôi đã tham chiếu trước đó từ tài liệu, nếu quan trọng.

Chú ý: Nếu bạn muốn nhiều phần mở cùng một lúc, không sử dụng một accordion

Một accordion không cho phép hơn một bảng nội dung để được mở cùng lúc , và phải mất rất nhiều nỗ lực để thực hiện điều đó. Nếu bạn đang tìm kiếm cho một tiện ích cho phép nhiều hơn bảng nội dung mở, không sử dụng điều này. Thông thường nó có thể được viết với một vài dòng jQuery thay vào đó, một cái gì đó như thế này:

jQuery(document).ready(function(){ 
    $('.accordion .head').click(function() { 
     $(this).next().toggle(); 
     return false; 
    }).next().hide(); 
}); 

Or animated: 

jQuery(document).ready(function(){ 
    $('.accordion .head').click(function() { 
     $(this).next().toggle('slow'); 
     return false; 
    }).next().hide(); 
}); 

Answer 1

Cảm ơn các đề xuất của mọi người, nhưng cuối cùng tôi đã tìm thấy một điều gì đó theo cách riêng của mình, thực hiện chính xác những gì tôi đang tìm kiếm. Tôi đang thêm nó như là một câu trả lời cho bất cứ ai khác, những người cần một cái gì đó tương tự.

Giải pháp
Sử dụng mã và mẫu XHTML here bạn có thể kéo dài tuổi JQuery Accordion plug-in có nhiều tấm mở cùng một lúc và giữ cho theming và chức năng khác được cung cấp bởi các plug-in mà không cần tái tạo lại phong cách.

Xem trang web được liên kết ở trên để biết ví dụ hoàn chỉnh, nhưng đây là mã của mã cần thiết để thực hiện điều khiển accordion cho phép nhiều bảng được mở. Sử dụng cùng một HTML để xác định các tiêu đề và nội dung như được mô tả trong tài liệu trình cắm thêm

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") 
     .find("h3") 
      .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") 
      .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>') 
      .click(function() { 
       $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active") 
        .toggleClass("ui-state-default").toggleClass("ui-corner-bottom") 
       .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") 
       .end().next().toggleClass("ui-accordion-content-active").toggle(); 
       return false; 
      }) 
      .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide(); 
    }) 
    </script> 

Answer 2

tôi sửa đổi một số mã tôi đã tìm thấy trực tuyến trong tuần cuối cùng tìm kiếm một giải pháp tương tự. Điều này giả định rằng mỗi accordion là một danh sách lồng nhau không có thứ tự. Để làm việc này, bạn phải có các ID duy nhất cho mỗi hợp đồng của bạn. Dưới đây là một ví dụ:

HTML

<ul id="uniqueAccordion1" class="menu"> 
    <li class="noaccordion"> 
     <a href="#">Top Level 1</a> 
     <ul> 
      <li><a href="#">Sub 1</a></li> 
      <li><a href="#">Sub 2</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Top Level 2</a> 
     <ul> 
      <li><a href="#">Sub 3</a></li> 
      <li><a href="#">Sub 4</a></li> 
     </ul> 
    </li> 
</ul> 

JS

$(function() { 
    // initialize admin menu 
    loadNav(); 
}); 
function loadNav() { 
    // initially show opened 
    $.each($('ul.menu'), function(){ 
     $('#' + this.id + ' .expandfirst ul:first').show(); 
    }); 

    // watch for click 
    $('ul.menu li > a').click(function() { 
     var $this = $(this); 
     var $parent = $this.parent(); 
     if ($parent.hasClass('noaccordion')) { 
      return false; 
     } 
     var $checkElement = $this.next(); 
     if ($checkElement.is('ul')) { 
      $checkElement.slideToggle('fast'); 
     } 
     return false; 
    }); 
} 

Bạn sẽ cần CSS của riêng bạn để hỗ trợ này, nhưng nó cho phép bất kỳ số lượng accordions và cũng cho phép bạn vô hiệu hóa một phần cụ thể khỏi bị đóng (ví dụ: bạn sử dụng phần này để điều hướng) bằng cách thêm lớp noaccordion vào mai n cấp LI tag. Cuối cùng, bạn có thể thêm một lớp expandfirst đến mức chính LI để tự động mở accordion cho (các) thành phần phù hợp khi tải trang.

Answer 3

Thay đổi một vài điều có lẽ là 1.8.5.

Moving Toggle khắc phục sự cố thay đổi trạng thái (nhấp vào hiển thị, nhấp không giấu, nhấp vào ẩn nhấp vào hiển thị, nhấp vào ẩn ...) Lớp học phần nào không phù hợp mẫu và vẽ jquery của bị

$(".colapse").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") 
    .find("h3")  
      .addClass("ui-accordion-header ui-helper-reset ui-corner-all ui-state-default") 
      .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>') 
      .click(function() { 
       $j(this).toggleClass("ui-accordion-header-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top").toggleClass("ui-state-active") 
          .toggleClass("ui-state-default") 
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") 
        .end().next().toggle().toggleClass("ui-accordion-content-active"); 
       return false; 
      }) 
      .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide(); 

Answer 4

Tôi có thực hiện một plugin jQuery có giao diện tương tự của jQuery UI Accordion và có thể giữ tất cả các tab \ phần mở

bạn có thể tìm thấy nó ở đây

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

công trình với cùng đánh dấu đang

<div id="multiOpenAccordion"> 
     <h3><a href="#">tab 1</a></h3> 
     <div>Lorem ipsum dolor sit amet</div> 
     <h3><a href="#">tab 2</a></h3> 
     <div>Lorem ipsum dolor sit amet</div> 
</div> 

Javascript

$(function(){ 
     $('#multiOpenAccordion').multiAccordion(); 
     // you can use a number or an array with active option to specify which tabs to be opened by default: 
     $('#multiOpenAccordion').multiAccordion({ active: 1 }); 
     // OR 
     $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] }); 

     $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs 
}); 

UPDATE: các plugin đã được cập nhật để hỗ trợ tùy chọn mặc định tab hoạt động

Answer 5

Sửa anasnakawa mã cho những người không cần jQuery UI Accordion tạo kiểu và muốn giữ mã đơn giản. (hy vọng bạn sẽ tìm thấy nó hữu ích)

HTML:

<div id="multiOpenAccordion"> 
     <h3>tab 1</h3> 
     <div>A lot of text</div> 
     <h3>tab 2</h3> 
     <div>A lot of thex 2</div> 
</div> 

Javascript:

$(function(){ 
     $('#multiOpenAccordion').multiAccordion(); 
}); 

đang thay đổi:

(function($){ 
    $.fn.extend({ 
     multiAccordion: function(options) { 
      var defaults = {}; 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var $this = $(this); 
       var $h3 = $this.children('h3'); 
       var $div = $this.children('div'); 

       $h3.click(function(){ 
        var $this = $(this); 
        var $div = $this.next(); 

        if ($this.hasClass('closed')) { 
         $this.removeClass('closed').addClass('open'); 
         $div.slideDown('fast'); 
        } else { 
         $this.removeClass('open').addClass('closed'); 
         $div.slideUp('fast'); 
        } 
       }); 
      }); 
     } 
    }); 
})(jQuery); 

Chỉnh sửa: Nếu bạn sử dụng thanh cuộn tùy chỉnh Malihu thì có thể có sự cố với IE.IE giảm lỗi nói

luận không hợp lệ, Line xx, nhân vật xxx

Tôi đã gỡ bỏ mã này từ Malihu thanh cuộn (đó là chịu trách nhiệm về nội dung di chuyển mà là nhiều hơn 1000px trục trặc) - Nó giúp.

$.fx.prototype.cur = function(){ 
    if (this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null)) { 
     return this.elem[ this.prop ]; 
    } 
    var r = parseFloat(jQuery.css(this.elem, this.prop)); 
    return typeof r == 'undefined' ? 0 : r; 
} 

này đã cho tôi đau đầu thực

Answer 6

đoạn mã này sửa chữa các vấn đề góc (góc dưới tiêu đề sẽ biến mất khi mở rộng và ngược visa)

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") 
.find("h3") 
     .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default") 
     .hover(function() { $(this).toggleClass("ui-state-hover"); }) 
     .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>') 
     .click(function() { 
      $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active") 
       .toggleClass("ui-state-default").toggleClass("ui-corner-bottom") 
       .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") 
       .end().next().slideToggle().toggleClass("ui-accordion-content-active"); 
      return false; 
     }) 
     .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide(); 

Answer 7

Một khả năng khác sẽ được sử dụng nhiều accordion trường hợp (1 accordion cho mỗi phần). Tôi đã thử sử dụng giải pháp của JohnFx ở trên nhưng tạo ra các vấn đề về kiểu dáng mà tôi không có với accordion mặc định. Khi tôi chia 2 phần accordion đơn của tôi thành hai accordion riêng biệt tôi đã có thể giữ kiểu dáng tốt. Ngoài ra, bạn không phải đối phó với việc thực thi css và html bên trong của accordion.

Answer 8

Giải pháp tốt nhất là sử dụng 1 accordion cho mỗi phần, như Matthew Brown cũng cho biết.

$("#accordion1").accordion({ collapsible: true }); 
$("#accordion2").accordion({ collapsible: true }); 
$("#accordion3").accordion({ collapsible: true }); 

Answer 9

giải pháp khác là các plugin maccordion - https://github.com/Dattaya/Maccordion

Ví dụ - http://jsfiddle.net/Dattaya/pTXju/

Nó hỗ trợ tùy chọn: tàn tật, năng động, heightStyle, sự kiện, tiêu đề, biểu tượng; tùy chọn liên quan đến hiệu ứng: hiệu ứng , tùy chọn, giảm tốc, tốc độ.

Phương pháp: tiêu diệt, tắt, bật, tùy chọn, tiện ích, làm mới.

Sự kiện: tạo, trước khi kích hoạt, kích hoạt.

Và bạn cũng có khả năng thêm/xóa tab động. Tài liệu - https://github.com/Dattaya/Maccordion/blob/master/README.md

Answer 10

<ul class="accordion"> 
     <li id="one" class="files"> 
      <a href="#one">Admin Video</a> 
      <ul class="sub-menu"> 
       <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li> 
       <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li> 
       <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li>     
      </ul> 
     </li> 

     <li id="two" class="mail"> 
      <a href="#two">Users</a> 
      <ul class="sub-menu"> 
       <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li> 
       <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li> 
      </ul> 
     </li> 


     <li id="three" class="cloud"> 
      <a class="active" href="#three">Background Image options</a> 
      <ul class="sub-menu"> 
       <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li> 
       <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li> 
      </ul> 
     </li> 
    </ul> 

$(document).ready(function() { 


    var accordion_head = $('.accordion > li > a'), 
     accordion_body = $('.accordion li > .sub-menu'); 
    $.each($(".accordion > li > a"), function(){ 
     if($(this).attr('class') == 'active') 
     { 
      $(this).next().slideDown('normal'); 
     }   
    }); 



    // Open the first tab on load 

    //accordion_head.first().addClass('active').next().slideDown('normal'); 

    // Click function 

    accordion_head.on('click', function(event) { 

     // Disable header links 

     event.preventDefault(); 

     // Show and hide the tabs on click 

     if ($(this).attr('class') != 'active'){ 
      accordion_body.slideUp('normal'); 
      $(this).next().stop(true,true).slideToggle('normal'); 
      accordion_head.removeClass('active'); 
      $(this).addClass('active'); 
     } 

    }); 

}); 

hy vọng nó giúp bạn