jQueryEasyui實現(xiàn)登陸框界面的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)jQuery Easyui實現(xiàn)登陸框界面的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、合作網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為合作等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

效果圖

jQuery Easyui實現(xiàn)登陸框界面的示例分析

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>系統(tǒng)首頁</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信息系統(tǒng)</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  />&nbsp;&nbsp;&nbsp;&nbsp;
              <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>&nbsp;&nbsp;&nbsp;&nbsp;
          <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>關(guān)于我們&nbsp;&nbsp;&nbsp;   法律聲明 &nbsp;&nbsp;&nbsp;  服務(wù)條款 &nbsp;&nbsp;&nbsp; 聯(lián)系我們</strong></p>
      <p> 
        地址：江西省南昌市經(jīng)濟(jì)開發(fā)區(qū)天祥大道 &nbsp;&nbsp;&nbsp;郵箱：330000 
        &nbsp;&nbsp;&nbsp;Copyright &copy; 2017 - 2018 &nbsp;&nbsp;&nbsp;hacker_pangdaxing@qq.com 版權(quán)所有
      </p>
      <p>
        建議使用IE8以上版本瀏覽器 &nbsp;&nbsp;&nbsp;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>

關(guān)于“jQuery Easyui實現(xiàn)登陸框界面的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：jQueryEasyui實現(xiàn)登陸框界面的示例分析
文章URL：http://muchs.cn/article2/jpicic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、App開發(fā)、云服務(wù)器、定制開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)