溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用jQuery的Easyui實現登陸框界面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用jQuery的Easyui實現登陸框界面”吧！
效果圖
CSS
a{
text-decoration:none;
}
body{
margin:0px;
}
#header{
width:100%;
height:30px;
background-color:#E0EFFF;
padding-top: 5px;
padding-bottom: 10px;
}
#header .logo{
margin-left: 50px;
font-size: 24px;
font-family: 微軟雅黑;
}
#picture{
width:100%;
height:750px;
}
.panel-title {
text-align: center;
font-size: 16px;
}
#bootom{
padding-top:50px;
width:100%;
height:100px;
background: #eaf2ff;
}
#bootom_content{
margin-left:100px;
width:80%;
text-align: center;
font-size:0.8em;
}
p{
line-height:20px;
}HTML
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- 引用的css -->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="themes/default/panel.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="themes/icon.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" >
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<title>系統首頁</title>
</head>
<script type="text/javascript">
console.info("==================")
$('#p').panel('move',{
left:100,
top:100
});
</script>
<body>
<div id="header" >
<div class="logo" onclick="window.location.href='index.html'">
<strong信息系統</strong>
</div>
</div>
<div id="picture" >
<div data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}"
class="easyui-panel " title="用戶登錄" >
<div >
<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
<table cellpadding="5">
<tr>
<td><input class="easyui-textbox" data-options="prompt:'賬號',validType:'name'" iconCls="icon-man" iconAlign=left /></td>
</tr>
<tr>
<td><input class="easyui-textbox" data-options="prompt:'密碼',validType:'password'" iconCls="icon-lock" iconAlign=left ></input></td>
</tr>
<tr>
<td><input class="easyui-textbox" data-options="prompt:'驗證碼',validType:'validate'" iconCls="icon-filter" iconAlign=left />
<img src="" alt="" width="56" height="32" align='absMiddle' /> </td>
</tr>
</table>
</form>
<div >
<a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" >登錄</a>
<a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" >注冊</a>
</div>
</div>
</div>
</div>
<div id="bootom">
<div id="bootom_content">
<p><strong>關于我們 法律聲明 服務條款 聯系我們</strong></p>
<p>
地址：江西省南昌市經濟開發區天祥大道 郵箱：330000
Copyright © 2017 - 2018 hacker_pangdaxing@qq.com 版權所有
</p>
<p>
建議使用IE8以上版本瀏覽器 E-mail：hacker_pandaxing@qq.com
</p>
</div>
</div>
</body>
<script>
function submitForm(){
$('#ff').form('submit',{
onSubmit:function(){
return $(this).form('enableValidation').form('validate');
}
});
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</html>感謝各位的閱讀，以上就是“怎么用jQuery的Easyui實現登陸框界面”的內容了，經過本文的學習后，相信大家對怎么用jQuery的Easyui實現登陸框界面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
