使用 jQuery 触发自定义下拉菜单
Trigger Custom Dropdown w/ jQuery
最终,我想在单击图像时切换 select 下拉菜单。我想使用自定义 jQuery 库中定义的 "open/close" 函数,但不知道如何访问 "open" 函数。
问题: 如何访问自定义 jQuery 库中定义的 "open" 或 "close" 函数? (下面有更多详细信息 - 请注意,我使用 jQuery 原型的经验为零,这是这个问题的重要组成部分 - 我什至不确定我是否可以访问对象正确。)
任何help/suggestions或指导表示赞赏
我正在使用 Codrops Simple Effects for Dropdowns 文章作为参考。
具体来说,我在 example/question 中引用了 Demo #4。
该示例为 styling/animating 下拉菜单使用自定义 jQuery 库:
这很简单:
首先,您布置 HTML "select"(下拉)标记
<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>
(包括所有必要的项目文件后)你可以调用你的插件函数
$( '#cd-dropdown' ).dropdown();
该函数然后将我们的 "select" 标记转换为以下结构
<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>
然后函数响应他们文档中指定的点击事件:
When clicking on the first span, we will apply the class “cd-active” to its parent, the division with the class “cd-dropdown”. When selecting an option, the respective span will get inserted into the first one.
接下来是 jquery.dropdown.js file contains all of the definitions, which is built using the "prototype" method - which as I mention before, I have zero experience using. I won't include the whole file (since there is a link),但我将包括我尝试访问的两个函数以及 我认为 它正在初始化的位置。
开函数
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;
},
关闭函数
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;
}
全部调用
$.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;
};
设置函数 - 初始定义
( 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();
},
希望这对某人有意义,他们可以帮助我。
结论
总而言之,我想单击页面上的图像,这将触发与单击下拉菜单本身时执行的 is/are 相同的 function/effects。
我不确定我问的问题是否正确,所以我会同时问:
- 如何访问原型中定义的函数对象?
- 如何在点击其他元素时执行下拉打开功能? (*注意 - 这不会像普通下拉菜单那样运行,我知道这很难,如果不是不可能强制打开的话。我想我应该能够执行单击下拉菜单时正在执行的相同功能.)
感谢您的耐心等待和对此事的帮助。
经过各种测试,我想出了这个:
$.extend(
$.DropDown.prototype, {
open: function() {
// YOUR CODE HERE
alert('YYY');
}
}
);
您可以直接在问题中链接的组件网站(DEMO 4)上在浏览器的控制台上尝试:
http://tympanus.net/Development/SimpleDropDownEffects/index4.html
原型方法 "open" 已扩展,当您单击下拉菜单时会收到警报。
您可以用相同的方式轻松扩展 "close" 方法。
希望对您有所帮助。
编辑:
要通过 javascript 触发下拉菜单,您只需这样做:
$('.cd-dropdown span').mousedown();
最终,我想在单击图像时切换 select 下拉菜单。我想使用自定义 jQuery 库中定义的 "open/close" 函数,但不知道如何访问 "open" 函数。
问题: 如何访问自定义 jQuery 库中定义的 "open" 或 "close" 函数? (下面有更多详细信息 - 请注意,我使用 jQuery 原型的经验为零,这是这个问题的重要组成部分 - 我什至不确定我是否可以访问对象正确。)
任何help/suggestions或指导表示赞赏
我正在使用 Codrops Simple Effects for Dropdowns 文章作为参考。
具体来说,我在 example/question 中引用了 Demo #4。
该示例为 styling/animating 下拉菜单使用自定义 jQuery 库:
这很简单:
首先,您布置 HTML "select"(下拉)标记
<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>
(包括所有必要的项目文件后)你可以调用你的插件函数
$( '#cd-dropdown' ).dropdown();
该函数然后将我们的 "select" 标记转换为以下结构
<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>
然后函数响应他们文档中指定的点击事件:
When clicking on the first span, we will apply the class “cd-active” to its parent, the division with the class “cd-dropdown”. When selecting an option, the respective span will get inserted into the first one.
接下来是 jquery.dropdown.js file contains all of the definitions, which is built using the "prototype" method - which as I mention before, I have zero experience using. I won't include the whole file (since there is a link),但我将包括我尝试访问的两个函数以及 我认为 它正在初始化的位置。
开函数
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;
},
关闭函数
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;
}
全部调用
$.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;
};
设置函数 - 初始定义
( 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();
},
希望这对某人有意义,他们可以帮助我。
结论
总而言之,我想单击页面上的图像,这将触发与单击下拉菜单本身时执行的 is/are 相同的 function/effects。
我不确定我问的问题是否正确,所以我会同时问:
- 如何访问原型中定义的函数对象?
- 如何在点击其他元素时执行下拉打开功能? (*注意 - 这不会像普通下拉菜单那样运行,我知道这很难,如果不是不可能强制打开的话。我想我应该能够执行单击下拉菜单时正在执行的相同功能.)
感谢您的耐心等待和对此事的帮助。
经过各种测试,我想出了这个:
$.extend(
$.DropDown.prototype, {
open: function() {
// YOUR CODE HERE
alert('YYY');
}
}
);
您可以直接在问题中链接的组件网站(DEMO 4)上在浏览器的控制台上尝试:
http://tympanus.net/Development/SimpleDropDownEffects/index4.html
原型方法 "open" 已扩展,当您单击下拉菜单时会收到警报。 您可以用相同的方式轻松扩展 "close" 方法。
希望对您有所帮助。
编辑:
要通过 javascript 触发下拉菜单,您只需这样做:
$('.cd-dropdown span').mousedown();