2015-10-02 31 views
5

Cuối cùng, tôi muốn chuyển đổi một menu thả xuống được chọn khi một hình ảnh được nhấp. Tôi muốn sử dụng chức năng "mở/đóng", được định nghĩa trong thư viện jQuery tùy chỉnh, nhưng không thể tìm ra cách truy cập chức năng "mở".Trình đơn thả xuống tùy chỉnh kích hoạt w/jQuery

Câu hỏi: Làm cách nào để truy cập chức năng "mở" hoặc "đóng" được xác định trong thư viện jQuery tùy chỉnh? (Thông tin chi tiết dưới đây - xin lưu ý, tôi có zero kinh nghiệm sử dụng jQuery Nguyên mẫu, mà là một phần quan trọng của vấn đề này -. Tôi thậm chí không chắc chắn nếu tôi có thể truy cập vào các đối tượng đúng)

Bất kỳ sự giúp đỡ/đề xuất hoặc hướng dẫn được đánh giá cao


Tôi đang sử dụng bài viết Codrops Simple Effects for Dropdowns để tham khảo.

Cụ thể, tôi đang tham chiếu Demo #4 trong ví dụ/câu hỏi của mình.


Ví dụ sử dụng một thư viện jQuery tùy chỉnh để tạo kiểu tóc/Dropdowns hiệu ứng động:


Đó là khá đơn giản:

  1. Trước tiên, bạn đặt ra HTML của bạn "chọn" (thả xuống) đánh dấu

    <select id="cd-dropdown" class="cd-select"> 
        <option value="-1" selected>Choose an animal</option> 
        <option value="1" class="icon-monkey">Monkey</option> 
        <option value="2" class="icon-bear">Bear</option> 
        <option value="3" class="icon-squirrel">Squirrel</option> 
        <option value="4" class="icon-elephant">Elephant</option> 
    </select> 
    
  2. (Sau bao gồm tất cả các file dự án cần thiết) Bạn có thể gọi chức năng plugin của bạn

    $('#cd-dropdown').dropdown(); 
    
  3. Chức năng sau đó chuyển đổi đánh dấu "chọn" của chúng tôi thành cấu trúc sau

    <div class="cd-dropdown"> 
        <span>Choose an animal</span> 
        <input type="hidden" name="cd-dropdown"> 
        <ul> 
         <li data-value="1"><span class="icon-monkey">Monkey</span></li> 
         <li data-value="2"><span class="icon-bear">Bear</span></li> 
         <li data-value="3"><span class="icon-squirrel">Squirrel</span></li> 
         <li data-value="4"><span class="icon-elephant">Elephant</span></li> 
        </ul> 
    </div> 
    
  4. .210
  5. Sau đó các chức năng phản ứng với sự kiện click theo quy định trên tài liệu của họ:

Khi nhấp vào nhịp đầu tiên, chúng tôi sẽ áp dụng các lớp học “không cần cd-hoạt động” để cha mẹ của nó, bộ phận với lớp “cd-dropdown”. Khi chọn một tùy chọn, khoảng tương ứng sẽ được chèn vào hộp đầu tiên.


Tiếp theo, jquery.dropdown.js file chứa tất cả các định nghĩa, được xây dựng bằng cách sử dụng phương pháp "nguyên mẫu" - mà như tôi đề cập trước đây, tôi có zero kinh nghiệm sử dụng. Tôi sẽ không bao gồm toàn bộ tệp (vì có link) nhưng tôi sẽ bao gồm hai chức năng tôi đang cố gắng truy cập và nơi Tôi NGHINKA nó đang được khởi tạo.

Open Chức năng

open : function() { 
     var self = this; 
     this.dd.toggleClass('cd-active'); 
     this.listopts.css('height', (this.optsCount + 1) * (this.size.height + this.options.gutter)); 
     this.opts.each(function(i) { 

      $(this).css({ 
       opacity : 1, 
       top : self.options.rotated ? self.size.height + self.options.gutter : (i + 1) * (self.size.height + self.options.gutter), 
       left : self.options.random ? Math.floor(Math.random() * 11 - 5) : 0, 
       width : self.size.width, 
       marginLeft : 0, 
       transform : self.options.random ? 
        'rotate(' + Math.floor(Math.random() * 11 - 5) + 'deg)' : 
        self.options.rotated ? 
         self.options.rotated === 'right' ? 
          'rotate(-' + (i * 5) + 'deg)' : 
          'rotate(' + (i * 5) + 'deg)' 
         : 'none', 
       transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? (i * self.options.delay) + 'ms' : ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : 0 
      }); 

     }); 
     this.opened = true; 

    }, 

Các Đóng Function

close : function() { 

     var self = this; 
     this.dd.toggleClass('cd-active'); 
     if(this.options.delay && Modernizr.csstransitions) { 
      this.opts.each(function(i) { 
       $(this).css({ 'transition-delay' : self.options.slidingIn ? ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : (i * self.options.delay) + 'ms' }); 
      }); 
     } 
     this._positionOpts(true); 
     this.opened = false; 

    } 

Gọi nó Tất cả

$.fn.dropdown = function(options) { 
    var instance = $.data(this, 'dropdown'); 
    if (typeof options === 'string') { 
     var args = Array.prototype.slice.call(arguments, 1); 
     this.each(function() { 
      instance[ options ].apply(instance, args); 
     }); 
    } 
    else { 
     this.each(function() { 
      instance ? instance._init() : instance = $.data(this, 'dropdown', new $.DropDown(options, this)); 
     }); 
    } 
    return instance; 
}; 

Thiết lập Chức năng - Initial Definition

(function($, window, undefined) { 

'use strict'; 

$.DropDown = function(options, element) { 
    this.$el = $(element); 
    this._init(options); 
}; 

// the options 
$.DropDown.defaults = { 
    speed : 300, 
    easing : 'ease', 
    gutter : 0, 
    // initial stack effect 
    stack : true, 
    // delay between each option animation 
    delay : 0, 
    // random angle and positions for the options 
    random : false, 
    // rotated [right||left||false] : the options will be rotated to thr right side or left side. 
    // make sure to tune the transform origin in the stylesheet 
    rotated : false, 
    // effect to slide in the options. value is the margin to start with 
    slidingIn : false, 
    onOptionSelect : function(opt) { return false; } 
}; 

$.DropDown.prototype = { 

    _init : function(options) { 

     // options 
     this.options = $.extend(true, {}, $.DropDown.defaults, options); 
     this._layout(); 
     this._initEvents(); 

    }, 

Hy vọng rằng, điều này có ý nghĩa với ai đó và họ có thể giúp tôi ra ngoài.


Kết luận

Nói tóm lại, tôi muốn bấm vào một hình ảnh trên trang web, mà sẽ kích hoạt các chức năng tương tự/hiệu ứng được/được thực hiện khi thả xuống tự được nhấp.

Tôi không chắc chắn nếu tôi đặt ra câu hỏi đúng vì vậy tôi sẽ hỏi cả hai:

  1. Làm thế nào tôi có thể truy cập các đối tượng chức năng quy định tại nguyên mẫu?
  2. Làm cách nào để thực thi chức năng mở thả xuống khi nhấp vào một phần tử khác? (* Lưu ý - Điều này sẽ không hoạt động như một dropdown bình thường, mà tôi biết là khó khăn, nếu không phải là không thể buộc phải mở.Tôi nghĩ tôi sẽ có thể chỉ thực hiện các chức năng tương tự đang được thực hiện khi thả xuống được nhấp .)

Cảm ơn sự kiên nhẫn và trợ giúp của bạn về vấn đề này.

Trả lời

1

sau khi thử nghiệm khác nhau tôi đã đưa ra với điều này:

$.extend(
    $.DropDown.prototype, { 
    open: function() { 
     // YOUR CODE HERE 
     alert('YYY'); 
    } 
    } 
); 

bạn có thể thử nó trên giao diện điều khiển của trình duyệt của bạn trực tiếp trên trang web của thành phần (DEMO 4), bạn được liên kết trong câu hỏi của bạn:

http://tympanus.net/Development/SimpleDropDownEffects/index4.html

Phương pháp thử nghiệm "mở" được mở rộng, khi bạn nhấp vào menu thả xuống, bạn sẽ nhận được cảnh báo. Bạn có thể dễ dàng mở rộng phương pháp "đóng" theo cách tương tự.

Hy vọng điều này sẽ hữu ích.

EDIT:

để kích hoạt menu thả xuống qua javascript, bạn chỉ có thể làm điều này:

$('.cd-dropdown span').mousedown(); 
+0

Cảm ơn, tôi sẽ thực hiện điều này và thử nó ra. Tôi không có kinh nghiệm với các chức năng Prototype vì vậy tôi đã nhìn vào làm thế nào để mở rộng chức năng mở, tôi chỉ không biết những gì tôi đã được tìm kiếm vì vậy đây là rất nhiều trợ giúp. Hãy cho tôi một chút để thực hiện và thử. Tôi sẽ báo cáo lại với kết quả của tôi. – rockmandew

+0

Việc mở rộng chỉ có thể được đặt trong tệp "site-scripts" của tôi đúng không?Nó không yêu cầu bất kỳ vị trí đặc biệt nào trong thư viện vì nó đang sử dụng đối tượng, đúng không? – rockmandew

+0

Có sự cố trong mã của tôi: chức năng không thực sự được mở rộng, nó được viết lại. Tôi đang chỉnh sửa câu trả lời. –

Các vấn đề liên quan