2

これは私が得たものですが、正しいテキストがテキストボックスに追加されている場合、別のページをロードする正しい方法を得ることができません。誰かが正しい構文を取得するのを手伝ってもらえますか？

<script type='text/javascript'>//<![CDATA[ 
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    var $submit = $(this).find('input[type="submit"]'),
    $text   = $(this).find('input[type="text"]');
    $text.bind('keyup', function () {
        if (this.value == 'llab') {
            $submit.button('enable');
        } else {
            $submit.button('disable');
        }
    }).trigger('keyup');
});
//]]> 

</script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Uppgift 1
                </h3>
            </div>
            <div data-role="content">
                <p>
                    Uppgift nummer ett blir att ... 
                </p>
                <img src="https://maps.googleapis.com/maps/api/staticmap?center=Centralstationen, Göteborg&amp;zoom=14&amp;size=288x200&amp;markers=Centralstationen, Göteborg&amp;sensor=false" width="288" height="200" />
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="pwtext">
                        </label>
                        <input name="passwordtext" id="pwtext" placeholder="" value="" type="text" />
                    </fieldset>
                </div>
                <input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn"/>
                <a data-role="button" data-theme="a" href="start.html" data-icon="home" data-iconpos="left">
                    Tillbaka till startsidan
                </a>
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

1

更新された回答：

これがあなたの質問/問題に対する完全な解決策です。

マークアップ：

ログインに成功すると、ログインページ（page1）と（page2）の2つのページで構成されます。

<!-- Start of first page -->
<div data-role="page" id="page1">

<div data-role="header">
<h1>page1 header</h1>
</div><!-- /header -->

<div data-role="content">   
<p>enter password</p>
<form id="login" action="" method="">
<input name="pwtext" id="pwtext" placeholder="" value="" type="text" class="required" />
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn" />
    </form>

</div><!-- /content -->

<div data-role="footer">
<h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="page2">

<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">   
<p>password accepted</p>        
<p><a href="#page1">Back to page1</a></p>

</div><!-- /content -->

<div data-role="footer">
<h4>Page2 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

パスワードの検証と、パスワードが正しい場合は次のページにリダイレクトします。

$("#login").submit(function() {

var emptyFields = $(":input.required").filter(function() {

    return !$.trim(this.value).length;
});

if(emptyFields.length) {

            $("#pwtext").css("background-color", "#ffff76");
            $("#pwtext").attr("placeholder", "Passeword required!");
    return false;
}
if ($('#pwtext').val() != 'omar') {
    $("#pwtext").css("background-color", "#ffff76");
    $("#pwtext").attr("placeholder", "Passeword required!");
    return false;
}
if ($('#pwtext').val() == 'omar') {
    $.mobile.changePage("#page2", "slideup");
    return false;
 }
});

JSFiddle：テスト

于 2013-02-26T22:21:04.000 に答える