Question

我正在努力学习：＆＃34; jquery mobile + ajax + php + css ＆＃34;我现在正在处理移动网页的注册系统。

在我的login.php我内置了一个提交按钮，其中显示了一条消息

＆＃34;缺少用户名＆＃34;或＆＃34;密码错误＆＃34;

如果两个文本框中有一个为空，则会弹出其中一条消息。

如果两个文本框都填充了任何值，则会显示一条消息，表明您在提交时已成功完成登录。

显示的消息(showSuccess(), showError())的背景填充了颜色，但问题是其中一种颜色不起作用。

的login.php：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Webapplication</title>
<link href="css/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/login.js"></script>
<link rel="stylesheet" href="css/custom.css" />

</head> 
<body> 

<div id="page" data-role="page">
    <div id="header" data-role="header">
        <h1>TEST- Login Page</h1>
    </div>
    <div id="content" data-role="content">
    <form>
        <div =id="loginForm">   
        <h2>Enter your credentials to login</h2>
        <div id="usernameDiv" data-role="field-contain">
        <input type="text" name="username" placeholder="Username" id="username"/>
        </div><!-- end usernameDIV -->

        <div id="passwordDiv" data-role="field-contain">
        <input type="password" name="password" placeholder="password" id="password">
        </div><!-- end usernameDIV -->

        <div id="loginButtonDiv" data-role="field-contain">
        <button name="login" type="submit" data-theme="a" data-mini="true" data-inline="true">Login</button>
        </div>
</div>  
</form>
    </div>
    <div data-role="footer">
        <h4>TEST</h4>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Seite zwei</h1>
    </div>
    <div data-role="content">   
        Inhalt      
    </div>
    <div data-role="footer">
        <h4>Fußzeile</h4>
    </div>
</div>

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>Seite drei</h1>
    </div>
    <div data-role="content">   
        Inhalt      
    </div>
    <div data-role="footer">
        <h4>Fußzeile</h4>
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="header">
        <h1>Seite vier</h1>
    </div>
    <div data-role="content">   
        Inhalt      
    </div>
    <div data-role="footer">
        <h4>Fußzeile</h4>
    </div>
</div>

</body>
</html>

login.js

$(function(){
    $('form').submit(function(){

        if(validateUsername() && validateUserPassword())
        {
            showSuccess('You have logged in successfully');

        }


        function validateUsername()
        {   
            if($('#username').val().length == 0)
            {
                showError('Username failed');

            return false;
            }

            else
            {
                return true;
            }
        }

        function validateUserPassword()
        {
            if($('#password').val().length == 0)
            {
                showError('Password failed');

            return false;
            }

            else
            {
                return true;
            }
        }

function showError(message){
//show error message
    $( "<div class='ui_body_error ui-loader ui-overlay-shadow ui-corner-all'><h1>"+message+"</h1></div>" )
    .css({"display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
    .appendTo( $.mobile.pageContainer )
    .delay( 1000 )
    .fadeOut( 600, function() {
    $( this ).remove();
    });
}

function showSuccess(message){
//show success message
    $( "<div class='ui_body_success ui-loader ui-overlay-shadow ui-corner-all'><h1>"+message+"</h1></div>" )
    .css({"display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
    .appendTo( $.mobile.pageContainer )
    .delay( 1000 )
    .fadeOut( 600, function() {
    $( this ).remove();
    });
}

        return false;
    })
})

custom.css

.ui_body_success
{
    border:1px solid #24AF11;
    color:#333;text-shadow:0 1px 0 #fff;
    background:#89f07C;
    background-image:-webkit--gradient(linear,left top,left bottom,from(#fff),to(#89F07C);
    background-image:-webkit-linear-gradient(top,#fff,#00DF55);
    background-image:-moz-linear-gradient(top,#fff,#89f07C);
    background-image:-ms-linear-gradient(top,#fff,#89f07C);
    background-image:-o-linear-gradient(top,#fff,#89f07C);
    background-image:-linear-gradient(top,#fff,#89f07C);
}


.ui_body_error
{
    border:1px solid #F7503A;
    color:#333;text-shadow:0 1px 0 #fff;
    background:#FBB99E;
    background-image:-webkit--gradient(linear,left top,left bottom,from(#fff),to(#FBB99E);
    background-image:-webkit-linear-gradient(top,#fff,#FBB99E);
    background-image:-moz-linear-gradient(top,#fff,#FBB99E);
    background-image:-ms-linear-gradient(top,#fff,#FBB99E);
    background-image:-o-linear-gradient(top,#fff,#FBB99E);
    background-image:-linear-gradient(top,#fff,#FBB99E);
}

样式 .ui_body_success 工作正常，当我交换＆＃34; .ui_body_success＆＃34;的位置时和＆＃34; .ui_body_error＆＃34;。就这样，第一个几乎正在运作。

.ui_body_error
{
    border:1px solid #F7503A;
    color:#333;text-shadow:0 1px 0 #fff;
    background:#FBB99E;
    background-image:-webkit--gradient(linear,left top,left bottom,from(#fff),to(#FBB99E);
    background-image:-webkit-linear-gradient(top,#fff,#FBB99E);
    background-image:-moz-linear-gradient(top,#fff,#FBB99E);
    background-image:-ms-linear-gradient(top,#fff,#FBB99E);
    background-image:-o-linear-gradient(top,#fff,#FBB99E);
    background-image:-linear-gradient(top,#fff,#FBB99E);
}

.ui_body_success
{
    border:1px solid #24AF11;
    color:#333;text-shadow:0 1px 0 #fff;
    background:#89f07C;
    background-image:-webkit--gradient(linear,left top,left bottom,from(#fff),to(#89F07C);
    background-image:-webkit-linear-gradient(top,#fff,#00DF55);
    background-image:-moz-linear-gradient(top,#fff,#89f07C);
    background-image:-ms-linear-gradient(top,#fff,#89f07C);
    background-image:-o-linear-gradient(top,#fff,#89f07C);
    background-image:-linear-gradient(top,#fff,#89f07C);
}

我无法找到解决方案

Answer 1

在showSuccess（）中，你返回false，在showError中你没有它

css - 未应用jquery移动样式

1 个答案: