http://rw-git.com/social_test.js
このスクリプトの最後の部分
$(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>")
これがWEB上の見栄えの部分になります。
このスクリプトをHTML上で、
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<!-- /SOCIAL -->
このように呼び出すことで使用するのですが、出来れば外部ファイルの見栄えの部分を抜き出して上記のHTML上に呼び出す部分に追記させてやりたいのですがどのようにしたらよろしいですか？
No.3
1504
493
100pt
こういうことですか？単純なDOM操作なのでテンプレートみたいなコントロールをしたいならもっと練る必要があるけど。
サンプル
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://rw-git.com/social_test.js"></script> <!-- /SOCIAL --> <script type="text/javascript"> $(function() { //１， 改行を自由に入れれるようにする //deliciousの前に改行を挿入 $(".entry .theme > span .Delicious").before('<br>'); //イザの後ろに改行を挿入 $(".entry .theme a[href^='http://www.iza.ne.jp']").after('<br>'); //２， 順番を入れ替えれるようにする //facebookのmixiの後ろに移動する var fb = $(".entry .theme iframe[src^='http://www.facebook.com']"); $(".entry .theme .mixi").after(fb); //３， 使わないブックマークを表示させない //グリーを削除 $(".entry .theme a[href^='http://gree.jp/']").remove(); //４，.entry .themeから.entry .footに移動 $(".entry .foot").append($(".entry .theme > span")); }); </script> </head> <body> <div class="entry"> <div class="theme"></div> <div class="foot"> <a href="hoge.html">記事URL</a> </div> </div> </body> </html>
追記：
変数をグローバル化
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <!--<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>--> <script type="text/javascript"> $(function(){var c=location.href;var m=document.title;var h=$(".foot a:contains('記事URL')");for(i=0;i<h.length;i++){var c=h[i];var p='<a href="http://gree.jp/?mode=share&act=write&button_type=4&button_size=16&url='+c+'" target="blank" TITLE="GREE Social Feedbackに登録"><img src="http://i.gree.jp/img/share/button/btn_logo_16.png" width="16" height="16"></a>';var n='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=button_count&show_faces=true&width=70&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe> ';var l='<a href="http://b.hatena.ne.jp/append?'+c+'" target="blank" CLASS="hatebu" TITLE="はてなブックマークに登録"><img height="20" width="20" src="http://b.st-hatena.com/images/entry-button/button-only.gif" /></a> <a href="http://b.hatena.ne.jp/entry/'+c+'" target="blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+c+'" /></a>';var d='<a href="http://mixi.jp/simplepost/voice?status='+m+""+c+'" target="blank" CLASS="mixi" TITLE="mixiボイスでこの記事について呟く"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_voice_1.png"></a>';var e='<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+m+"&u="+c+'" target="blank" CLASS="yahoo" TITLE="Yahooブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16"></a>';var g='<a href="http://clip.livedoor.com/redirect?link='+c+"&title="+m+'" CLASS="ldclip-redirect" target="blank" TITLE="livedoorクリップに登録"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16"></a>';var b='<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="affilifollowall" data-text="'+m+' " data-url="'+c+'">Tweet</a>';var k=b+'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script>';var f='<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk='+c+"&title="+m+'" target="_blank" CLASS="google" TITLE="Googleブックマークに登録"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16"></a>';var a='<a href="http://clips.yahoo.co.jp/my/addclip/clipbutton?title='+m+"&url="+c+'" target="_blank" CLASS="yahooclip" TITLE="Yahooクリップに登録"><img src="http://i.yimg.jp/images/sicons/clip16.gif" width="16" height="16"></a>';var dl='<a href="http://www.delicious.com/save?v=5&noui&jump=close&url='+c+"&title="+m+'" target="blank" CLASS="Delicious" TITLE="Deliciousに登録"><img src="http://l.yimg.com/hr/img/delicious.small.gif" width="16" height="16"></a>';var ns='<a href="http://newsing.jp/nbutton?url='+c+"&title="+m+'" CLASS="newsing" target="blank" TITLE="newsingに登録"><img src="http://image.newsing.jp/common/images/newsingit/newsing_button_16.gif" width="16" height="16"></a>';var iz='<a href="http://www.iza.ne.jp/bookmark/add/regist/back/'+c+'" target="blank" TITLE="イザ！ブックマークに登録"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" width="16" height="16"></a>';var bz='<a href="http://buzzurl.jp/entry/'+c+'" target="blank" TITLE="Buzzurlに登録"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif" width="16" height="16"></a>';var dg='<a href="http://digg.com/submit?url='+c+"&title="+m+'" target="blank" TITLE="diggに登録"><img src="http://widgets.digg.com/img/button/diggThisDigger.png" width="16" height="16"></a>';var gpo='<g:plusone size="medium"></g:plusone>'; $(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>"); window.l = l; window.gpo = gpo; window.k = k; window.n = n; window.d = d; window.g = g; window.e = e; window.a = a; window.f = f; window.dl = dl; window.dg = dg; window.p = p; window.ns = ns; window.iz = iz; window.bz = bz; }}); </script> <!-- /SOCIAL --> <script type="text/javascript"> $(function() { $('.new_entry').html(p + iz + '<br>' + n); }); </script> </head> <body> <div class="entry"> <div class="theme"></div> <div class="foot"> <a href="hoge.html">記事URL</a> </div> </div> <br><br> <div class="new_entry"> <div> </body> </html>
No.1
44474
100pt
ご質問の主旨で分からない部分があります。
見栄えの部分を抜き出して
この部分の意味を具体的にお知らせください。
質問で抜き出されている部分は、多くの変数が関数の他の部分と絡んでいますので、それだけ抜き出しても何の機能も果たさないと思います。変数の扱いをどうすべきなのか、お知らせください。
じゅぴたー さんへ
ボクもJavaScriptのスコープなどの詳細な知識が無いので変数の説明がうまくできない部分があるかもしれませんが、主旨としましては「HTMLに書きこむほうで見栄えを指定したい」です。
外部ファイルにボタンの生成から見栄えまで全て内包されている状態から、「見栄え」に当たる部分を抜き出すための外部ファイルの変更点と呼び出し部分の変更点を示唆していただけたらと思っています。
No.2
1504493
100pt
部分的に抜き出すのはいろいろ面倒そうなので、spanにidを付けて、後からjavascriptを使って見栄えを編集するようにしてみてはいかがでしょうか。
$(".entry .theme").eq(i).append(" <span id='mySocial'>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>")
のように編集して、以下のように呼び出して加工する
<!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://rw-git.com/social_test.js"></script> <script type="text/javascript"> //$('#mySocial')で呼び出してJavaScriptでDOMを編集する。 </script> <!-- /SOCIAL -->
どう見栄えを変えたいのかと、span内のHTMLをコメントにでも書いてもらえれば具体的なアドバイスができます。
元の見栄え http://jsfiddle.net/bMAms/
簡単なサンプル http://jsfiddle.net/bMAms/1/
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://rw-git.com/social_test.js"></script> <!-- /SOCIAL --> <script type="text/javascript"> $(function() { //グリーを削除 $(".entry .theme a[href^='http://gree.jp/']").remove(); //brタグを削除 $(".entry .theme > span > br").remove(); }); </script> </head> <body> <div class="entry"> <div class="theme"></div> </div> <div class="foot"> <a href="hoge.html">記事URL</a> </div> </body> </html>
これで再現はできますね。どう見栄えを変えたいのでしょうか。
(id付けなくても$(".entry .theme")で辿ればいけますね)
参考：
回答有難うございます
狙いとしては、外部ファイルはいじらずに呼び出す側で見栄えをコントロールできるようにすることで、外部ファイルの多数ユーザでの使い回しができるようにしたいということです。
見栄えについてカスタマイズしたい点は、
１， 改行を自由に入れれるようにする
２， 順番を入れ替えれるようにする
３， 使わないブックマークを表示させない
４， 記事タイトル部分か記事フッターかを選択できるようにする(entry .themeの部分がその指定に当たる部分です。entry .footが記事の一番下に表示)
この４点です。実際回答にあった方法で簡単に３は実現できると思います。
この４点をカスタマイズできるようにするための改善点を示唆していただけたらと思っています。
４に関してはできなくても構いませんが、(外部ファイルをタイトル用とフッター用の２つを用意することで対応できると思うので)１と２と３は必須です。
よろしくお願いします。
No.3
1504493
ここでベストアンサー
100pt
こういうことですか？単純なDOM操作なのでテンプレートみたいなコントロールをしたいならもっと練る必要があるけど。
サンプル
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://rw-git.com/social_test.js"></script> <!-- /SOCIAL --> <script type="text/javascript"> $(function() { //１， 改行を自由に入れれるようにする //deliciousの前に改行を挿入 $(".entry .theme > span .Delicious").before('<br>'); //イザの後ろに改行を挿入 $(".entry .theme a[href^='http://www.iza.ne.jp']").after('<br>'); //２， 順番を入れ替えれるようにする //facebookのmixiの後ろに移動する var fb = $(".entry .theme iframe[src^='http://www.facebook.com']"); $(".entry .theme .mixi").after(fb); //３， 使わないブックマークを表示させない //グリーを削除 $(".entry .theme a[href^='http://gree.jp/']").remove(); //４，.entry .themeから.entry .footに移動 $(".entry .foot").append($(".entry .theme > span")); }); </script> </head> <body> <div class="entry"> <div class="theme"></div> <div class="foot"> <a href="hoge.html">記事URL</a> </div> </div> </body> </html>
追記：
変数をグローバル化
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- SOCIAL --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <!--<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>--> <script type="text/javascript"> $(function(){var c=location.href;var m=document.title;var h=$(".foot a:contains('記事URL')");for(i=0;i<h.length;i++){var c=h[i];var p='<a href="http://gree.jp/?mode=share&act=write&button_type=4&button_size=16&url='+c+'" target="blank" TITLE="GREE Social Feedbackに登録"><img src="http://i.gree.jp/img/share/button/btn_logo_16.png" width="16" height="16"></a>';var n='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=button_count&show_faces=true&width=70&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe> ';var l='<a href="http://b.hatena.ne.jp/append?'+c+'" target="blank" CLASS="hatebu" TITLE="はてなブックマークに登録"><img height="20" width="20" src="http://b.st-hatena.com/images/entry-button/button-only.gif" /></a> <a href="http://b.hatena.ne.jp/entry/'+c+'" target="blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+c+'" /></a>';var d='<a href="http://mixi.jp/simplepost/voice?status='+m+""+c+'" target="blank" CLASS="mixi" TITLE="mixiボイスでこの記事について呟く"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_voice_1.png"></a>';var e='<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+m+"&u="+c+'" target="blank" CLASS="yahoo" TITLE="Yahooブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16"></a>';var g='<a href="http://clip.livedoor.com/redirect?link='+c+"&title="+m+'" CLASS="ldclip-redirect" target="blank" TITLE="livedoorクリップに登録"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16"></a>';var b='<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="affilifollowall" data-text="'+m+' " data-url="'+c+'">Tweet</a>';var k=b+'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script>';var f='<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk='+c+"&title="+m+'" target="_blank" CLASS="google" TITLE="Googleブックマークに登録"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16"></a>';var a='<a href="http://clips.yahoo.co.jp/my/addclip/clipbutton?title='+m+"&url="+c+'" target="_blank" CLASS="yahooclip" TITLE="Yahooクリップに登録"><img src="http://i.yimg.jp/images/sicons/clip16.gif" width="16" height="16"></a>';var dl='<a href="http://www.delicious.com/save?v=5&noui&jump=close&url='+c+"&title="+m+'" target="blank" CLASS="Delicious" TITLE="Deliciousに登録"><img src="http://l.yimg.com/hr/img/delicious.small.gif" width="16" height="16"></a>';var ns='<a href="http://newsing.jp/nbutton?url='+c+"&title="+m+'" CLASS="newsing" target="blank" TITLE="newsingに登録"><img src="http://image.newsing.jp/common/images/newsingit/newsing_button_16.gif" width="16" height="16"></a>';var iz='<a href="http://www.iza.ne.jp/bookmark/add/regist/back/'+c+'" target="blank" TITLE="イザ！ブックマークに登録"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" width="16" height="16"></a>';var bz='<a href="http://buzzurl.jp/entry/'+c+'" target="blank" TITLE="Buzzurlに登録"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif" width="16" height="16"></a>';var dg='<a href="http://digg.com/submit?url='+c+"&title="+m+'" target="blank" TITLE="diggに登録"><img src="http://widgets.digg.com/img/button/diggThisDigger.png" width="16" height="16"></a>';var gpo='<g:plusone size="medium"></g:plusone>'; $(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>"); window.l = l; window.gpo = gpo; window.k = k; window.n = n; window.d = d; window.g = g; window.e = e; window.a = a; window.f = f; window.dl = dl; window.dg = dg; window.p = p; window.ns = ns; window.iz = iz; window.bz = bz; }}); </script> <!-- /SOCIAL --> <script type="text/javascript"> $(function() { $('.new_entry').html(p + iz + '<br>' + n); }); </script> </head> <body> <div class="entry"> <div class="theme"></div> <div class="foot"> <a href="hoge.html">記事URL</a> </div> </div> <br><br> <div class="new_entry"> <div> </body> </html>
すみません、時間差でこの回答を見ずにコメントを出してしまいました。
ほぼリクエストさせていただいた部分をクリアしている内容で大変助かります。
お聞きしたいのは、jqueryの呼び出しはhtmlのヘッダー以外で(スクリプトの直前で)読み込んでも問題ないでしょうか？
もう一つは特定の改行は削除可能でしょうか？こちらに関しては不可であれば最初改行を内包しない状態の外部ファイルを用意し、必要に応じて入れて貰う方法が取れると思うのである程度自己解決は可能なのですが、ご意見いただければと思います。
casheye777
2011/09/22 22:34:28
3
1
1
1
2
1
2
2
きゃづみぃ
Cherenkov
すみません、時間差でこの回答を見ずにコメントを出してしまいました。
ほぼリクエストさせていただいた部分をクリアしている内容で大変助かります。
お聞きしたいのは、jqueryの呼び出しはhtmlのヘッダー以外で(スクリプトの直前で)読み込んでも問題ないでしょうか？
もう一つは特定の改行は削除可能でしょうか？こちらに関しては不可であれば最初改行を内包しない状態の外部ファイルを用意し、必要に応じて入れて貰う方法が取れると思うのである程度自己解決は可能なのですが、ご意見いただければと思います。