0

デフォルトでは、MixItUp は次のように「filter」クラスを持つすべての要素にフィルタリング クリック ハンドラを適用します。

<ul>
     <li class="filter" data-filter="dogs"> </ li>
     <li class="filter" data-filter="cats"> </ li>
     <li class="filter" data-filter="krakens"> </ li>
     <li class="filter" data-filter="dogs cats"> </ li>
</ul>

または、フィルタリングされた要素は、「filter」メソッドを使用して JavaScript を介して直接送信される場合があります。

Syntax: $ ('# Grid') mixitup ('filter', 'dogs').

しかし、私は自分のコントロールがタグを使用したい:

`<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
<option value=""> SELECT CATEGORY </ option>
<option value="mix"> ALL </ option>
<option value="cat0"> CAT 0 </ option>
<option value="cat1"> CAT 1 </ option>
<option value="cat2"> CAT 2 </ option>
<option value="cat3"> CAT 3 </ option>
</ select>`

codrop にあるこの jquery ドロップダウン リストを実装しようとしているからです: http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

このプラグインのスクリプトを query に配置します。

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

        },
        _layout : function() {

            var self = this;
            this.minZIndex = 1000;
            var value = this._transformSelect();
            this.opts = this.listopts.children( 'li' );
            this.optsCount = this.opts.length;
            this.size = { width : this.dd.width(), height : this.dd.height() };

            var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
                inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();

            this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );

            this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
            this._positionOpts();
            if( Modernizr.csstransitions ) {
                setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
            }

        },
        _transformSelect : function() {

            var optshtml = '', selectlabel = '', value = 1;
            this.$el.children( 'option' ).each( function() {

                var $this = $( this ),
                    val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) ,
                    classes = $this.attr( 'class' ),
                    selected = $this.attr( 'selected' ),
                    label = $this.text();

                if( val !== 1 ) {
                    optshtml += 
                        classes !== undefined ? 
                            '<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
                            '<li data-value="' + val + '"><span>' + label + '</span></li>';
                }

                if( selected ) {
                    selectlabel = label;
                    value = val;
                }

            } );

            this.listopts = $( '<ul/>' ).append( optshtml );
            this.selectlabel = $( '<span/>' ).append( selectlabel );
            this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el );
            this.$el.remove();

            return value;

        },
        _positionOpts : function( anim ) {

            var self = this;

            this.listopts.css( 'height', 'auto' );
            this.opts
                .each( function( i ) {
                    $( this ).css( {
                        zIndex : self.minZIndex + self.optsCount - 1 - i,
                        top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0,
                        left : 0,
                        marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
                        opacity : self.options.slidingIn ? 0 : 1,
                        transform : 'none'
                    } );
                } );

            if( !this.options.slidingIn ) {
                this.opts
                    .eq( this.optsCount - 1 )
                    .css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } )
                    .end()
                    .eq( this.optsCount - 2 )
                    .css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } )
                    .end()
                    .eq( this.optsCount - 3 )
                    .css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } );
            }

        },
        _initEvents : function() {

            var self = this;

            this.selectlabel.on( 'mousedown.dropdown', function( event ) {
                self.opened ? self.close() : self.open();
                return false;

            } );

            this.opts.on( 'click.dropdown', function() {
                if( self.opened ) {
                    var opt = $( this );
                    self.options.onOptionSelect( opt );
                    self.inputEl.val( opt.data( 'value' ) );
                    self.selectlabel.html( opt.html() );
                    self.close();
                }
            } );

        },
        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;
    };

    } )( jQuery, window );

トリックをテストしましたが、決定的なものは何も得られません!

ここで、fancyselect と mixitup スクリプトを実装した人を見つけましたが、ドロップダウン メニューで同じことを行うことはできません。私はあなたにリンクを与える！ https://github.com/hasinhayder/ResponsiveGalleryWithFiltering

4

2 に答える 2

2

同じ問題がここにあり、問題を解決しました。

1- 使用しているドロップダウン プラグインが選択タグとオプション タグを削除し、それらを ul-li と非表示の入力フィールドに置き換えていることに注意してください。name属性はタグまたはタグinputと同じです。nameidselect

あなたが持っている場合： <select id="cd-dropdown" name="cd-dropdown" class="cd-select">

次のような入力が得られます。 <input type="hidden" name="cd-dropdown" value=""></input>

2-値が次mixitupのように変更されるたびにフィルターを変更する必要があります。input

$("[name=cd-dropdown]").on("change",function(){

        item = $(this).val();
        //console.log(item);

        $('#pub-grid').mixitup('filter',item);
    });

3-上記は機能しません。入力フィールドにはhiddenリスナーがなくchange、変更されたかどうかを検出するために非表示フィールドをリッスンしている人がいないためです。そのため、入力フィールドの値を変更するたびにイベントをトリガーする必要があります。

これを行うには、ドロップダウン プラグインを開き、147 行目にトリガーを追加します。

コードの元の価格:

this.opts.on( 'click.dropdown', function() {
    if( self.opened ) {
        var opt = $( this );
        self.options.onOptionSelect( opt );
        self.inputEl.val( opt.data( 'value' ) );    
        self.selectlabel.html( opt.html() );
        self.close();
    }
} );

のトリガーを追加change:

this.opts.on( 'click.dropdown', function() {
    if( self.opened ) {
        var opt = $( this );
        self.options.onOptionSelect( opt );
        self.inputEl.val( opt.data( 'value' ) ).trigger('change');
        self.selectlabel.html( opt.html() );
        self.close();
    }
} );

それだけです。最終的なコードは次のようになります。

$('#Grid').mixitup();
$( '#cd-dropdown' ).dropdown( {
    gutter : 4
} );

$("[name=cd-dropdown]").on("change",function(){
    item = $(this).val();   
    $('#Grid').mixitup('filter',item);
});
于 2013-11-02T08:14:17.817 に答える
0

この質問が出されてからしばらく経ちましたが、新しい訪問者のために:

プラグインコードを変更せずにこれを行うことができます。

codrops ドロップダウン プラグインは、オプション値を渡すオプションを提供します。

onOptionSelect : function( opt ) {
   window.location = opt.data( 'value' );
}

ここで、mixitUp プラグインを呼び出してフィルターまたは並べ替えデータを渡すことができるため、全体のコードは次のようになります。

$( '#cd-dropdown' ).dropdown( {
 gutter : 4,
 onOptionSelect : function( opt ) {
    jQuery('#Grid').mixItUp('filter', opt.data( 'value' ));
 }
});
于 2014-09-26T18:00:11.417 に答える