Home > JavaScript

JavaScript Archive

Ajax関数電卓

JavaScript(mootools)でできた関数電卓を見つけました。Mootools Calculator。

Mootools Calculator

見た目はWindows付属の電卓っぽいっすね。一応ドラッグできたり、Tooltipで各ボタンの説明を表示できたりします。

キー入力に対応してないのがちょっと残念ですが、こういうUIに触れる度に、web上で何でも、快適に出来るようになっていくのだなあとしみじみ思います。

JavaScriptで太陽系

JavaScript(jQuery)でぐりぐり動く太陽系を作っちゃった人がいました。jQuery solar system

jQuery solar system

すごいなぁ。

JavaScript(mootools)でSnipet付きエディタ

PostEditorというオンラインエディタがなかなか便利です。WYSIWYGではないですが、いろいろと便利なSnipetがあり、HTMLとJavaScriptのコードを書くのに特化している模様。mootools.jsのプラグインで、mootoolsは最新のSubversion版でないと動かないっぽいです。「language.FORUM.js」にSnipetの設定が書いてあり、これらを読み込んで使います。※SafariとFirefoxのみ対応らしいです。

<script type="text/javascript"  xsrc="/js/mootools.js" mce_src="/js/mootools.js"    ></script>
<script type="text/javascript"  xsrc="/js/posteditor.js" mce_src="/js/posteditor.js"    ></script>
<script type="text/javascript"  xsrc="/js/language.FORUM.js" mce_src="/js/language.FORUM.js"    ></script>

<form>
<textarea name="body" id="body" class="textarea" rows="8" cols="40"></textarea>
</form>
<script type="text/javascript">
new postEditor.create('body','body2',language.FORUM);
</script>

一番の特徴は「tab」を使うところかなと。まず普通に「tab」を押すと「半角スペース×4」が入力されます。「半角スペース×4」というのがいいですよね。主な機能は以下の通り。

  • オートインデント
  • Snipetをタブで呼び出す（ul+tabなど）
  • Snipetをタブで自動補完（ol+tab+tabとtabを続けて押すとli挿入、次のli挿入）
  • ダイナミックSnipet（date+tabで今日の日付）
  • ２つセットで使う文字を自動補完（」となる）
  • スコープを判断して括弧で括る
  • 選択したテキストをタグで挟むショートカット（ctrl+shift+[0-9]）

Snipetは以下の通り。Snipetを入力しtabを押すと補完されます。（strongと打ち込んでtabを押す など）

  • strong, em, blockquote, code, javascript, html, bq, js, {（閉じとセットで挿入）
  • $, new Class, .extend, a
  • ul, ol
  • </li>の後ろでtabを押すと次のliを挿入

「$ + tab」は「$(’id’).」に、「a + tab」は「>a xhref=”http://” mce_href=”http://” title=”desc”<text</a> 」になります。「.extend」は以下のように整形されます。

.extend({
initialize: function(value){

}
});

また、「new Class + tab」は「<javascript></javascript>」内で使うと以下のようにinitialize:を挿入しフォーマットしてくれます。

<javascript>
new Class({
initialize: function(value){
this.key = value;
}
});
</javascript>

そしてデフォルトのショートカットは以下の通り。7〜9は選択範囲のみ適用されます。

  • ctrl+shift+0 → <strong>
  • ctrl+shift+1 → <em>
  • ctrl+shift+2 → <blockquote>
  • ctrl+shift+3 → <code>
  • ctrl+shift+4 → <javascript>
  • ctrl+shift+5 → <html>
  • ctrl+shift+6 → <a xhref=”" mce_href=”" >
  • ctrl+shift+7 → 選択範囲を小文字に
  • ctrl+shift+8 → 選択範囲を大文字に
  • ctrl+shift+9 → 選択範囲の<>を<>に

divとかはないみたいですが、登録されているSnipetがかゆい所に手が届く感じなので、コードを織り交ぜたblogを書く際にはとても便利だなと思います。自分の場合は今回のエントリーを書く際に重宝しました。Snipetを変更すれば自分好みにカスタマイズも可能かと。

■mootools関連エントリー：
＞ javascriptで伸縮するメニューができる
＞ JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）

JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）

web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。

Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。

使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflect”」とするだけ。この辺はReflection.jsと同じですかね。

<script type="text/javascript"  xsrc="/js/mootools.js" mce_src="/js/mootools.js"   ></script>
<script type="text/javascript"  xsrc="/js/reflection.js" mce_src="/js/reflection.js"   ></script>

<img xsrc="test.jpg" mce_src="test.jpg"    class="reflect" />

mootoolsの必要なモジュールは以下の通り。

  • Native: Array, String, Function, Element
  • Window: Window.Base

また「class=”reflect”」とするとその画像が強制的にblock要素になるので、横に並べたい場合はCSSでfloat:leftを設定する。

javascriptから制御する場合は以下のように扱える。

Reflection.add('photo1', options);  //Reflectionオブジェクトを使う場合

$('photo1').addReflection(options);  //addReflectionプロパティを使う場合

「options」はheight（高さ）とopacity（透明度）があって、それぞれ0〜1の値で設定する。デフォルトはheightが1/3（0.3333…）、opacityが1/2（0.5）らしい。optionを指定するとコードは以下のようになる。

$('photo1').addReflection({height:0.5,opacity:0.75});

でもまあ、Reflection.jsの方がファイル一つだし楽ですかねぇ。

mootools関連エントリー：
javascriptで伸縮するメニューができる

■写りこみ参考リンク

javascriptで伸縮するメニューができる

auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。

<script type="text/javascript"  xsrc="imagemenu.js" mce_src="imagemenu.js"  ></script>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" xhref="" mce_href=""  ><span>TOP</span></a></li>
<li><a class="kwick opt2" xhref="" mce_href=""  ><span>CSS</span></a></li>
<li><a class="kwick opt3" xhref="" mce_href=""  ><span>HTML</span></a></li>
<li><a class="kwick opt4" xhref="" mce_href=""  ><span>ABOUT</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:185});
</script>

phatfusionの元のsampleはそれぞれ違う画像を動かしてますが、まあこの方がメニューっぽいかなと。クリックするとその部分の幅が固定されるようですが、リンクをつける場合はあまり必要がない機能のような気もします。

また、Image Menuは動作中に右端がぶるぶる震えてしまうので、<ul class=”kwicks”>の幅を固定して、背景に同じパターンの画像を配置するときれいに見えます。自分のsampleでは端を角丸にしたかったので、角丸の画像を１枚作って、左と右に表示してます。

←角丸
←各背景

#kwick {
position:relative;
width:515px;
background:url(menu_bg_gra_lr.gif) no-repeat top left;
}
#kwick ul.kwicks {
display:block;
margin:0 0 0 5px;
height:50px;
background:url(menu_bg_gra_lr.gif) no-repeat top right;
list-style:none;
}

あとこれをちょっと応用して縦に伸縮するメニューを作ってみました。

縦バージョンはimagemenu.jsのソースを「width,Width」→「height,Height」に変換しただけのものを使ってます。しかしこんなことまでできるとは…。

Continue reading

Home > JavaScript

Recent Entries
Recent Comments
  • ねんど: 古い記事にコメント失礼いたします。 装飾したいという理由で、テキストを画像とすることが変な感じはしますね。 情報を装飾...
  • html初心者: 初めておじゃまします。 私も貴ブログで初めて知りました・・・ 勉強になりました！ タグ辞典って読んでるだけで結構おもしろ...
  • anon: 私も一時期Macでヒラギノを出すことに凝りましたが、ブラウザの仕様がどんどん変わるのについていくのが大変で、固有フォント...
  • Anonymous: まさしく同感です！ Winでヒラギノが表示されることは本当に気持ち悪いので回避出来ないかと常々考えていました。 （私は、Wi...
  • みみ: こんにちは。いつも勉強させていただいてます！ あのう…画像置き換えにすると、css切った時の見え方が、文字だけの美しい構成...
Recent Ping/Trackbacks
Categories
Archives
Search
Feeds
Meta

Return to page top