Webっぽい

Webっぽい技術やそうでないことなど書きます。

Popup Helperのサンプル

Popup Helper というものを作った。 / JavaScript - Webっぽい
で公開したライブラリの、実践的なサンプルを作成しました。
是非参考にしてみて下さい。

サンプル

ページ上部にある「ヘルプ」をクリックするとヘルプが有効になります。
もう一度それをクリックすると無効になります。
サンプル（新しいタブで開きます）

ソース

<!DOCTYPE html>
<html>
<head>
    <script src="./popup_helper.js"></script>
    <script>
        onload = function(){
            help = new PopupHelper();
        }
    </script>
    <title>Popup Helper Sample</title>
</head>
<body style="background-color: lightgray;">
    <a href="#" onclick="help.toggle()" data-help="ヘルプ表示をオンにします。">ヘルプ</a>
    <form onsubmit="return false;">
    <table>
        <tr data-help="あなたの名前を入力します。\n※ハンドルネーム可">
            <td>名前:</td>
            <td><input name="name"></td>
        </tr>
        <tr data-help="あなたのメールアドレスを入力します。">
            <td>メールアドレス:</td>
            <td><input name="mail"></td>
        </tr>
        <tr data-help="念のため、もう一度メールアドレスを入力してください。">
            <td>メールアドレス(確認):</td>
            <td><input name="mail"></td>
        </tr>
        <tr data-help="お問い合わせ内容をご記入ください。">
            <td>本文:</td>
            <td><textarea style="width: 300px; height: 170px;"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="送信" data-help="フォームの内容を送信します。"><td>
        </tr>
    </table>
    </form>
</body>
</html>