最終的に、画像がクリックされたときに選択ドロップダウンを切り替えたいと思います。カスタム jQuery ライブラリで定義されている「open/close」関数を利用したいのですが、「open」関数にアクセスする方法がわかりません。
質問:カスタム jQuery ライブラリで定義されている「open」または「close」関数にアクセスするにはどうすればよいですか? (詳細は以下のとおりです。注意してください。私は jQuery プロトタイプを使用した経験がありません。これがこの問題の大きな部分を占めています。オブジェクトに適切にアクセスできるかどうかさえわかりません。)
ヘルプ/提案またはガイダンスをいただければ幸いです
Codrops Simple Effects for Dropdownsの記事を参照用に使用しています。
具体的には、例/質問でデモ #4を参照しています。
この例では、ドロップダウンのスタイル設定/アニメーション化にカスタム jQuery ライブラリを使用しています。
それはかなり簡単です：
まず、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>（必要なすべてのプロジェクト ファイルを含めた後）プラグイン関数を呼び出すことができます
$( '#cd-dropdown' ).dropdown();次に、関数は「選択」マークアップを次の構造に変換します
<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>次に、ドキュメントで指定されているように、関数はクリック イベントに応答します。
最初のスパンをクリックすると、クラス「cd-active」がその親、クラス「cd-dropdown」の分割に適用されます。オプションを選択すると、それぞれのスパンが最初のスパンに挿入されます。
次に、jquery.dropdown.js ファイルには、「プロトタイプ」メソッドを使用して構築されたすべての定義が含まれています。ファイル全体は含めませんが (リンクがあるため)、アクセスしようとしている 2 つの関数と、初期化されていると思われる場所を含めます。
オープン機能
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();
},
うまくいけば、これは誰かにとって意味があり、彼らは私を助けることができます.
結論
要約すると、ページ上の画像をクリックすると、ドロップダウン自体がクリックされたときに実行されるのと同じ機能/効果がトリガーされます。
正しい質問をしているかどうかわからないので、両方質問します。
- プロトタイプで定義された関数オブジェクトにアクセスするにはどうすればよいですか?
- 別の要素をクリックしたときにドロップダウンを開く機能を実行するにはどうすればよいですか? (*注 - これは通常のドロップダウンのようには機能しません。強制的に開くことは不可能ではないにしても、難しいことはわかっています。ドロップダウンがクリックされたときに実行されているのと同じ機能を実行できるはずだと考えています.)
ご理解とご協力をお願いいたします。