带有下拉菜单的混合插件
Mixitup plugin with drop down menu
默认情况下,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>
或者,过滤的元素可以直接通过javascript使用"filter"方法。
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/
我将把这个插件的脚本用于查询:
;( 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 );
我测试了技巧,但我没有得到任何结论!
在这里,我找到了已经实现了花哨的选择和混合脚本的人,但我不能对下拉菜单做同样的事情。我给你链接!https://github.com/hasinhayder/ResponsiveGalleryWithFiltering
同样的问题在这里,我解决了这个问题。
1-您应该注意到,您正在使用的下拉插件正在删除选择和选项标签,并将它们替换为ul-li和隐藏的输入,input
的name
属性与select
标签的name
或id
相同。
所以如果你有: <select id="cd-dropdown" name="cd-dropdown" class="cd-select">
你会得到这样的输入: <input type="hidden" name="cd-dropdown" value=""></input>
2-您想要的是每当input
值更改时更改mixitup
过滤器,如下所示:
$("[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);
});
这个问题问已经有一段时间了,但对于新访客:
您可以在不更改插件代码的情况下执行此操作。
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' ));
}
});
- 如何在Angular2中使用jQuery插件
- 可以前端maven插件使用节点,npm已经安装
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 压缩phonegap中ios的图像插件
- jQuery粘性插件可变顶部间距
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 高亮显示与数组字符串一起使用时文本插件中断
- 我想在混合移动应用程序中使用Sqlite插件(Cordova)创建一个示例项目
- 多设备混合应用程序 - 有没有人让 android 的索引数据库插件工作
- 带有下拉菜单的混合插件
- 懒惰加载和混合插件的问题
- jQuery插件数据与多个实例混合
- 我可以在phonegap cordova中编写一个插件吗?它可以作为第三方工具集成在所有本地和混合应用程序中