Fatal编程技术网
  • javascript/
  • Javascript 如何使登录框成为可重用的UI组件？

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

javascript jquery json jquery-ui

Javascript 如何使登录框成为可重用的UI组件？,javascript,jquery,json,jquery-ui,uicomponents,Javascript,Jquery,Json,Jquery Ui,Uicomponents,使用jQuery，我将如何从这个登录框中创建一个可重用的UI组件，以便它可以在一个页面上使用两次 jQuery: (function ($) { $.fn.loginBox = function () { this.html('<div class="loginContainer"><div class="formContainer"><form action="api.yoursite.com/login" class="loginForm" nam

使用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();

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

    <br />

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

</body>

（函数（$）{
$.fn.loginBox=函数（）{
html（“用户登录用户登录到您的帐户”）；
$（“.loginForm”）.submit（函数（）{
var username=$（this.find（“.loginID”）.val（）；
var password=$（this.find（“.loginPassword”）.val（）；
$.ajax({
类型：“POST”，
url:“api.yoursite.com/login”，
数据：{用户名：用户名，密码：密码}，
成功：功能（数据）{
console.log（“成功”）；
},
错误：函数（数据）{
console.log（“失败”）；
}
});
返回false；
});
返回此；//使此插件可链接
};
}（jQuery））；
var loginOne=$（“#loginOne”）.loginBox（）；
var loginTwo=$（“#loginTwo”）.loginBox（）；
我最适合从一个类似于框架的框架中获取线索，并为每个组件加载单独的脚本，还是有一种更简单的方法

HTML:

(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();

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

    <br />

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

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

我想您的代码可以工作，但是，我有一些建议：

  • 我会在DOM中添加一个隐藏的登录模板，您可以
    clone（）
    并重用它。当您需要一些更复杂的功能和/或布局时，在javascript中保持HTML内联将开始变得麻烦

  • 您不能简单地执行
    var username=$（“.loginID”）.val（）。这将始终为您提供类为
    loginID
    的第一个元素。在处理多个实例时，需要使用
    这个
    指针
  • 将
    数据作为对象文本传递。将
    数据：“username=“+username+”&password=“+password
    更改为
    数据：{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());
}

var Loginbox=（函数（$）{
函数loginbox（）{
此.$element=$（'.logintemplate'）.clone（）
.removeClass（“logintemplate”）；
这是bindEvents（）；
}
loginbox.prototype={
bindEvents:function（）{
var=这个；
此.$element.find（'.send'）.on（'click'，function（））{
$.ajax({
url:“/echo/json”，
键入：“POST”，
数据：{
用户名：that.$element.find（'.username'）.val（），
密码：that.$element.find（'.password'）.val（）
}
}).完成（功能（数据）{
console.log（'done'）；
}).fail（函数（）{
console.log（'fail'）；
});
});
}
};
返回登录框；
})（jQuery）；
对于（变量i=0；i<4；i++）{
变量框=新登录框（）；
$（'body'）.append（box.$element.show（））；
}

如果您只想在此页面上使用此代码，可以将html代码放入容器中并粘贴到另一个div中。这就是你想要的吗？不，代码应该是可重用的，这样它可以在一个站点上多次使用，如果需要的话，可以在一个页面上使用两次。如果动态地将这个登录框的每个实例附加到一个容器中并给它一个ID，我可以看到一个额外的帮助，但我不认为这是您所要求的。每个表单实例都需要是一个单独的对象。为什么您希望在一个页面上有两个登录框？很多网站都有这样的功能。为了简单起见，我的示例HTML的登录框彼此相邻。但更现实的例子是页眉或页脚中的一个实例，以及内容体中的另一个实例。另外，它们不一定使用完全相同的CSS。我在Ajax调用中修改了两个变量，使用了.find（）-ie，var username=$（this.find（“.loginID”）.val（）；不确定这是否是你的想法。谢谢你的指点@用户2761994没问题。我会这样做的。如果有什么不清楚的地方，请告诉我。这里有一些问题：1）url“echo/json”的值为何？我需要它是“api.yoursite.com/login”，但这会是一个问题吗？2） 我习惯于在ajax调用中看到成功和错误——假设.done和.fail也是可以接受的？3） 为每个登录框分配自己的ID（一个页面上的ID永远不会超过2个）不是更好吗？这样，如果需要的话，它们可以更容易地被设计成不同的样式4）我用一些更新的代码创建了另一个小提琴。我在表单元素中添加了回去，因为我需要利用HTML5语义：@user2761994 1。它只是一个测试url，可与JSFIDLE一起用于伪ajax调用。2.它们相当于3。当然，由你决定。看起来不错！