Question

使用jQuery，我如何从这个登录框中创建一个可重用的UI组件，以便它可以在一个页面上使用两次？

jQuery的：

(function ($) {
  $.fn.loginBox = function () {

    this.html('<div class="loginContainer"><div class="formContainer"><form action="api.yoursite.com/login" class="loginForm" name="loginForm" method="post"><fieldset class="loginFields"><legend>User Login</legend><h1>User Login</h1><input autofocus class="loginID" type="email" name="email" placeholder="Apple ID" required /><input class="loginPassword" type="password" name="password" placeholder="Password" required /><button class="loginSubmit" name="submit" type="submit">Login to your account</button></fieldset></form></div></div>');

    $(".loginForm").submit(function () {

      var username = $(this).find(".loginID").val();
      var password = $(this).find(".loginPassword").val();

      $.ajax({
        type: "POST",
        url: "api.yoursite.com/login",
        data: { username: username, password: password },
        success: function (data) {
          console.log("succeeded");
        },
        error: function (data) {
          console.log("failed");
        }
      });

      return false;
    });

    return this; // make this plug-in chainable
  };

}(jQuery));

var loginOne = $("#loginOne").loginBox();
var loginTwo = $("#loginTwo").loginBox();

我是否最适合从Ink.js这样的框架中获取提示并为每个组件加载单独的脚本，或者是否有更简单的方法？

HTML：

<body>
    <div id="loginOne"></div>

    <br />

    <div id="loginTwo"></div>

</body>

更新：我已将两个单独的表单实例绑定到一个脚本 - 它是否会为每个脚本管理单独的状态和常见行为，或者这种方法是否有问题？

Answer 1

我猜你的代码会有用，不过，我有一些建议：

我会在DOM中添加一个隐藏的登录模板，您可以clone()并重复使用。当你想要一些更复杂的功能和/或布局时，在JavaScript中保持HTML内联将开始变得麻烦。
你不能简单地做var username = $(".loginID").val();。这将始终为您提供类loginID的第一个元素。在处理多个实例时，您需要使用this指针。
将data作为对象文字传递。将data: "username=" + username + "&password=" + password更改为data: { username: username, password: password }。

只是我的两分钱。

var Loginbox = (function($){

    function loginbox(){

        this.$element = $('.logintemplate').clone()
                                           .removeClass('logintemplate');
        this.bindEvents();
    }

    loginbox.prototype = {
        bindEvents: function(){

            var that = this;

            this.$element.find('.send').on('click', function(){

                $.ajax({
                    url: '/echo/json',
                    type: 'POST',
                    data: { 
                        username: that.$element.find('.username').val(), 
                        password: that.$element.find('.password').val() 
                    }

                }).done(function(data){
                     console.log('done');
                }).fail(function(){
                    console.log('fail');
                });

            });
        }
    };

    return loginbox;

})(jQuery);

for(var i = 0; i < 4; i++){
    var box = new Loginbox();
    $('body').append(box.$element.show());
}

http://jsfiddle.net/wJK4p/

如何使登录框成为可重用的UI组件？

1 个答案: