6

最终,我想在单击图像时切换选择下拉菜单。我想利用自定义 jQuery 库中定义的“打开/关闭”函数,但不知道如何访问“打开”函数。

问题:如何访问自定义 jQuery 库中定义的“打开”或“关闭”函数?(下面有更多细节 -请注意,我使用 jQuery Prototypes 的经验为零,这是这个问题的很大一部分 - 我什至不确定我是否可以正确访问该对象。)

任何帮助/建议或指导表示赞赏


我正在使用Codrops Simple Effects for Dropdowns文章作为参考。

具体来说,我在示例/问题中引用了Demo #4


该示例使用自定义 jQuery 库来设置样式/动画下拉列表:


这很简单:

  1. 首先,您布置 HTML“选择”(下拉)标记

    <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. (包括所有必要的项目文件后)您可以调用您的插件功能

    $( '#cd-dropdown' ).dropdown();
    
  3. 然后该函数将我们的“选择”标记转换为以下结构

    <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. 然后该函数响应其文档中指定的单击事件:

单击第一个跨度时,我们会将“cd-active”类应用于其父级,即具有“cd-dropdown”类的分区。选择一个选项时,相应的跨度将插入第一个。


接下来,jquery.dropdown.js 文件包含所有定义,这些定义是使用“原型”方法构建的——正如我之前提到的,我的使用经验为零。我不会包含整个文件(因为有一个链接),但我会包含我试图访问的两个函数以及我认为它正在初始化的位置。

开放功能

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();

    },

希望这对某人有意义,他们可以帮助我。


结论

总之,我想单击页面上的图像,这将触发单击下拉列表本身时执行的相同功能/效果。

我不确定我问的问题是否正确,所以我会问两个:

  1. 如何访问原型中定义的函数对象?
  2. 单击另一个元素时如何执行下拉打开功能?(*注意 - 这不会像正常的下拉菜单那样起作用,我知道这很困难,如果不是不可能强制打开的话。我想我应该能够执行单击下拉菜单时正在执行的相同功能.)

感谢您在这件事上的耐心和帮助。

4

1 回答 1

2

经过各种测试,我想出了这个:

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

您可以直接在问题中链接的组件网站(DEMO 4)上的浏览器控制台上试用它:

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

原型方法“打开”已扩展,当您单击下拉菜单时会收到警报。您可以以相同的方式轻松扩展“关闭”方法。

希望这可以帮助。

编辑:

要通过 javascript 触发下拉菜单,您只需执行以下操作:

$('.cd-dropdown span').mousedown();
于 2015-10-02T20:37:36.133 回答