dart web 模板 ( 一 ) [基於 SB Admin2 Bootstrap]

時間 2019-12-01

標籤 dart web 模板基於 admin2 admin bootstrap 欄目 HTML 简体版

原文原文鏈接

基於「SB Admin2 Bootstrap「模板。css

我把這個小項目命名爲：mudsnailhtml

項目目錄：html5

其實：「mudsnail」文件夾裏面的東西，是本人寫(ban)的(yun)。
java

從簡單的開始吧。從登陸界面開始。jquery

login.html :bootstrap

<!DOCTYPE html>
<!-- 基於 SB Admin2 Bootstrap -->
<html>
  <head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>登陸</title>

    <!-- Bootstrap Core CSS -->
    <link href="../sba_admin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../sba_admin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../sba_admin/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../sba_admin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
     
     <script async type="application/dart" src="dart_files/login.dart"></script>   
     
  </head>
  
  
  
         <div class="container">
              <div class="row">
                  <div class="col-md-4 col-md-offset-4">
                      <div class="login-panel panel panel-default">
                          <div class="panel-heading">
                              <h3 class="panel-title">登陸</h3>
                          </div>
                          
                          
                          <div class="panel-body">
                              <form  role="form">
                                  <fieldset>
                                      <div id='inputEmail' class="form-group">
                                       
                                      </div>
                                      <div id='inputPsw' class="form-group">
                                      
                                      </div>
                                      <div  class="checkbox">
                                         <label>
                                              <input id='chkbox' name="remember" type="checkbox" value="Remember Me">記住我
                                          </label>
                                         
                                        
                                      </div>
                                      <!-- Change this to a button or input when using this as a form -->
                                        <div id='subt'>
                                        
                                        </div>
                                  </fieldset>
                              </form>
                          </div>
                          
                      </div>
                  </div>
              </div>
          </div>
      
  
  
  
  <body>
   
   
   
   
   
  </body>
  
  
      <!-- jQuery -->
    <script src="../sba_admin/bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../sba_admin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../sba_admin/bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../sba_admin/dist/js/sb-admin-2.js"></script>
  
</html>

login.dart :app

import 'dart:html';

void main() {  
  
  
  var inputEmail  = new InputElement();
  
  inputEmail.setAttribute('class', 'form-control');
  inputEmail.placeholder  = '郵件';
  inputEmail.name = 'email';
  inputEmail.type = 'email';
  inputEmail.autofocus =  true;
  
  querySelector('#inputEmail').append( inputEmail );
  
  
  var inputPsw  = new InputElement();
  
  inputPsw.setAttribute('class', 'form-control');
  inputPsw.placeholder  = '密碼';
  inputPsw.name = 'password';
  inputPsw.type = 'password'; 
  inputPsw.value = "";
  
  querySelector('#inputPsw').append( inputPsw );
  
    
  
  void login(Event e)
  {
    var data = {'email': inputEmail.value, 'psw': inputPsw.value};
    
    window.alert( data.toString() );
    
    //post請求
    HttpRequest.postFormData('htpp://localhost:8080/check', data).then((HttpRequest resp) { 
      window.alert( "響應的狀態是:" + resp.readyState.toString() + "  返回的結果是: " +  resp.responseText );
    });
  }
  var a = new Element.a(); 
  a.setAttribute('class', 'btn btn-lg btn-success btn-block');
  a.text = '登陸';
  a.onClick.listen( login );
  
  querySelector('#subt').append( a );
}

結果：async

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。