入力バイト数のチェック
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script type="text/javascript"> <!-- function getBytes(strSrc){ var len = 0; strSrc = escape(strSrc); for(i = 0; i < strSrc.length; i++, len++){ if(strSrc.charAt(i) == "%"){ if(strSrc.charAt(++i) == "u"){ i += 3; len++; } i++; } } return len; } // --> </script> <form name="myForm"> <input name="text1" type="text" id="text1" size="40"> <input type="button" onClick="alert(getBytes(document.myForm.text1.value));" value="バイト数は?"> <form> </body> </html>
Ruby on Rails 勉強
Step 1: Install Command line tools on terminal
xcode-select --install
Step 2: Install Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
step3
sudo port uninstall ruby 上記、入力してもcommand not found
step4
rvm implode brew install rbenv ruby-build echo 'eval "$(rbenv init -)"' >> ~/.bash_profile source ~/.bash_profile
Step 5: Install Ruby
rbenv install 2.3.0 rbenv global 2.3.0 ruby -v
step 6 install bundller and rails
gem install bundler bundle -v gem install rails rails -v
jQuery table
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <title>スクロール実験</title> </head> <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; } else if (now_th.text() == pre_element.text()) { // 要素を削除 now_th.remove(); // rowspanがnullの場合 if (pre_element.attr('rowspan') == null) { // rowspanに1を設定 pre_element.attr('rowspan', 1); } // pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1); } else { // pre_element = now_th; } }); }); $("#radio01").click(function() { $("tr").show(); }); $("#radio02").click(function() { $('#testTable').each(function() { var col_num = 0; $(this).find('tr').each(function() { var now_th = $(this).find('td').eq( col_num ); console.log($(now_th).attr('class')); if (now_th.text() === "千葉") { $(".tr千葉").hide(); } }); }); }); }); </script> <body style="text-align:center;"> <table id="testTable" border="1"> <tbody> <tr class="tr東京"><th class="th東京">関東</th><td class="row東京">東京</td></tr> <tr class="tr千葉"><th class="th千葉">関東</th><td class="row千葉">千葉</td></tr> <tr class="tr神奈川"><th class="th神奈川">関東</th><td class="row神奈川">神奈川</td></tr> <tr class="tr大阪"><th class="th大阪">近畿</th><td class="row大阪">大阪</td></tr> <tr class="tr兵庫"><th class="th兵庫">近畿</th><td class="row兵庫">兵庫</td></tr> <tr class="tr京都"><th class="th京都">近畿</th><td class="row京都">京都</td></tr> </tbody></table> <label><input type="radio" id="radio01" name="radios01" checked="checked" />表示</label> <label><input type="radio" id="radio02" name="radios01" />非表示</label> </body> </html>
ツールチップ
<?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>