javascript模板-ICanHaz.js-优快云博客

本文链接：https://blog.youkuaiyun.com/xdprintf/article/details/49558933

本文展示了ICanHaz.js的一个简单示例，通过该脚本可以动态地为网页添加用户信息。示例中使用了jQuery来处理DOM就绪事件，并通过点击按钮的方式添加带有特定属性的用户条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>ICanHaz.js Demo</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="ICanHaz.js" ></script>

    <script id="user" type="text/html">
        <li>
            <p>Hi I&apos;m <a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
            <p>I work for {{ employer }} as a {{ job_title }}.</p>
        </li>
    </script>

    <script type="text/javascript">
        // when the dom's ready
        $(document).ready(function () {
            // add a simple click handler for the "add user" button.
            $('#add_user').click(function () {
                var user_data, user;

                // build a simple user object, in a real app this
                // would probably come from a server somewhere.
                // Otherwise hardcoding here is just silly.
                user_data = {
                    name: "Henrik Joreteg",
                    twitter: "HenrikJoreteg",
                    employer: "&yet",
                    job_title: "JS nerd"
                };

                // Here's all the magic.
                user = ich.user(user_data);

                // append it to the list, tada!
                //Now go do something more useful with this.
                $('#user_list').append(user);
            });
        });
    </script>

    <style>
        body {
            font-family: Helvetica;
        }
    </style>
</head>
<body>
<h1>ICanHaz.js Demo</h1>
<h3>User List</h3>
<button id="add_user">Add User</button>
<ul id="user_list"></ul>
</body>
</html>