Hatena::ブログ(Diary)

arupaka-_-arupakaの日記

2015-02-06

テーブルにマウスオーバーして図をだす

テーブルにマウスオーバーして図をだす

上の階層の行の行番号を検索

その行の下にぶち抜きの行をつくる

ぶちぬくに図を挿入

マウスアウトしたらそれらの行を消す.

ソースへの要求

<div id="cor_table"></div>
の間にtableをいれる.

tableの各行には<a class="fig" href="xxx.png">
みたいな感じにリンクとクラス付の要素をいれる.

新しいより一般的なバージョン

   $("#cor_table").on({

                        'mouseenter': function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                                // row_no=$(this).parent().attr("id");
                                //alert("test")

                             //alert($(this).closest("tr").html());

                             //($(this).parent.append("test"));
                             //$(this).parents.after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');

                             $(this).closest("tr").after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        'mouseleave': function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

        },".fig")


古いバージョン


 function test1234(){
                $(".fig").hover(

                        function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                            row_no=$(this).parent().parent().parent().attr("id");

                             $("tr#"+row_no).after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

                 }


ページ全体の例:

CGIを利用して,target_idの番号に関するテーブルを出力.

xxxyyytest

みたいな.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのテスト</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function(){

        //$("#cor_table").append("test")

        var target_id=(location.search).split("=")[1]

        alert(target_id)
         $("#cor_table").on({

                        'mouseenter': function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                                // row_no=$(this).parent().attr("id");
                                //alert("test")

                             //alert($(this).closest("tr").html());

                             //($(this).parent.append("test"));
                             //$(this).parents.after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');

                             $(this).closest("tr").after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        'mouseleave': function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

        },".fig")

        $.ajax({
                type: "GET",
                url: "http://192.168.0.244/cgi-bin/syoku_list_get/calc_col.rb?target_id="+target_id,

                success: function(msg){

                        $("#cor_table").html(msg);

                }

        })




})
</script>

</head>
<body>
時間変動が似ている関連ワードを抽出(ベータ版) <hr>
関連ワード表<br><br>
<div id="cor_table">計算中 2分ほど待ちください…</div>

</body>
</html>

2015-01-15

JqplotでCanvasの下に重なり触れなくなってしまった要素を触れるようにする。

グラフ描画後以下のスクリプトを実行

ポイント

(1)再描画ごとに新しく書き直すためpostDrawHooksを利用

(2)点(div class=jqplot-point-label)がソース上canvasの上側にあるのが問題なので、

   下に移動する.

(3)クラス名でグラフを管理している場合は,attr[クラス名,関数].の関数をうまく利用して対応する.


グラフを書く処理,例えば、ボタンをおしたら、表に変更あったら、make_graph(),post_draw()を実行する等.

         make_graph();
                post_draw();

postDrawHooksでグラフを再描画がするたびにshow_fig_mouse_over()関数をよびcanvasとpointを入れ替える動作を行う,

replotでそれを反応させる.

  function post_draw(){
                        alert("post_draw")
                        $.jqplot.postDrawHooks.push(function(){show_fig_mouse_over();})
                        plot1.replot();
                        plot2.replot();
                        plot3.replot();
                        //alert("test5");

                        //alert("test6");
                }; //hover
function show_fig_mouse_over(){
     $('div[class2^="pp"]').attr("class2",function(index,attr){

                        $('div[class2^='+attr+'] div[class^=jqplot-point-label]').appendTo('div[class2="'+$('div[class2^='+attr+'] div[class^=jqplot-point-label]').parent().attr("class2")+'"]');
                        return attr;

                });

             
}


HTML:3つのグラフ

<center>
<p class="graph1">タイトル1</p>
 <table>
 <tr>
 <td>
 <div class2="pp1" class="p1" id="jqPlot-sample" style="height: 500px; width: 500px;"></div>
 </td>
 <td>
<div class3="pp1" id="tmp_fig" style="height: 500px; width: 500px;"></div>
 </td>
 </tr>
 </table>
</center>

 <center>
 <p class="graph1">タイトル2</p>
 <table>
 <tr>
 <td>
 <div class2="pp2" class="p2" id="jqPlot-sample2" style="height: 500px; width: 500px;"></div>
 </td>
  <td>
<div class3="pp2" id="tmp_fig" style="height: 500px; width: 500px;"></div>
 </td>


操作も含めた例(マウスオーバーするとグラフの横に対応する画像をだす)

v2=[1,2,'test']

みたいな感じの配列

function show_fig_mouse_over(){
     $('div[class2^="pp"]').attr("class2",function(index,attr){

                        $('div[class2^='+attr+'] div[class^=jqplot-point-label]').appendTo('div[class2="'+$('div[class2^='+attr+'] div[class^=jqplot-point-label]').parent().attr("class2")+'"]');
                        return attr;

                });

      $('div[class2^="pp"]').on(
                                {'mouseenter':function(){
                                        //alert("test_mouse_over");
                                        $("#tmp2").remove();
                                         var text1=$(this).html();
                                         var inner_text1=$(this).text();
                                         link1=$(this).attr("link");
                                        var f32=$(this).parents('div[class2^="pp"]');
                                        f32=f32.attr("class2");

                                        $('div[class3="'+f32+'"]').html('<div id="tmp3"></div>');

                                        $(this).append('<div id="tmp2"></div>');
                                        //alert(link1);
                                        // $(this).append('<p id="tmp2"></p>');
                                          $("#tmp2").text(inner_text1);
                                        //alert(link1);

                                                
                                        //alert('div[class2="'+f32+'"] #tmp3'); 
                                        $('div[class3="'+f32+'"] #tmp3').append('<a href="'+text1+'"> <img src="'+link1+'"/></a>');

                                        },
                                        'mouseleave': function(){
                                                $("#tmp2").remove();


                                        }
                                },".fig1"
                        );


             
}

親要素のclass属性を取得

親要素のIDを取得

parentで親の要素全体を取得してattr("class")でclass属性を取得する.

$(this).parent だけだとhtmlがかえってきてだめなのがポイント.

  $('div[class2^="pp"]').on('click','canvas',
                        function(){
                                alert($(this).parent().attr("class"));

                        }

                )

2015-01-05

.on の使い方(新しい要素にイベントを関連付ける)

.on の使い方(新しい要素にイベントを関連付ける)

https://app.codegrid.net/entry/practical-jquery-1 を参照.

JQUERYでは存在しない要素にはイベントをつけられない.

そこで.onを使ってあとからつけた要素にもイベントを発生させられるようにする.

「デリゲートを利用したイベント設定」

(1)基本的には、上の階層の要素にonイベントをつける(div#mode_change).

(2)一つ目の引数にclickなどのイベントハンドら (input.easy_mode or input.detail_mode)

(3)二つ目の要素にあらたに発生するイベントをかく.

これがイメージ:

$('ul').on('click', 'li', function() {

$(this).css('color', 'red');

});


例)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テーブル</title>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="javascript" type="text/javascript" src="base/js/jquery-1.11.1.js"></script>



<script type="text/javascript">

//val=0;
//val2=val;
val2="0";
k=0;
$(document).ready(function()
{
        $("#mode_change").on("click",".detail_mode",function(){

                $("#filter").hide();
                $(this).attr("value","選択モード");
                $(this).attr("class","easy_mode");



                $("#filter").after('<div id="filter_text"></div>');

                str='<li>入力<input type="text" pre_header="6" name="box1u_text" class="filter_radio">'

                $("#filter_text").html(str);

        });


        $("#mode_change").on("click",".easy_mode",function(){
                        //alert("test");

                $("#filter_text").remove();

                $("#filter").show();

                $(this).attr("class","detail_mode");

                $(this).attr("value","直接入力モード");

        });







}


);
</script>

</head>
<body>
  
<h4>テスト</h4>

<div id="filter">
        <ul>
        <li>選択
        <ul>
        <li><input type="radio" class="filter_radio" name="box1u" pre_header="6" value=1000'></input>
        <li><input type="radio" class="filter_radio" name="box1u" pre_header="6" value=1000'></input>

</div>
<div id="mode_change"> <input type="submit" class="detail_mode" name="test2" value="値の直接入力モード"></div>
<div id="fig1234"></div>

</body>
</html>

2014-12-26

マウスオーバーしたら図をだす

ParentsUntil文で行にいき、その後ろにdivダグを挿入し,

divダグのに中身を図をいれる.

表にマウスオーバーしたらリンク先の図をだ

$(".fig").hover(

  function(){
       link1=$(this).attr("href");

    
     $(this).parentsUntil("tr").after('<div id="tmp1"></div>');
          $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');



 }

   function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                  
   }

)

2014-11-13

jqueryでデータベース連携

スイッチをおしたらほかのページの情報を出力する

基本

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tryjquery_hide_p test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("input#update").click(function(){
                alert("helloworld");
                $.get("test.html",function(data){

                        $("div#contents").text(data);
                });
        });
})

</script>

</head>
<body>

<p> This is a pen </p>
<input type="button" value="Update" id="update"></input>
<div id=contents></div>
</body>
</html>


データベースの内容を出力

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tryjquery_hide_p test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("input#update").click(function(){
                alert("helloworld");
                $.get("/cgi-bin/test.rb",function(data){

                        $("div#contents").html(data);
                });
        });
})

</script>

</head>
<body>

<p> This is a pen </p>
<input type="button" value="Update" id="update"></input>
<p> データベースの内容 </p>
<div id=contents></div>
</body>
</html>


/cgi-bin/test.rb

#!/usr/local/bin/ruby
require 'rubygems'
require 'cgi'
require 'fileutils'
require 'sqlite3'

cgi=CGI.new
def error_cgi
        print "Content-Type:text/html;charset=EUC\n\n"
        print "*** CGI Error List ***<br />"
        print "#{CGI.escapeHTML($!.inspect)}<br />"
        $@.each {|x| print CGI.escapeHTML(x), "<br />"}

end


begin



        puts "Content-type: text/html charset=UTF-8\n\n"

        db=SQLite3::Database.new("syoku.sqlite3")

        a=db.execute("select * from update_info")
        #puts "hello"
        #print a[0][1]
        puts "<p>Update Information</p>"
        puts "<table border=1>"
        puts "<tr><td>update_date</td><td>"+a[0][0]+"</td></tr>"
        puts "<tr><td>update_flg</td><td>"+a[0][1].to_s+"</td></tr>"
        puts "</table>"
end