便利なjQueryプラグインのカップル

レイアウトとコーディングを少し簡単にするために、jQueryプラグインをいくつか書きました。

おそらく彼らは誰かに役立つでしょう。 それらのコードは、インターネットで見つかった投稿に触発され、頻繁に使用されるため、プラグインとして設計されています。

最初はjquery.outlinefix.jsです。 アンカーリンクから迷惑なフレームを削除するために使用します(たとえば、<a href="#">リンク</a>)。

問題:

(リンクをクリックするとフレームが表示されます)


私はすぐにそれがcssを使用して解決できることに注意します(たとえば、 css-tricks.com / removing-the-dotted-outline )、IE6およびIE7ではなく、さらにcssを介してこの問題を解決すると、ナビゲーション(選択されているアイテムは表示されません)。 また、このようなブラウザを使用している溶媒人口とオフィスの割合は依然として残っているため、問題を完全に解決する必要があります。

したがって、プラグインの使用例:
  $( 'a.left-menu-pic')。outlinefix(); 


プラグインのソースコード:
  (関数($){
	 $ .fn.outlinefix = function(){
		 return this.live( 'mousedown'、function(e){
			 e.target.blur();
			 e.target.hideFocus = true;
			 e.target.style.outline = 'none'
		 })。live( 'mouseout'、function(e){
			 e.target.blur();
			 e.target.hideFocus = false;
			 e.target.style.outline = null;
		 });
	 }
 })(jQuery); 


2番目はjquery.parentn.jsです。 現在のレベルよりも数レベル高い親要素を選択するために使用されます。 私は本当にparent()、Parent()、Parent()のような構造が好きではなかったので、なんとか簡潔に説明したいと思いました。jqueryサイトのparentn()関数コードをコメントで見つけましたプラグインを使用すると、プロジェクトに簡単に接続できます。

使用例:
  $( 'a.left-menu-link')。each(関数(){
	 $(this).hover(function(){
		 $(this).parentn(2).find( "td:最初のa.left-menu-pic")。css( "background-position"、 "0 -59px");
	 }、
	関数(){
		 $(this).parentn(2).find( "td:最初のa.left-menu-pic")。css( "background-position"、 "0 0");
	 });
 }); 


プラグインのソースコード:
  (関数($){
	 $ .fn.parentn = function(n){
		 var $ target = $(this [0]);
		 for(var i = 0; i <n && $ target; i ++){
			 $ target = $ target.parent();
		 }
		 $ターゲットを返します。
	 }
 })(jQuery); 


ボーナス
多くの場合、プラグインはページの先頭で直接接続され、Webサーバーに大量のリクエストを生成しますが、これは非合理的です。 javascriptを1つに結合し、YUICompressorなどの圧縮プログラムによってそれらを通過させることは論理的です。

Artemy Lebedev StudioのWebサイトにある TechnogretのSergei Chikuyenkoによるスクリプトに基づいて、cssおよびjsの圧縮用に作成されたAntスクリプトを使用します。

www.everfall.com/paste/id.php?v5fxzfpdom72

必要に応じてスクリプトを調整するには、YUICompressorのant-task .jarファイルとYUIAnt.jarを忘れずに、ファイル名を変更してYUICompressor .jarファイルの正しいパスを指定するだけです。

Source: https://habr.com/ru/post/J91341/


All Articles