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がはみ出す。


枠で囲む

以下より
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


段組(cols)をつかう

以下より
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



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

標準の機能で簡単にちょうどよく改行できないものかな。