2017年10月 / 09月≪ 12345678910111213141516171819202122232425262728293031≫11月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2012.11.07 (Wed)

javascriptでnl2brみたいなのが欲しい

javascriptで、phpでいうnl2brみたいなのが欲しい。改行コードを<br />にするやつ。
できればStringを拡張して、dom.text.trim().nl2br()的な感じで使えたらいいな。

って思ってたらJavaScriptでStringの拡張って簡単にできたのね。

String.prototype.nl2br = function(){
return this.replace(/(\r\n|\r|\n)/g, '<br />');
}

String.prototypeに追加すればOKでした。

これで
alert("aaa\niii".nl2br());
って感じで使える。
alertで使ってもしょうがないんだが。
スポンサーサイト


 |  18:06  |  JavaScript  |  トラックバック(1)  |  コメント(0)  |  Top↑

2012.10.20 (Sat)

canvasで円をくりっと描くアニメーション

html5のcanvasで円をくりっと描くアニメーションが要りそうなのでやってみた。
http://jsfiddle.net/Ey5W2/

drawボタンで動くはず。
safariだと縦に伸びてIEだとぺちゃんこになったけど。
IEはIE9しか対応してないらしい。

意味とかメモ
■ani()にてまず背景のグレーの円をかく。
ctx.beginPath();
新しいパスかく

ctx.lineWidth = 10;
線の太さは10px

ctx.strokeStyle="#AAA";
色は#AAA

ctx.arc(50,50,20,0,Math.PI*2,false);
中心位置はleft50px,top50px
半径20px,開始角度0、終点角度Math.PI*2(1周)

ctx.stroke();
↑の奴を実際にかく処理

setIntervalでdrawをspanごとに実行

■drowで書く処理
var a = timenow / time;
角度の割合

ctx.lineWidth = 5;
太さ変えた
ctx.strokeStyle="#FFF";
色を白にした

ctx.arc(50,50,20,Math.PI*1.5,Math.PI*2*a + Math.PI*1.5,false);
上から書くために開始角度をMath.PI*1.5にした。
下記のURL先がわかりやすかった。
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/


円がぐにょるのはcanvasにwidthとheightを指定してなかったからみたい。
ついでに毎フレーム全書き直しした方がやっぱきれいにかけるな。
http://jsfiddle.net/sSYmg/


 |  22:30  |  JavaScript  |  トラックバック(2)  |  コメント(2)  |  Top↑

2012.06.05 (Tue)

jQueryUIのdraggableで複数の要素を同時に移動

jQueryのdraggableで複数の要素を同時に同じ感じで移動できるようにしたい案。

selectableで選択して、選択したもののみ同時に移動できるようにしてみた。
↓サンプル。ここで動作確認できる。
http://jsfiddle.net/4GjRn/

html
<div id="wrap">
<div id="b1" class="box">b1</div>
<div id="b2" class="box">b2</div>
<div id="b3" class="box">b3</div>
<div id="b4" class="box">b4</div>
<div id="b5" class="box">b5</div>
</div>


js

$("#wrap .box").draggable({
start:function(e,ui){
$(".ui-selected").each(function(){
var apos = {
top:$(this).position().top-ui.position.top,
left:$(this).position().left-ui.position.left
};
$(this).data("apos", apos);
});
},
drag:function(e,ui){
$(".ui-selected").not($(this)).each(function(){
$(this).css({
top:ui.position.top+$(this).data("apos").top,
left:ui.position.left+$(this).data("apos").left
});
});
}
});
$("#wrap").selectable({});


css

#wrap{
width: 400px;
height: 500px;
}
.box{
width: 50px;
height: 50px;
background-color: #EFE;
border: solid 1px #CCC;
position: absolute;
}
.ui-selecting{
border: dashed 1px #CCC;
background-color: #FEE
}
.ui-selected{
background-color: #FCC;
}
.ui-selectable-helper{
position: absolute; z-index: 100; border:1px dotted black;
}
#b1{
top: 10px;
left: 20px;
}
#b2{
top: 50px;
left: 100px;
}
#b3{
top: 40px;
left: 40px;
}
#b4{
top: 200px;
left: 100px;
}
#b5{
top: 160px;
left: 20px;
}


ドラッグ開始時に選択されてる要素のdata("apos")にドラッグ要素からの相対位置を保持して、
dragでドラッグ移動された際に同時にcssで指定して動かしてる。
stopでapos要素を削除して後始末したほうがいいかな?


 |  22:20  |  JavaScript  |  トラックバック(0)  |  コメント(3)  |  Top↑

2011.10.30 (Sun)

jQueryのjScrollPaneを解除

jScrollPaneでスクロールバーつけたけど、やっぱり動的に解除したりしたい場合
//設定
$("#targetid").jScrollPane();

// やっぱ解除
$("#targetid").jScrollPane().data().jsp.destroy()


destroyで解除できるのはわかったんだが、destroyの呼び方がわからず、
$("#targetid").jScrollPane("destroy")とか
$("#targetid").jScrollPane().destroy()とかしてみたけど反映されなかったけど、↑でいけた。

公式のdestroyについての記述http://jscrollpane.kelvinluck.com/destroy.html
をよく見るとなんかjScrollPane().data().jspを呼んでた。わかりづらい・・・


 |  00:35  |  JavaScript  |  トラックバック(0)  |  コメント(0)  |  Top↑

2008.02.22 (Fri)

google-code-prettifyで色分けされたコードの中身を見てみる


<pre id="pre1" class="prettyprint">
for(int i = 0; i < 100; i++)
{
  if(i = 0) continue;
  n = n + i;
}
</pre>

このソースをgoogle-code-prettifyで色分けすると
up000004.jpg

こんな感じで色がつきます。

この状態で、色分けされた後のソースを見てみると

<PRE class=prettyprint id=pre1><SPAN class=kwd>for</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>int</SPAN><SPAN class=pln>&nbsp;i&nbsp;</SPAN><SPAN class=pun>=</SPAN><SPAN class=pln>&nbsp;</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln>&nbsp;i&nbsp;</SPAN><SPAN class=pun>&lt;</SPAN><SPAN class=pln>&nbsp;</SPAN><SPAN class=lit>100</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln>&nbsp;i</SPAN><SPAN class=pun>++)</SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR>&nbsp; </SPAN><SPAN class=kwd>if</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>i&nbsp;</SPAN><SPAN class=pun>=</SPAN><SPAN class=pln>&nbsp;</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>&nbsp;</SPAN><SPAN class=kwd>continue</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR>&nbsp; n&nbsp;</SPAN><SPAN class=pun>=</SPAN><SPAN class=pln>&nbsp;n&nbsp;</SPAN><SPAN class=pun>+</SPAN><SPAN class=pln>&nbsp;i</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun>}</SPAN></PRE>pre2 <PRE id=pre2>for(int i = 0; i &lt; 100; i++) { if(i = 0) continue; n = n + i; }</PRE>

改行がなくなっています。


この状態のpre1の子ノード(n)、孫ノード(nn)を取得し、下記のような表示形式で表示してみます。

n.nodeName = [n.nodeValue] type:n.nodeType cld:n.childNode.length
  nn.nodeName = [nn.nodeValue] type:nn.nodeType cld:nn.childNode.length

[スクリプト]

<div id="dsp">
</div>

<script language="JavaScript">
<!--

var pre1 = document.getElementById("pre1");
var str = "";
for(i = 0; i < pre1.childNodes.length; i++)
{
  var n = pre1.childNodes.item(i);
  str +=  n.nodeName + " = " + n.nodeValue + " type:" + n.nodeType + " cld:" + n.childNodes.length + "\r\n";
  for(j = 0; j < n.childNodes.length; j++)
  {
    nn = n.childNodes.item(j);
  str +=  "  " + nn.nodeName + " = [" + nn.nodeValue + "] type:" + nn.nodeType + " cld:" + nn.childNodes.length + "\r\n";
  }
}
document.getElementById("dsp").innerText = str;
-->
</script>

[表示]

SPAN = null type:1 cld:1
  #text = [for] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [(] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [int] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ i ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [=] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [0] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [;] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ i ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [<] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [100] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [;] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ i] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [++)] type:3 cld:0
SPAN = null type:1 cld:1
  BR = [null] type:1 cld:0
SPAN = null type:1 cld:1
  #text = [{] type:3 cld:0
SPAN = null type:1 cld:2
  BR = [null] type:1 cld:0
  #text = [  ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [if] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [(] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [i ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [=] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [0] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [)] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [continue] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [;] type:3 cld:0
SPAN = null type:1 cld:2
  BR = [null] type:1 cld:0
  #text = [  n ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [=] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ n ] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [+] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [ i] type:3 cld:0
SPAN = null type:1 cld:1
  #text = [;] type:3 cld:0
SPAN = null type:1 cld:1
  BR = [null] type:1 cld:0
SPAN = null type:1 cld:1
  #text = [}] type:3 cld:0


改行タグ<BR>はSPANタグに囲まれているんだなってことがわかりました。

nodeType=1がエレメント、nodeType=3がテキストノードを表しているらしい。


もうしばらく模索します・・・


 |  16:38  |  JavaScript  |  トラックバック(0)  |  Top↑
 | BLOGTOP |  NEXT
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。