03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

任意の数の clone 要素を、任意の位置に配置する jQuery プラグイン

ID 名または class 名を持つ要素の clone 要素の活用

Web ページ内に存在する要素には一般に ID 属性や class 属性を有する要素が沢山存在し、それぞれに固有の ID 値が与えられ、あるいは複数の種類の class 名が、複数の要素に対して与えられています。

さて、多くの需要があるとは思えませんが、ID や class 名を有する要素を複写して、あれこれの位置に複数表示させたい場合が、時々発生します。例えば、popup 要素を複数同時に表示させたい場合等です。

あるいはページスクロールが発生した際に、或る位置に或る要素を常時表示させたい場合に、当該要素は元のままにして、clone 要素を作って常時表示させることにも活用出来ます。このように頁内での「影武者活用」は他にもあり得ると思われます。

今回作成した jQuery プラグインは ID 属性または class 属性を有する要素の存在を前提として、それらの clone 要素を任意の数だけ作成し、それをまとめて任意の要素の前後、内部あるいは外部に配置するものです。

要素を頁内に挿入するための各種 jQuery インスタンスメソッド

HTML 要素を Javascript で操作することは DOM の操作として大変興味深いものですが、jquery が登場するまでは、スクリプトを使って要素の配置換えや挿入を行うには、大変な労力を費やす必要がありました。

しかし、jquery が登場したことにより、要素の配置換えや挿入は極めて容易な行為に変化しました。因みに要素を操作する各種 jQuery インスタンスメソッドこそ、その容易さ故に jquery の威力を知らしめる格好のツールと言えるかもしれません。

さて、頁内の任意の位置に挿入配置するか、あるいは既に頁内に存在する要素を、任意の要素の前/後/内/外に配置換えするための jQuery インスタンスメソッドは数多く存在しています。よく知られていて利用されるメソッド群だと思いますが、列挙すれば以下の通りです。

凡例:A は操作対象とする要素で S、P、B は A 要素の配置対象とする要素

  1. S.after(A) or A.insertAfter(S) : A 要素を兄弟要素 S の直後に配置
  2. S.before(A) or A.insertBefore(S) : A 要素を兄弟要素 S の直前に配置
  3. P.append(A) or A.appendTo(P) : A 要素を親要素 P の最後の子要素として配置
  4. P.prepend(A) or A.prependTo(P) : A 要素を親要素 P の最初の子要素として配置
  5. P.html(A) : A 要素を親要素 P の子要素として配置
  6. P.wrapInner(A) : P 要素に子要素 A を挿入して、それ迄存在した全ての子要素を A の子要素( = P の孫要素)に変更する
  7. A.wrap(P) : A 要素(複数ある場合にはその各々)を P 要素で包含する
  8. A.wrapAll(P) : A 要素の全てをまとめて P 要素で包含する
  9. B.replaceWith(A) or A.replaceAll(B) : B 要素を A 要素で置換する

▲ToTop

プラグインの動作結果を実例で示します

何はともあれ、ぐだぐだ説明する前にどんなプラグインが完成したのか示すべきでしょう。

行われる一連の作業の概要は次の通りです。

  1. 以下のボタンをクリックすると、
  2. 直ぐに clone 要素の配置方法を選択する select ボックスが表示されます
  3. ボックス内のメソッドリストから配置メソッドを選択すると、
  4. この頁内にあって display:'none' で隠蔽されている ID名 'popup' 要素を元とする clone が作成され、
  5. 選択された配置メソッドによってボタン内に書かれた要素を配置基準として clone 要素が配置されます。

それぞれのボタンをクリックすると、要素配置用メソッドの一覧が選択枝として表示されるので、適当なメソッドをクリックしてください。すると指定した要素の前後、内部または外部に、popup 要素の clone が配置されます。

頁内に存在する ID 名「popup」要素の clone を 5 つ作成し、entry_body 部を配置対象として配置する。
頁内に存在する ID 名「popup」要素の clone を 3 つ作成し、この下のボタンを配置対象として配置する

実例2

今度は頁内に表示されている要素の clone を作成・配置します。ボタンをクリックして表示されるメソッドリストから、適当なメソッドを選択してクリックすれば、clone 要素が各々のボタンの近傍の指定した位置に配置されます。

まずページトップにある時計から。なお、元の時計は絶対配置されていてドラグ可能ですが、clone 時計は相対配置しますのでドラグは出来ません。

次はナビゲーションバーの clone を作って配置します。時計の場合もそうでしたが、makeNputClone 起動に際して第三引数の「 content 」を指定しなければ、第一引数である clone 元要素の clone がコンテンツとしてそのまま配置されます。

プラグイン設計上考慮したこと(1):数ある要素配置メソッドを選択的に適用させるために

プラグイン作成に際してまず検討したことは、上記のように沢山ある要素配置メソッドを、プラグイン使用時にどのように指定させるか、と言う点でした。

まさか、一々引数にメソッドを書き込んで指定する方法では、とても供用出来ません。実際、直前のエントリイで述べた方法は、まさに引数でメソッドを指定する類のものでした。

これではいけない、汎用性が全くないと判断し、その改善を思い立った訳ですが、select ボックスの活用を結論づけるまでにさほど時間は掛りませんでした。

しかし、select ボックスを表示させる方法やその配置方法などを考え始めた時、それをこのプラグイン内でゼロからコーディングすることは、いかにも稚拙であると思えました。

そこで閃きました。汎用性を持たせるために時間を掛けて改訂した animatedPopup プラグインメソッドを利用すればよい!───

このプラグインを使って、select ボックスをポップアップさせれば、clone 要素を配置した直後に、その位置までページスクロールさせるコーディングを行った時に、animatedPopup メソッドで表示させたポップアップ要素は、スクロールイベントに対応しているので、select ボックスも追随してスクロールされ、window 内の同じ位置に表示され続ける!

こうして、clone を作成・配置するプラグインは、その中から別のプラグイン animatedPopup を呼び出すものとなりました。

▲ToTop

プラグイン設計上考慮したこと(2):配置メソッドの選択が連続的に行えるように

このプラグインは clone 要素の作成それ自体よりもその頁内配置に興味を持っています。ですから。あれこれの配置を容易に試みることが出来なければ意味がありません。

そこで、連続して異なるメソッドを選択出来、かつ作成した clone 要素はその都度削除され、新たに作成された clone 要素を異なるメソッドで配置することにしました。

こうして各種配置メソッドを連続的に試すことを可能としたため、結果として各種配置メソッドの効果と差異を、一目瞭然に閲覧することが可能となりました。

2 つのプラグインから使用できる変数について

今回のプラグインで最も苦労したのは、makeNputClone メソッド内から animatedPopup メソッドを起動するにあたり、前者と後者で共通して利用する変数をどう定義するか、ということでした。

前者から一旦後者が呼び出されてしまった後でば、一般に前者内で定義した変数は後者では使用できませんし、前者から後者の変数も利用できません。引数を使って渡す方法もありますが、既に後者の引数定義は確定しており、makeNputClone メソッドからの呼び出しのために後者の引数を追加するのは邪道です。またそれぞれの関数のプロパティに変数を登録する選択肢もありますが、これは変数の記述文字数が多くなるので、コード作成上面倒です。

そこでグローバル変数である $ 変数のプロパティ利用を考えざるを得ませんでした。この方法は 「 余り美しくない 」 のかもしれませんが、他の方法を思いつかず、やむを得ないと判断しました。$.o プロパティを作り、そこに両方のメソッドで共通して使用する変数を登録することにしました。

▲ToTop

makeNputClone プラグインコード

詳細な解説は面倒なので、大きなブロック単位で簡単に説明します。

1 ~ 23 行【エラー処理ブロック】

引数をチェックしてエラーを表示するためのコーディングです。引数なしでプラグインを起動した場合には、簡易 HELP 機能が表示され、引数の指定方法を説明する alert が表示されるようにしました。

25 ~ 27 行【初期値整理ブロック】

初期値は例によって、$.extend クラスメソッドを活用して、既定値と引数値を併合します。プラグインメソッドの呼び出し元となる jQuery インスタンスを $.o プロパティに $target 名で登録します。

29 ~ 71 行 【 clone 作成・配置メソッド定義ブロック 】
fireMethod 関数は animate メソッドによるアニメーションが終わった時点で呼び出される関数として定義しました。その名の通り、配置「メソッド」を起動する機能を持たせました。

プラグインメソッドの起動元は、clone 要素の配置基準となる要素です。一旦プラグインを起動すれば select ボックス内からどのような配置方法を選択した場合でも、配置される clone はずっと同じものです。ですから配置の都度作成する必要はありません。

また、別の要素から当該プラグインを起動した後に、再び以前起動元とした要素から起動した場合でも、clone の作成元として指定した要素が替わらない限り、clone を作り直す必要はありません。

そのため、data クラスメソッドを活用して効率的なインタープリトが可能となるようにしました。( #52~54 )

73 ~ 85 行 【 DOM Ready・selectリスト表示アニメーションブロック 】

最初の 2 行は animate メソッドの complete 引数に代入する関数です。第二引数で makeNputClone メソッドの全ての引数を fireMethod 関数に渡しています。引数を一括指定出来る function.apply メソッドの大きな利点を活用しました。

DOM Ready 関数の最初で改めて第一引数 selector のチェックを行っています。これはエラー処理ブロックでは引数をその文字列で評価しましたが、ここでは指定した ID 名や class 名の要素の存在をチェックしています。

指定した名称が、jquery が解釈する文字列としては正しくても、肝心の該当要素が存在しなければ意味がないからです。

82 ~ 83 行で animatedPopup プラグインを使って、select ボックスを表示するアニメーションを引き起こします。

▲ToTop

88 ~ 164 行は既定値オブジェクトです。3 つのプロパティ別に説明します。

88 ~ 101 行 【 select ボックスリスト作成用 】

select ボックスを作成するための HTML 文字列です。

select リストの文字がデフォルトでは小さすぎるので、fontサイズを指定しました。

適用する配置メソッドの作用が分かりやすいよう、リスト文字列では配置先、メソッド、配置される要素の区別を表示しました。

102 ~ 162 行 【 配置メソッドオブジェクト 】

適用する配置メソッドをこのオブジェクトのプロパティ名とプロパティ値として格納しています。select ボックスでメソッドが選択されると、change イベントが発生し、対応するイベントハンドラー内で、このオブジェクトの関数が呼び出されて clone 要素が所定の位置に配置されます。

この部分で最も苦労したのは html メソッドです。作った clone 要素を敢えて html メソッドの引数として挿入するわけですから、HTML 文字列に変換しなければなりません。当然 id 名や class 名も保持させなければなりません。またスタイル属性値も最小限のものは適用させるようにしないと、clone らしくありません。

これらのハードルはそれぞれにかなり高く、文字列化とスタイル属性値の複写コードには相当苦労しました。

163 行 【 第一引数 selector の格納庫 】
同一要素からの二度目以降 のmakeNputClone メソッド呼び出しの際に、第一引数 selector の値を従前値のそれと比べるために使用します。52 行で行う比較が終わる迄は、このプロパティには、以前に起動された時の selector 名(但し、一度目の起動の際には null )が記憶されます。比較後には今回の selector 値がこのプロパティに保存されます(55 行)。
(function($){
$.fn.makeNputClone = function(selector,n,content,cloneCSS){
/* selector で抽出される最初の要素の clone を n 個作り、それを select
 * ボックス内から選択した jQuery メソッドによって、起動元インスタンス
 * の内外または前後に配置するメソッド。当該プラグインから animatedPopup
 * メソッドを起動し、select ボックスの表示に利用する。
 * selectBox から順次異なる配置位置を選択し、clone の配置換えが可能。
 * 一旦 clone を作成後に n を増やしたい場合にも、重複作成はしないよう
 * コーディングしてあるので、単純に n を指定すればよい。
 * 引数なしで起動すると引数の指定方法を alert 表示するようした。
 * release:2010/11/21
 */
  1:  var errFunc=function(al){al!==undefined && alert(al);return},p;
  2:  if (!arguments.length){
  3:    var text ="■引数の指定方法■\n"
  4:    text+="jQuery(elem).makeNputClone(selector,n,content,cloneCSS)\n\n";
  5:    text+="selector : string of original ID name\n";
  6:    text+="n : number of clones\n";
  7:    text+="content : HTML strings of clone's inner content\n";
  8:    text+="cloneCSS : CSS Object of clone";
  9:    return errFunc(text);
 10:  }
 11:  if (typeof selector !== "string" || selector.indexOf("#")<0 && selector.indexOf(".")<0){
 12:    return errFunc("指定した id 名や class 名の要素は存在しません。\n
          存在する id 名や class 名を指定してください。");
 13:  }
 14:  if (n===undefined || n===null || typeof n!=="number")
 15:    return errFunc("第二引数が不適切です。\n\n第二引数には、作成する
        clone の数を正の整数で指定してください。\n0 を指定すると作成済み
        の clone を削除します。");
 16:  if (content && typeof content !=="string"){
 17:    if (typeof content ==="object" && cloneCSS===undefined){
 18:      cloneCSS = content;
 19:    } else return errFunc("第三引数が適切ではありません。\n\n
 20:      第三引数は clone に挿入する HTML テキスト文としてください。\n
          content を指定しなければ、元要素のコンテンツが clone 要素の
          コンテンツになります。");
 21:  }
 22:  if (cloneCSS && typeof cloneCSS !=="object")
 23:    return errFunc("第四引数が適切ではありません。\n\n
        第四引数は clone に適用する CSS オブジェクトとしてください。\n
        cloneCSS を指定しなければ、元要素のスタイル設定が clone 要素に
        そのまま複写されます。");
 24:
 25:  $.o = $.data(this[0],"opts") || $.data(this[0],"opts",
 26:    $.extend({}, $.fn.makeNputClone.opts, {content:content || null,
          cloneCSS:cloneCSS || null, pluginFunc:arguments.callee,
          pluginArgs:arguments}));
 27:  $.o.$target = this;
 28:
 29:  var fireMethod = function(selector,n,content,cloneCSS){
 30:    var createClone = function(){
 31:      var clonesArray=[], $tmp=$(selector+i), temp, i=1, k=1;
 32:      for (;$tmp.length;i++) $tmp.remove();
 33:      for (; k< n+1; k++){
 34:        var temp = $($(selector)[0]).clone(true)
                .addClass(selector.slice(1) +"clone"+" draggable")
 35:        if (selector.indexOf("#")===0)
 36:          temp.attr('id',selector.slice(1)+k);
 37:        if ($.o.content)
 38:          temp.html('This is No.'+ k +' clone. '+$.o.content);
 39:        if ($.o.cloneCSS)
 40:          temp.css($.o.cloneCSS);
 41:        var $c = temp.children(":[id]");
 42:        if ($c.size()){
 43:          $c.each(function(){
 44:            $(this).attr("id", $(this).attr(selector.slice(1)+k));
 45:          });
 46:        }
 47:        clonesArray[k-1]=temp[0];
 48:      }
 49:      return $(clonesArray);
 50:    }
 51:    
 52:    $.o.$clone = $.o.beforeSelector === selector &&
 53:      $.data($.o.$target[0],"createClone") || 
 54:      $.data($.o.$target[0],"createClone",createClone());
 55:    $.o.beforeSelector = selector;
 56:    $("#thissel").change(function(){
 57:      var index = this.selectedIndex,  
 58:        resMethodName = this.options[index].value;
 59:      for (p in $.o.methodList){
 60:        if (p !== resMethodName) continue;
 61:        else {
 62:          $.o.methodList[p](); // cloneを頁に挿入する
 63:          var $its1=$("[class*='clone']:first");
 64:          $its1.length && $(window).scrollTop($its1.offset().top);
 65:          $its1.length && $its1.offset().left > $.F.getWinSize &&
                $(window).scrollLeft($its1.offset().left);
 66:          break;
 67:        }
 68:      }
 69:      // return $.o.$clone;
 70:    });
 71:  }
 72: 
 73:  var completeFunc = function(){
 74:    return fireMethod.apply($.o.$target, $.o.pluginArgs);
 75:  }
 76:  $(function(){
 77:    if (selector.indexOf("#")===0 && !$(selector).length){
 78:      return errFunc("指定した ID 名の要素は存在しません。\n
          存在する ID 名を指定してください。\nなお、冒頭に#を付ける
          ことを忘れないでください。");
 79:    } else if (selector.indexOf(".")===0 && !$(selector).length){
 80:      return errFunc("指定した class 名の要素は存在しません。\n
          存在する class 名を指定してください。\nなお、冒頭に '.' を
          付けることを忘れないでください。");
 81:    }
 82:    $.o.$target.animatedPopup($.o.selBoxHTML,{
 83:      popupCSS:{left:"center",top:"center"},duration:400,
            easing:"easeOutBack",complete:completeFunc
 84:    });
 85:  });
 86:};
 87: 
 88:$.fn.makeNputClone.opts = {
 89:  selBoxHTML :'<form><select id="thissel" name="thissel" size=12 style="font-weight:bold;font-size:16px">'
 90:    + '<option value="" disabled="desabled" style="text-align:center">メソッドを選択</option>'
 91:    + '<option value="append" selected="selected">target.append(clone)</option>'
 92:    + '<option value="prepend">target.prepend(clone)</option>'
 93:    + '<option value="after">target.after(clone)</option>'
 94:    + '<option value="before">target.before(clone)</option>'
 95:    + '<option value="wrap">target.wrap(clone)</option>'
 96:    + '<option value="wrapAll">target.wrapAll(clone)</option>'
 97:    + '<option value="wrapInner">target.wrapInner(clone)</option>'
 98:    + '<option value="replaceWith">target.replaceWith(clone)</option>'
 99:    + '<option value="replaceAll">target.replaceAll(clone)</option>'
100:    + '<option value="html">target.html(clone)</option>'
101:    + '<option value="remove">clone.remove</option></select></form>',
102:  methodList : {
103:    append: function(){
104:      $.o.methodList.remove();
105:      $.o.$target.append($.o.$clone);
106:    },
107:    prepend: function(){
108:      $.o.methodList.remove();
109:      $.o.$target.prepend($.o.$clone);
110:    },
111:    after: function(){
112:      $.o.methodList.remove();
113:      $.o.$target.after($.o.$clone);
114:    },
115:    before: function(){
116:      $.o.methodList.remove();
117:      $.o.$target.before($.o.$clone);
118:    },
119:    wrap: function(){
120:      $.o.methodList.remove();
121:      $.o.$target.wrap($.o.$clone);
122:    },
123:    wrapAll: function(){
124:      $.o.methodList.remove();
125:      $.o.$target.wrapAll($.o.$clone);
126:    },
127:    wrapInner: function(){
128:      $.o.methodList.remove();
129:      $.o.$target.wrapInner($.o.$clone);
130:    },
131:    replaceWith: function(){
132:      $.o.methodList.remove();
133:      $.o.$target.replaceWith($.o.$clone);
134:    },
135:    replaceAll: function(){
136:      $.o.methodList.remove();
137:      $.o.$clone.replaceAll($.o.$target);
138:    },
139:    html: function(){
140:      $.o.methodList.remove();
141:      var text="";
142:      $.o.$clone.each(function(){
143:        text +="<"+this.nodeName+" id='"+ +$(this).attr("id")+
            "' class='"+$(this).attr("class")+"'>"+$(this).text()+
            "</"+this.nodeName+">";
144:      });
145:      $.o.$target.html(text);
146:      var clone = $("[class*=clone]");
147:      for (var i=0; i<clone.length; i++){
148:        $.each(["width","height","margin","border","padding",
              "background"],  function(){
149:          clone[i].style[this] = $.o.$clone[i].style[this];
150:        })
151:      }
152:    },
153:    remove: function(){
154:      var clone = $("[class*=clone]");
155:      if (clone.length) {
156:        if (clone.has($.o.$target).length){
157:          $(clone[0]).before($(clone[0]).children());
158:        }
159:        clone.remove();
160:      }
161:    }
162:  },
163:  beforeSelector:null
164:}
165:})(jQuery);

▲ToTop

コード解説を行うためにコード全文から抜粋を行うコード

上記の説明では副題をクリックすると該当部分のコードが抜粋表示されます。その表示にも animatedPopup メソッドを活用したのは余興ですが、初めて採用したこの方法では、一箇所に説明用コードを全文書き込むだけで、後は抜粋作業を Javascript を使って行わせれば、容易に抜粋が可能となることを実証したつもりです。

長いエントリイの最後に、コード全文からその一部を抜粋するためのコーディングについて触れておきます。

ネームエンティティ問題

最初は、ブラウザに表示されたエントリイ内のコード全文を検索対象として、抜粋を行おうとしました。ところがこの方法には大きな落とし穴が待っていました。ネームエントリイ問題です。

コード全文掲載に当たっては、HTML 文上意味のある記号(全角で表記すると、"<"、">"、"&" 等)をネームエンティティ変換しててから、エントリイを投稿しています。それによってブログが描画される際に、これらの特殊記号は HTML 文上意味のないものとして扱われ、正しく表記されることになります。こうして、例えば投稿時には &lt; と半角で書いていた記号は、< になって表記されることになります。

さて、この正しく表記されたエントリイ上の文字列から、Javascript を使って抜粋対象を抽出すると、その抽出部分に < が含まれていた場合に、そのまま抽出結果をブログに貼り付けると問題が発生します。単なる記号としての < ではなく、タグ開始文字として HTML 文上意味のある記号となってしまうのです。

この結果、ブログエントリイから部分抽出した結果をそのまま投稿すると、表示が崩れてしまうのです。

再びネームエンティティ変換して原稿とすればよい、と考え試みてみましたが成功しませんでした。投稿した時点のネームエンティティ変換と全く同一にはならないのです。空白文字(改行マークや半角スペースなど)で区切られていない ; がネームエンティティ表記の;と誤解されるらしく、正しく復号することが出来ないのです。(ネームエンティティ変換実施(A)→ブラウザで表記(B)→再度のネームエンティティ変換(C)と辿った時に、A と C は同一にはならないのです)

解明しませんでしたが、他にも正しい「復号」を妨げる要因が複数存在しているようでした。

そこで AJax 通信を使用した

試行錯誤の結果、表記されたブラウザ内の全文コードから Javascript を使って部分抜粋を行い、抜粋部分を再び投稿する方法は、適切ではないと判断するに至りました。

そして替わりに思いついたのが、Ajax 通信を活用することでした。これによりブログエントリイ全文をテキスト形式で取得し、その中から必要部分を抜粋すればよい。そうすればネームエンティティ変換した文字は原文のまま、変換されたままで取得できます。つまり、そこから抜粋した文字列もネームエンティティ変換されたままの状態なので、意図したとおりの結果に辿り着ける───こう考えたのです。

そしてそれは見事に成功しました。

そのコーディングは以下の通りです。

  1:  var pageBody;
  2:  $.ajax({
  3:    url: このサイトのurl,
  4:    dataType:"text",
  5:    success: function(data){
  6:      pageBody = data;
  7:    }
  8:  });
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
  9:  var selectText = function(start,end){ 
 10:    return this.slice(this.indexOf(start),this.indexOf(end)-1);
 11:  };

利用は 1 行目から 8 行目がブログ・エントリイ・オープン時に実行させることを前提にしています。開いた暫く後になってからしか、コードの部分閲覧は発生しないので、その頃には十分 Ajax 通信は complete している訳で、pageBody 変数に通信結果が代入されているはずです。

つまり、Ajax 通信の成功有無はチェックする必要がないと判断しました。

利用は、selectText.call(pageBody,"抽出開始文字","次の抽出開始文字") で行います。敢えて、pageBody から関数を call 起動し、呼び出された関数内で this が pageBody を参照するようにしました。

「開始文字」から「次の開始文字」の 1 文字前迄の文字列群を、Ajax 通信で取得したブログページ全文文字列情報 pageBody から sliceする訳です。これによりコード全文から、必要部分を抜粋することが出来ます。

具体的に抽出例に触れてみます。

下のコードはコード全文から、「 1:」で始まる部分から、「 24:」で始まる部分の 1 文字前迄を抽出し、それを pre タグで囲んで animatedPopup メソッドの第一引数とし、その他当該メソッドに必要な引数を指定して、animatedPopup メソッドを起動するコーディングです。

ID 名 「dt792-1」要素のクリックイベントハンドラーとして、animatedPopup 関数を登録しています。

padding 指定を行っていますが、ブログテンプレートの指定が優先されてしまうようで、引数で指定した padding 通りには animatedPopup しません。これは animatedPopup において popup アップするコンテンツは div 要素で囲まれているのですが、この div 要素にテンプレート固有のスタイル設定が施されているためであると、推測できます。

$("#dt792-1").click(function(){
  $(this).animatedPopup("<pre id='code792-1' class='point ml_1 lh_11 ov_a'>"
    + selectText.call(pageBody,"  1:"," 24:")+ "</pre>",
    {popupCSS:{top:"10px",right:"10px",width:600,origin:2,textAlign:"left",
    paddingLeft:"3px !important",paddingTop:"3px !important",paddingBottom:"3px !important",paddingLeft:"3px !important"}});
}); 

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

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