Question

我注意到，在一些网站上，当一个人完成输入数据时，一些文本框已经在其中旋转“加载”图像。

例如：在注册页面上，当用户输入昵称时。当它们不存在时，系统会检查数据库以查看它是否是唯一的。

此时，文本框显示一个旋转加载器INSIDE，然后是一个勾选或交叉图像（替换加载器），如果名称有效。

我将如何实施？

Answer 1

您必须删除文本框的所有默认样式，并使用背景图像和其他样式自行重建。此外，您需要实现AJAX来处理对数据库的任何检查。这种格式不容易回答，但我建议使用FireBug来浏览你喜欢的网站，看看他们做了什么。

编辑：

这不是完全您正在寻找的东西，但这可能会有所帮助。我在一个文本框中添加了一堆自定义样式，而不是一个小JS来显示/隐藏AJAX微调器，希望这会让你在那里的一部分。

enter image description here

HTML：

<div id="search_box">
    <input id="txt_search" type="text" />
    <img src="/images/btn_submit.png" alt="Submit" id="btn_search" />
</div>

CSS：

#search_box {background:url(/images/txt_main.png) 0 0 no-repeat;height:40px;margin:0 auto;position:relative;width:386px;}
#search_box input 
{
    background:none;
    border:0;
    font-family:Tahoma,Arial,Helvetica,sans-serif;
    font-size:20px;
    line-height:20px;
    margin:2px 0 0 1px;
    outline:none;
    padding:6px;
    width:330px;
    -webkit-appearance:none;
    -webkit-border-radius:0;
}
#search_box img {float:right;margin:5px 6px 0 0;}

编辑：

附加图片。

enter image description here

Answer 2

这是一个简单的例子：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Spinning.aspx.cs" Inherits="WebApplication1.Spinning" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#namebox").blur(function () {
                if ($(this).val().length > 0) {
                    $("#namebox").addClass("spinnerLoader");
                    $.ajax({
                        type: "POST",
                        url: "/Spinning.aspx/CheckName",
                        data: "{name:'" + $(this).val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            $("#namebox").removeClass("spinnerLoader");
                            if (msg.d == "ok") {
                                $("#namebox").addClass("ok");
                            }
                            else {
                                $("#namebox").addClass("error");
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                } else {
                    $("#namebox").removeClass("spinnerLoader");
                }
            });
        });
    </script>
    <style type="text/css">
        .spinner
        {
            background-position: right;
            background-repeat: no-repeat;
        }
        .spinnerLoader
        {
            background-image: url(spinner.gif);
        }
        .ok
        {
            background-image: url(accept.png);
        }
        .error
        {
            background-image:url(error.png);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" class="spinner" id="namebox" />
    </div>
    </form>
</body>
</html>

当文本框失去焦点然后使用ajax在页面中调用页面方法时，javascript处理事件，后面的代码如下所示：

using System;
using System.Web.Script.Services;
using System.Web.Services;

namespace WebApplication1
{
    public partial class Spinning : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        [ScriptMethod]
        public static string CheckName(string name)
        {
            if (name.Equals("test"))
                return "ok";

            return "fail";
        }
    }
}

将检查输入的值，如果是测试则返回ok，否则返回。希望这可以提供帮助。

Answer 3

基于@ TrueDevelopment的回答

<div id="Div1" class="styleDivLoader">
     <asp:TextBox ID="txtWebsite" runat="server" CssClass="styleTextBoxNone" AutoPostBack="true" OnTextChanged="txtWebsite_TextChanged" />
     <asp:Image ID="imgWebsiteLoader" runat="server" CssClass="styleImageTextBox" Visible="False" />
     <asp:Label ID="lblWebsiteTitle" runat="server" CssClass="styleLabelWatermark"></asp:Label>
</div>

然后

.styleDivLoader {
    background: white;
    padding: 1px;
    border-radius: 5px 5px;
    width: 446px;
    position: relative;
    border: 1px solid darkgrey;
}

.styleTextBoxNone {
    border: none;
    border-right: 1px solid darkgrey;
    font-size: 15px;
    padding-left:10px;
    padding-right:10px;
    height: 30px;
    width: 260px;
    border-radius: 4px 4px;
    -webkit-appearance:none;

}

.styleImageTextBox {
    margin-bottom: -2px;
}

在文本框中加载图像

3 个答案: