ブラウザ上で数式が踊り始めました。
マウスで記号をぶつけると、「評価」反応を起こして、式が評価式に変わります。(ウソです。まだできてません。)
プラットフォームには、scriptaculous.jsを利用しました。
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Expression Universe</title> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } }); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script> <script type="text/javascript"> window.onload = function() { maths = document.getElementsByClassName("math"); for (i = 0; i < maths.length; i++) { new Draggable(maths[i].id); } } </script> </head> <body> <div class="math" id="int">$$\int$$</div> <div class="math" id="e">$$e$$</div> <div class="math" id="i">$$i$$</div> <div class="math" id="x">$$x$$</div> <div class="math" id="dx">$$dx$$</div> </body> </html>
以下、つまずいた/つまずいている点。
- for (e in maths)なんてかっこいい記述はできません。
都市伝説です。
(追記) 言語仕様はfor (i in maths)という意味でした。変数には要素ではなくプロパティ名/インデックスが代入されます。
- spanタグでは動きません。
インラインだから当たり前でしたか。
- iPadでは動きません。
マウスハンドラではリスナーがコールされず、デフォルトのタッチ動作(拡大縮小、縦スクロール)してしまいます。
現在、iPhone/iPad対応JavaScriptライブラリの存在を調査中です。