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:
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>
(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();
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>
.210
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:
- 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?
- 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.
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
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
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. –