0

こんにちはiamここでこのコードを使用していますhttp://jsfiddle.net/bryanjamesross/pyNJ9/私はコード全体を1ページに分離しました..このタグの下のjavascriptのような意味です

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>

とCSSコードの下に

<script type="text/css"> 
 </script>

htmlタグでhtmlコードを使用しましたが、シングルログインのhrefリンクの代わりにテキストボックスも取得しています。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$('a.loginlink').click(function(e) {
    $('#loginform').dialog('open');
    e.preventDefault();
    return false;
});

$('#loginform').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false
});
</script>
</head>
<body>
<a href="mytest.html" class="loginlink">Log In</a>

<div id="loginform">
    <form action="/login" method="post">
        <table>
            <tr>
                <td>User Name:</td>
                <td>
                    <input name="username" type="text" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input name="password" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input type="submit" value="Login" />
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
4

1 に答える 1

1

jQueryUIも含める必要があります。

投稿したjsfiddleが使用するファイルは、CDNがホストするスクリプトとCDNがホストするスタイルシートです。

したがって、コードを次のように変更します

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>

ページの先頭に追加します

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />

アップデート

重要$(function(){ ... })DOMがロードされた後に実行されるように、コードをラップする必要があります。

$(function(){
    $('a.loginlink').click(function(e) {
        $('#loginform').dialog('open');
        e.preventDefault();
        return false;
    });

    $('#loginform').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false
    });
});

jqueryのバージョンがjqueryUIのバージョンと互換性があることを確認するには

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

それ以外の

<script type="text/javascript" src="jquery.js"></script>

http://jsfiddle.net/gaby/k6KjS/の完全なコード

于 2012-04-10T11:40:56.297 に答える