Tag: jquery javascript
jQueryでボタンをクリックした時に別窓を開いて画像表示
- 2015-09-15
Webページでボタンに画像のURLを属性として設定しておき、ボタンクリックで別窓を開いてその画像を表示する例。
以下考え方を記録するためのメモ。実際にはHTMLタグの追加、変更が必要です。
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<input type='button' url="http://pc221.oasi.jp/2015062111114567462577/IMGP8784.JPG" value='View' class='viewBtn'><br>
<input type='button' url="http://pc221.oasi.jp/2015062111114567462577/IMGP8785.JPG" value='View' class='viewBtn'><br>
<input type='button' url="http://pc221.oasi.jp/2015062111114567462577/IMGP8796.JPG" value='View' class='viewBtn'><br>
<input type='button' url="http://pc221.oasi.jp/2015062111114567462577/IMGP8800.JPG" value='View' class='viewBtn'>
<script type="text/javascript">
$(function(){
$(".viewBtn").click(function() {
var path = $(this).attr("url");
var features="width=800,height=600, location=no, menubar=no,"
+" status=yes, scrollbars=yes,"
+" resizable=yes, toolbar=yes";
// window.open(path,'viewWindow',features);
viewWinId = window.open("", 'viewWindow',features);
viewWinId.document.open();
viewWinId.document.write("<HTML><HEAD>");
viewWinId.document.write("<TITLE>アップロードファイル情報</TITLE>");
viewWinId.document.writeln("<BODY>");
viewWinId.document.write('<IMG SRC="'+path+'" width="780"><br><br>');
viewWinId.document.write('<input type="button" value=" CLOSE " onclick="window.close();">');
viewWinId.document.write("</BODY></HTML>");
viewWinId.document.close();
});
});
</script>
元の内容があったURLを貼り付ける。URLがはみ出す。
枠で囲む
段組(cols)をつかう
PukiWikiのcodeプラグインだと改行されるが、リンクにならない。
以下より
http://dbweb.0258.net/wiki.cgi?page=jQuery%A4%C7%A5%DC%A5%BF%A5%F3%A4%F2%A5%AF%A5%EA%A5%C3%A5%AF%A4%B7%A4%BF%BB%FE%A4%CB%CA%CC%C1%EB%A4%F2%B3%AB%A4%A4%A4%C6%B2%E8%C1%FC%C9%BD%BC%A8
標準の機能で簡単にちょうどよく改行できないものかな。