まるぼ〜の日記 このページをアンテナに追加 RSSフィード

2007-02-15

[]Spinelz Spinelz - まるぼ〜の日記 を含むブックマーク Spinelz - まるぼ〜の日記 のブックマークコメント

Spinelz

タブやカレンダーなどを JavaScript で実装したライブラリAjax にも対応。

デモを見るとかなりすごい。こういうのを見るとワクワクする。


Spinelz のタブ機能と Rails を組み合わせた使用例はこちら。これもかなり参考になる。

从 ;’w’;)クゥ〜ン - Spinelz タブ表示機能

2007-02-13

[]フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの入力エラーを吹き出しで教えてくれる JavaScript - まるぼ〜の日記 を含むブックマーク フォームの入力エラーを吹き出しで教えてくれる JavaScript - まるぼ〜の日記 のブックマークコメント

鷹の島 - フォームの入力エラーを吹き出しで教えてくれる JavaScript

これすごいな。アンケートとか必須項目が多いとどこがダメなのかわかんない時があるからこれはよいかも。

2007-01-17

[]値がデフォルトから変わったら色を変えるJavaScript 値がデフォルトから変わったら色を変えるJavaScript - まるぼ〜の日記 を含むブックマーク 値がデフォルトから変わったら色を変えるJavaScript - まるぼ〜の日記 のブックマークコメント

swk’s log - form の内容がデフォルトから変わったら色を変える JavaScript コード

メモ。Text フィールドならよくあるけど、チェックボックスやリストもある。

でもドロップダウンじゃないリストはデフォルトが先頭になるような選択だとデフォルトと判定されてしまうよう。

2006-12-08

[]JavaScriptist [http://javascriptist.net/:title=JavaScriptist] - まるぼ〜の日記 を含むブックマーク [http://javascriptist.net/:title=JavaScriptist] - まるぼ〜の日記 のブックマークコメント

JavaScript のリファレンスや逆引きサンプルコードが調べられるサイト。

メモメモ。

2006-08-18

[]JavaScriptによるポップアップウィンドウの出し方 JavaScriptによるポップアップウィンドウの出し方 - まるぼ〜の日記 を含むブックマーク JavaScriptによるポップアップウィンドウの出し方 - まるぼ〜の日記 のブックマークコメント

prototype.js を使ったポップアップウィンドウの出し方。デモはこちら

<html>
  <head>
    <script src="./prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
      function show_popup() {
        var evt_hndlr = function(event) {
            Element.show('popup');
            var posx = Event.pointerX(event);
            var posy = Event.pointerY(event);
            Element.setStyle('popup', {top:posy+"px", left:posx+"px"});
        }
        Event.observe('pos', 'click', evt_hndlr, false);
      };
      -->
    </script>
  </head>

  <body onload="show_popup();">
    <div id="popup" style="display:none; position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; background: #ffffff; border: 3px solid gray;">
      <div style="height: 20px; background: darkblue;">
        <a href="#" onclick="Element.hide('popup');return false;" style="position: absolute; right: 0px; top: 0px; color: #eeeeee;">[x]</a>
      </div>
      <div style="padding: 10px;">
        ポップアップウィンドウ
      </div>
    </div>
    <div id="pos" style="border:1px solid gray; padding: 5px; height: 500px; background: #e0e0e0;">
      ここをクリックしてください。
    </div>
  </body>
</html>

ポイントは body の onload で、マウスクリックのイベントを エレメント pos に追加してるのと、クリック時にポップアップを表示して位置を変更しているところ。クリックされたポイントを prototype.js の Event クラスを使って割り出し、Element.setStyle で位置を変更している。