创建许多Fancybox表单

时间:2011-02-22 16:23:37

标签: javascript jquery fancybox

<div style="display:none">
    <form id="login_form" method="post" action="">
            <p id="login_error">Please, enter data</p>
        <p>
            <label for="login_name">Login: </label>
            <input type="text" id="login_name" name="login_name" size="30" />
        </p>
        <p>
            <label for="login_pass">Password: </label>
            <input type="password" id="login_pass" name="login_pass" size="30" />
        </p>
        <p>
            <input type="submit" value="Login" />
        </p>
        <p>
            <em>Leave empty so see resizing</em>
        </p>
    </form>
</div>


<script type="text/javascript">

$("#tip5").fancybox({
    'scrolling'     : 'no',
    'titleShow'     : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});


$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "/data/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});


</script>

我正在加载许多条目,并且每个条目都将放置一个表单,其中包含来自该条目的数据库的所有适当的联系信息。他们点击“联系人”按钮,弹出框中的花式框。

接近这个的最佳方法是什么?在确定条目数后,我是否应该循环使用每个条目的$(“#tip”+ i).fancybox等javascript?

1 个答案:

答案 0 :(得分:0)

让jQuery为你做循环。您希望应用精美框的任何表单,以指定类似SetToFancyBox

的类

然后您需要做的就是使用类选择器进行单个jQuery调用:

$(".SetToFancyBox").fancybox({...});