ツールチップ
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://xmlns.jcp.org/jsf/passthrough"> <h:head> <title>sample09-5</title> <h:outputStylesheet name="mystyle.css" library="css" /> <style> #tip_body { /*ツールチップのデザイン*/ display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; color:black; width: 500px; border: 1px solid black; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } .invisible{ display: none; } a.clickToolTip{ margin: 0; padding: 2px 6px; border-radius: 5px; -moz-border-radius: 5px; text-decoration: none; color: #fff; background-color: green; font-size: 12px; } p.tooltip1{ margin: 0; padding: 10px; width: 250px; background-color: #000; opacity: 0.6; color: #fff; border-radius: 5px; -moz-border-radius: 5px; min-height: 30px; top: 100px; left: 20px; position: absolute; } .dummy { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; } </style> </h:head> <h:body> <div id="sample" class="sampleClassName1"></div> <button onclick="getClassName();">getClassName()</button> <p>id属性がsampleである要素のclass属性の値:<span id="sampleOutput1"></span></p> <button onclick="setClassName();">setClassName()</button> <p>class属性の値を変更後:<span id="sampleOutput2"></span></p> <table class="clickToolTip"> <tr> <th><!-- 変更点: aタグのクラスをclickToolTipAnkerに変更 --> <div class="tooltipWrapper"> タイトル <a href="javascript:void(0);" class="clickToolTipAnker">?</a> <!-- 変更点: pタグをこの位置に。idは削除 --> <p class="tooltip1 invisible">"タイトル"の説明</p> </div> </th> <td><input type="text" name="title"></input></td> </tr> <tr> <th> <div class="tooltipWrapper"> メッセージ<a href="javascript:void(0);" class="clickToolTipAnker">?</a> <p class="tooltip1 invisible">"メッセージ"の説明<br />複数行の内容を<br />書くことも可能。<br /><br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。</p> </div> </th> <td><textarea name="message" rows="5" cols="30"></textarea></td> </tr> </table> <h:form> <h:dataTable value="#{bb.meibo}" var="m" columnClasses="c1,c2,c3,c4" headerClass="hd1" rowClasses="row"> <f:facet name="header">会員一覧表</f:facet> <h:column headerClass="hd2"> <f:facet name="header">番号</f:facet> <h:commandLink action="#{bb.edit(m)}">#{m.number}</h:commandLink> </h:column> <h:column headerClass="hd2"> <f:facet name="header">氏名</f:facet> <h:outputText class='tooltip' title='#{m.name} #{m.mail} #{m.number}' value="#{m.name}" rendered="#{!m.editable}"/> <h:inputText value="#{m.name}" rendered="#{m.editable}" size="4" styleClass="inp"/> </h:column> <h:column headerClass="hd2" > <f:facet name="header">メール</f:facet> <h:outputText class="clickToolTip" value="#{m.mail}" rendered="#{!m.editable}"/> <h:inputText value="#{m.mail}" rendered="#{m.editable}" size="10" styleClass="inp"/> <div class="tooltipWrapper"> タイトル <a href="javascript:void(0);" class="clickToolTipAnker" data-no="#{m.number}" data-tooltip="#{m.mail}">?</a> <p class="tooltip1 invisible">"タイトル"の説明</p> </div> </h:column> <h:column headerClass="hd2"> <f:facet name="header">編集</f:facet> <h:selectBooleanCheckbox value="#{m.editable}" onclick="submit()"/> </h:column> </h:dataTable> <h:commandButton action="#{bb.next()}" value="変更を保存"/> </h:form> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> var $count = 1; function getClassName() { var $elementNodeReference = document.getElementById( "sample" ); var $className = $elementNodeReference.className; document.getElementById( "sampleOutput1" ).innerHTML = $className; } function setClassName() { var $elementNodeReference = document.getElementById( "sample" ); $elementNodeReference.className = "sampleClassName" + ++$count; var $className = $elementNodeReference.className; document.getElementById( "sampleOutput2" ).innerHTML = $className; } this.t_tip = function() { //ツールチップの出る場所 this.xOffset = -10; this.yOffset = 20; //マウスホバーイベント $(".tooltip").unbind().hover( function(e) { //要素のtitle属性を取得してspanの中に含める this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body"><table><tr>' + this.t + '_12</tr></table></span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } //マウスの動きに合わせる ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; $(function(){ // ツールチップ表示処理 $('.clickToolTipAnker').click(function(e){ dataTooltip = $(this).attr('data-tooltip'); no = $(this).attr('data-no'); // (html最後に挿入する)ツールチップ用pタグを作成 insertHtml = '<p class="tgToolTip">' + dataTooltip + '</p>'; // pタグをhtmlの最後に挿入 if ($('.' + no).length) { $('.' +no).remove(); return; } else { $('body').append(insertHtml); } // クリックされた [?] アイコンの座標を取得 var position = $(this).position(); var newPositionTop = position.top +30; // +数値で下方向へ移動 var newPositionLeft = position.left + 35; // +数値で右方向へ移動 // 出現するツールチップの位置を調整 $(".tgToolTip").css({ 'top': newPositionTop + 'px', 'left': newPositionLeft + 'px', 'margin': '0', 'padding': '0.5em 1em', 'background-color': '#FFFF99', 'border': '3px solid #000', 'color': '#000000', 'border-radius': '5px', '-moz-border-radius': '5px', 'min-height': '1em', 'position': 'absolute', 'z-index': '100' }); $('p.tgToolTip').attr('id', "id" + no); var $elementNodeReference = document.getElementById( "id" + no); $elementNodeReference.className = no; // (ツールチップの非表示処理) 非表示なクリック領域を展開 // $('body').append('<p class="dummy"></p>'); }); // "ツールチップ以外の領域"をクリックでツールチップを隠す処理 // $('body').on('click', '.dummy', function(){ // $('p.tgToolTip').remove(); // $('p.dummy').remove(); // }); t_tip(); // ツールチップ表示処理 イベント自体はtableにセット。delegateでaタグ $('.clickToolTip').on('click', 'a.clickToolTipAnker', function(){ var $this = $(this); //pタグは自分の親の子が持つp.tooltip var $p = $this.closest('.tooltipWrapper').find('.tooltip1'); // [?]の座標を取得 var position = $this.position(); var newPositionTop = position.top +10; /* + 数値で下方向へ移動 */ var newPositionLeft = position.left + 35; /* + 数値で右方向へ移動 */ // ツールチップの位置を調整 $p .css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'}) .removeClass('invisible'); }); // 表示されたツールチップを隠す処理(ツールチップ領域以外をマウスクリックで隠す) $('html').on('mousedown', function(event){ // イベント発生源である要素を取得(クリックされた要素を取得) var clickedElement = event.target; // 取得要素が"toolTip"クラスを持ってなかったら、ツールチップを非表示に if(!$(clickedElement).hasClass('tooltip1')){ $('p.tooltip1').addClass('invisible'); } }); }); </script> </h:body> </html>
jQuery DOM操作
jqueryで何番目の行をクリックしているか調べる
jQueryで特定の要素にcssやcssプロパティを追加/変更/削除する記述方法
jQueryで指定するセレクタに変数を利用するコード例|プログラミング
element.classNameは、「element」に指定した要素のclass属性の値を取得、もしくは、設定するプロパティ。 http://alphasis.info/2013/08/javascript-dom-elementobject-classname/
jquery5
<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> table{ margin: 15px auto 10px auto; } th{ padding:5px; background:#266; border:1px solid #777; color: #fff; } td{ border:solid 1px #777; background:#eee; padding:5px; } table tr.odd td { background: #ccc; } </style> </head> <body> <table id="testTable" border="1"> <tbody><tr> <th>関東</th> <td>東京</td> </tr> <tr> <th>関東</th> <td>千葉</td> </tr> <tr> <th>関東</th> <td>神奈川</td> </tr> <tr> <th>近畿</th> <td>大阪</td> </tr> <tr> <th>近畿</th> <td>兵庫</td> </tr> <tr> <th>近畿</th> <td>京都</td> </tr> </tbody></table> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function(){ $('#testTable').each(function () { var pre_element = null; var col_num = 0; $(this).find('tr').each(function () { var now_th = $(this).find('th').eq( col_num ); if (pre_element == null) { pre_element = now_th; console.log(now_th.text()); } else if (now_th.text() == pre_element.text()) { console.log(now_th.text()); now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { console.log(now_th.text()); pre_element = now_th; } }); }); }); </script> </body> </html>
jquery4
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> /* 内容 */ .tooltip-content { position: relative; left: -3px; top: -3px; background-color: #ffffe1; border: 1px black solid; padding: 3px; } /* 影 */ .tooltip-shadow { position: absolute; /*background-image: url('images/shadow.png');*/ } </style> </head> <body> <p onmouseover="tooltip.Schedule( this, event );" tooltip="ツールチップ">テキスト</p> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> Tooltip.DELAY = 300; // 表示するまでの遅延時間 Tooltip.OFFSET = 5; // マウスポインタからのオフセット // ツールチップ function Tooltip() { // 内容 this.content = document.createElement( 'div' ); this.content.className = 'tooltip-content'; // 影 this.shadow = document.createElement( 'div' ); this.shadow.className = 'tooltip-shadow'; this.shadow.appendChild( this.content ); } // ツールチップを表示する Tooltip.prototype.Show = function( text, x, y ) { // 内容 while( this.content.hasChildNodes() ) { this.content.removeChild( this.content.lastChild ); } this.content.appendChild( document.createTextNode( text ) ); // 影 this.shadow.style.left = x + 'px'; this.shadow.style.top = y + 'px'; this.shadow.style.visibility = 'visible'; if( this.shadow.parentNode != document.body ) { // ドキュメントのbody要素に追加する document.body.appendChild( this.shadow ); } } // ツールチップを隠す Tooltip.prototype.Hide = function() { this.shadow.style.visibility = 'hidden'; } // ツールチップの表示を予定する Tooltip.prototype.Schedule = function( targetElement, event ) { var e = event || window.event; var x = e.clientX; var y = e.clientY; // マウスポインタの位置をドュメント座標に正する x += window.pageXOffset || document.documentElement.scrollLeft; y += window.pageYOffset || document.documentElement.scrollTop; // イベントハンドラ内で処理できthisンす var _this = this; // タイムアウト処理を設定する var timerID = window.setTimeout( function() { var text = targetElement.getAttribute( 'tooltip' ); // ツールチップを示す _this.Show( text, x + Tooltip.OFFSET, y + Tooltip.OFFSET ); }, Tooltip.DELAY ); function MouseOut() { // ツールチップを隠す _this.Hide(); // 未処理のタイムアウト処理を取消す window.clearTimeout( timerID ); // イベントハンドラを削除する if( targetElement.removeEventListener ) { targetElement.removeEventListener( 'mouseout', MouseOut, false ); } else { // IE用の処理 targetElement.detachEvent( 'onmouseout', MouseOut ); } } // イベントハンドラを登録する if( targetElement.addEventListener ) { targetElement.addEventListener( 'mouseout', MouseOut, false ); } else { // IE用の処理 targetElement.attachEvent( 'onmouseout', MouseOut ); } } </script> <script type="text/javascript"> // ツールチップを生成する var tooltip = new Tooltip(); </script> </body> </html>
jquery3
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> /* 表示文字の装飾 */ div.tooltip1{ color: #555; display: inline-block; /* インライン要素化 */ border-bottom:dashed 1px #555; /* 下線を引く */ } /* ツールチップ部分を隠す */ div.tooltip1 span { display: none; } /* マウスオーバー */ div.tooltip1:hover { position: relative; color: #333; } /* マウスオーバー時にツールチップを表示 */ div.tooltip1:hover span { display: block; /* ボックス要素にする */ position: absolute; /* relativeからの絶対位置 */ top: 25px; font-size: 90%; color: #fff; background-color: #51A2C1; width: 800px; padding: 5px; border-radius:3px; z-index:100; } /* フキダシ部分を作成 */ div.tooltip1 span:before{ content:''; display:block; position:absolute; /* relativeからの絶対位置 */ height:0; width:0; top:-13px; left:15px; border:13px transparent solid; border-right-width:0; border-left-color:#51A2C1; transform:rotate(270deg); /* 傾きをつける */ -webkit-transform:rotate(270deg); -o-transform:rotate(270deg); z-index:100; } </style> </head> <body> <p id="target">ターゲットだゆん</p> <ul></ul> <div id='aaa'> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function(){ // $('#target').append('<span>要素内の最後に挿入</span>'); // $('ul').append('<li>追加されました</li>'); $('#aaa').append('<span>サンプル<br />フキダシのようなツールチップ</span>'); }); </script> </body> </html>
jquery2
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> p{font-size:12px; line-height:16px;} a{color:red ;} #tip_body { /*ツールチップのデザイン*/ display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: #333; color:#fff; border: 1px solid red; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } </style> </head> <body> <p> <a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a></br> <a href="" class="tooltip" title="<table><tr><td>maaaa1111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr></table>">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> <a href="" class="tooltip" title="maaaa">Shotoku1</a></br> </p> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> this.t_tip = function() { //ツールチップの出る場所 this.xOffset = -10; this.yOffset = 20; //マウスホバーイベント $("a").unbind().hover( function(e) { //要素のtitle属性を取得してspanの中に含める this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body">' + this.t + '</span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } //マウスの動きに合わせる ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; $(function(){ var hoge = $('a').html(); console.log($('a').length); console.log(hoge); console.log(hoge.length); $('.tooltip').each(function(i) { console.log(i + ': ' + $(this).text()); }); t_tip(); }); </script> </body> </html>
jquery1
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> table{ margin: 15px auto 10px auto; } th{ padding:5px; background:#266; border:1px solid #777; color: #fff; } td{ border:solid 1px #777; background:#eee; padding:5px; } table tr.odd td { background: #ccc; } p{font-size:12px; line-height:16px;} a{color:red ;} #tip_body { /*ツールチップのデザイン*/ display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; color:black; border: 1px solid black; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } </style> </head> <body> <p>jQueryの練習</p> <div id="box" style="width:100px;height:100px;background:red;"></div> <div id="box2" style="width:100px;height:100px;background:blue;"></div> <h2 id="elem">ID名elemの要素</h2> <button>click</button> <button id="btn2">click2</button> <p id="p2">表示されてるメッセージ</p> <p>処理が実行された回数: <span id="result">0</span></p> <p> <a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a> </p> <table id="table1"> <tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr> <tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> <tr class='trx'><th>1234</th><td>aaaa</td></tr> </table> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> this.t_tip = function() { //ツールチップの出る場所 this.xOffset = -10; this.yOffset = 20; //マウスホバーイベント $(".tooltip").unbind().hover( function(e) { //要素のtitle属性を取得してspanの中に含める this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body">' + this.t + '</span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } //マウスの動きに合わせる ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; $(function() { // hide, show // fadeOut, fadeIn // toggle //$('#box').hide(800); //$('#box').fadeOut(800); //$('#box').toggle(800); $('#box').fadeOut(800, function() { // alert("gone!"); }); $('#box').fadeIn(800, function() { }); // テーブルをストライプ表示に $(function() { $('tr:nth-child(odd)').addClass('odd'); }); var pre_element = null; var col_num = 0; $(".trx").each(function(i, elem) { console.log(i + ': ' + $(elem).find('th').text()); var now_th = $(this).find('th'); if (pre_element == null) { pre_element = now_th; console.log(now_th.text()); } else if (now_th.text() == pre_element.text()) { now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { pre_element = now_th; } console.log(now_th.text()); }); $('.trx').each(function () { var pre_element = null; var col_num = 0; $(this).find('tr').each(function () { var now_th = $(this).find('th').eq( col_num ); if (pre_element == null) { pre_element = now_th; } else if (now_th.text() == pre_element.text()) { now_th.remove(); if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1); pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { pre_element = now_th; } }); }); $(document).ready(function(){ $("#elem").mouseover(function(){ // 実行回数のカウント $("#result").html( parseInt( $("#result").html() ) + 1 ); }); $('#box').on('click',function(){ $('#box').fadeOut(800, function() { $('#box').fadeIn(800); }); }); $('p').on('click',function(){ // alert("hogehoge"); }); $('#box2').on('click',function(){ $('#box2').toggle(800); $('#box2').toggle(800); }); $('button').click(function(){ $('#p2').hide(); $("#btn2").prop("disabled", false); }); $('#btn2').click(function(){ $('#p2').show(); $("#btn2").prop("disabled", true); }); }); }); $(function(){ // var hoge = $('a').html(); // console.log($('a').length); // console.log(hoge); // console.log(hoge.length); // $('.tooltip').each(function(i) { // console.log(i + ': ' + $(this).text()); // }); t_tip(); }); </script> </body> </html>