如何使登錄框成為可重用的UI組件？

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 個解決方案

解決方案1
0 已采納 2013-12-30 22:38:37

如何使登錄框成為可重用的UI組件？

問題描述

1 個解決方案

解決方案1 0 已采納 2013-12-30 22:38:37

解決方案1
0 已采納 2013-12-30 22:38:37