0

いくつかのサイトで、人がデータの入力を終了すると、一部のテキストボックスに回転する「読み込み中」の画像があることに気づきました。

例：登録ページで、ユーザーがニックネームを入力したとき。それらがない場合、システムはDBをチェックして、それが一意であるかどうかを確認します。

このとき、テキストボックスには、その内部に回転するローダーが表示され、名前が有効かどうかにかかわらず、チェックマークまたはクロス画像（ローダーを置き換える）が表示されます。

どうすればそれを実装できますか？

4

3 に答える 3

2

テキストボックスのデフォルトのスタイルをすべて削除し、背景画像やその他のスタイルを使用して自分で再構築する必要があります。さらに、データベースに対するチェックを処理するためにAJAXを実装する必要があります。この形式で答えるのは簡単ではありませんが、FireBugを使用して、好きなサイトを探索し、彼らが何をしたかを確認することをお勧めします。

編集：

これはあなたが探しているものではありませんが、これは役立つかもしれません。AJAXスピナーを表示/非表示にするために、テキストボックスと小さなJS以外に、一連のカスタムスタイルを追加しました。これにより、その方法の一部が得られることを願っています。

ここに画像の説明を入力してください

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;}

編集：

画像を添付します。

ここに画像の説明を入力してください

于 2012-10-11T06:51:46.447 に答える
0

@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;
}
于 2012-10-11T12:15:15.807 に答える
0

簡単な例を次に示します。

    <%@ 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>

javascriptは、テキストボックスがフォーカスを失ったときにイベントを処理し、ajaxを使用してページ内のページメソッドを呼び出します。背後のコードは次のようになります。

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を返し、それ以外の場合は失敗します。これがお役に立てば幸いです。

于 2012-10-11T07:30:56.800 に答える