06 | 2017/07 |  08

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

ID 名を持つ要素の clone 要素を複数作成する jQuery プラグイン

jQuery clone インスタンスを作成するプラグイン

このプラグインは、その名の通り、jQuery clone インスタンスを作成するものです。

ポップアップ要素を複数同時に表示させたい場合などに使用することを想定しています。

以下、アンダーライン部は補足説明ポップアップが設定してあります。

起動式は jQuery("#id").makeClone(n,target-jQuery-Instance,AfterOrBefore) で、これにより ID 名として idName を持つ要素の clone を n 個作成し、target jQuery インスタンスの後ろまたは前にまとめて配置します。

必要に応じてどの要素の前後にも clone を配置出来ます。但し、或る要素の中に配置する方法はここでは採用しませんでした。別途検討したいと思います。───願わくば、前後配置内包配置包含配置の全ての配置が可能なプラグインに出来ればと夢想しています。

特徴

  1. clone 元要素は DOM ツリーのどこにあっても構いませんが、当然存在していなければなりません(苦笑)。
  2. 一旦任意の数の clone 要素を作成した後に、異なる個数の clone を、異なる要素の前後に配置することも可能です。その場合以前に作成した clone 要素は全て削除され、改めて後で指定した数の clone 要素が、新しい対象要素の前後に配置されます。
  3. 任意の要素の前後に、任意の数だけ clone 要素を配置出来ますが、同じ ID 名の要素を元とする clone 要素を、異なる要素の前後に配置する機能はありません。
  4. 作成した clone 要素はその定義から元要素の属性を全て引き継ぎます。例えば、元要素が display:'none' となっていれば、作成された clone 要素も一切描画されませんし、絶対配置されている ID 名の要素の clone は絶対配置となります。しかし、このプラグインの返値を clones jQery インスタンスにしたので、作成後に jQuery メソッドチェーンを利用して、自由に属性を変更出来ます。
  5. clone 要素の ID 名は元要素の ID 名に番号を付加したものとしました。(例)元要素の ID 名:"animPopup" → clone 要素の ID 名:"animPopup1"、"animPopup2"、・・・
  6. clone 元要素に子要素があって(孫要素は対象外)、それにも ID 名が存在した場合、clone 要素の子要素の ID 名も、子要素の ID 名 +番号 となるようにしました。
  7. clone 要素を第二引数の前または後の、いずれに配置するかを第三引数で指定します。無指定の場合には後ろに配置します。
  8. 前又は後の配置対象となる要素には ID が振られている必要はありません。任意のしかし1つの要素だけを指定出来ます。

コード

  1:(function($){
  2:$.fn.makeClone = function(n,$target,AfterOrBefore){
  3:/* ID 名として idName を持つ要素の clone を n 個作るメソッド
  4: * 当該メソッドの起動元インスタンスは clone 元要素で ID 名付きで指定する。
  5: * 一旦 clone を作成後に、n を増やしたい場合にも、重複作成はしないよう
  6: * コーディングしてあるので、単純に n を指定すればよい。
  7: * なお、作成した clone 要素をどこに挿入するかは別問題であり、挿入用の
  8: * コーディングが別途必要となる。
  9: * release:2010/11/14
 10: */
 11:	var errFunc=function(al){al!==undefined && alert(al);return false;};
 12:	if (n===undefined) errFunc("引数が指定されていません。\n作成する clone の数を
            正の整数で指定してください。\n0 を指定すると作成済みの clone を削除します。");
 13:	if ($target && !$target.jquery) errFunc("第二引数は clone を配置する前、
            または後ろの jQuery インスタンスを指定してください。");
 14:	if (AfterOrBefore && typeof AfterOrBefore!=="boolean")
          errFunc("第三引数は、trueか fault を指定してください。\ntrue は第二引数の
          後ろに、false は前に clone を配置することを意味します。\n指定しない場合には
          true 扱いとなり後ろに配置するよう設計しました。");
 15:    if (n && (!$target || $target.length===0 || $target.length >1))
          errFunc("第二引数が適切ではありません。指定し直してください。\n
          複数の要素を指し示す指定は出来ませんし、n がゼロの時以外は無指定も
          出来ません。");
 16:
 17:	// 起動元インスタンスは必ず $("#id") 形式とする
 18:	var clones=[], $tmp, i=1, k=1, id = this.attr("id");
 19:	if (!$("#"+id).length)
 20:		return errFunc("その ID 名の要素は存在しません。");
 21:	var setClone = function(){
 22:		for (;$tmp=$("#"+id +i),$tmp.size();i++) $tmp.remove();
 23:		for (;k<n+1;k++){
 24:			clones[k-1] = $("#"+id).clone().attr("id",id +k);
 25:			var $c = clones[k-1].children(":[id]");
 26:			if ($c.size()){
 27:				$c.each(function(){
 28:					$(this).attr("id", $(this).attr("id")+k);
 29:				});
 30:			}
 31:		}
 32:		return $(clones);
 33:	}
 34:	return (AfterOrBefore===undefined || AfterOrBefore) ?
          setClone().insertAfter($target) : setClone().insertBefore($target);
 35:};
 36:})(jQuery);

サンプル

頁内に存在する ID 名「popup」要素の clone を、下のボタン直下に 5 つ作る
頁内に存在する ID 名「popup」要素の clone を、この直下、ボタンの上に 3 つ作る

これらのサンプルでは、結果を見せるために元要素の CSS 設定をいくつか変更しました。例えば、position は "relative" に、display は "block" に変えています。幅も自動的に width:100% となっています。

作成苦労談

作 成 中

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/791-f1375cc5

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
201011150534
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。