Part16 - 前端開發框架、插件

時間 2019-11-10

標籤 part16 前端開發框架插件简体版

原文原文鏈接

本節內容

前端開發框架、插件

1、框架

前端開發框架能大大縮減開發時間，避免重複寫簡單的代碼。

 1 a、BootStrap    (全棧，先後臺均可以用)
 2     包含：
 3         - css
 4         - js
 5     學習 BootStrap 規則
 6     
 7     1、響應式佈局：根據頁面大小不同，頁面佈局不同
 8         @media  --> BootStrap內部實現，使用時只須要按照網頁上組件代碼copy就能夠了
 9         
10     2、圖標、字體：指定使用哪一個字體文件(包含圖標的表格)
11         @font-face  --> BootStrap內部實現，使用時只須要按照網頁上組件代碼copy就能夠了
12         
13     3、基本使用
14     
15 
16 ========如下針對後臺管理========
17 b、jQueryUI *    （相似EasyUI，沒有EasyUI插件全）
18     - css
19     - js
20     
21     學習 jQueryUI 規則
22 
23 
24 c、EasyUI    （修改代價大,css和js都要修改）
25     - css
26     - js
27     
28     學習 EasyUI 規則
29     
30     存在大量====== Ajax操做 =========

三種框架簡單介紹

一、BootStrap

全棧，先後臺均可以用。下載軟件包後按照規則引入便可使用。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <!--BootStrap簡單使用-->
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <!--主要的部分-->
  8     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
  9     <!--主題，一些簡單顏色配比-->
 10     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"/>
 11 
 12     <!--注意樣式的順序，本身要修改放在下邊-->
 13     <!--強制樣式生效 !important -->
 14     <style>
 15         .no-radius{
 16             border-radius: 0 !important;
 17         }
 18     </style>
 19 
 20 </head>
 21 <body style="background-color: red">
 22     <!--導航條-->
 23     <nav class="navbar navbar-default no-radius">
 24       <div class="container-fluid">
 25         <!-- Brand and toggle get grouped for better mobile display -->
 26         <div class="navbar-header">
 27           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 28             <span class="sr-only">Toggle navigation</span>
 29             <span class="icon-bar"></span>
 30             <span class="icon-bar"></span>
 31             <span class="icon-bar"></span>
 32           </button>
 33           <a class="navbar-brand" href="#">Brand</a>
 34         </div>
 35 
 36         <!-- Collect the nav links, forms, and other content for toggling -->
 37         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 38           <ul class="nav navbar-nav">
 39             <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 40             <li><a href="#">Link</a></li>
 41             <li class="dropdown">
 42               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 43               <ul class="dropdown-menu">
 44                 <li><a href="#">Action</a></li>
 45                 <li><a href="#">Another action</a></li>
 46                 <li><a href="#">Something else here</a></li>
 47                 <li role="separator" class="divider"></li>
 48                 <li><a href="#">Separated link</a></li>
 49                 <li role="separator" class="divider"></li>
 50                 <li><a href="#">One more separated link</a></li>
 51               </ul>
 52             </li>
 53           </ul>
 54           <form class="navbar-form navbar-left">
 55             <div class="form-group">
 56               <input type="text" class="form-control" placeholder="Search">
 57             </div>
 58             <button type="submit" class="btn btn-default">Submit</button>
 59           </form>
 60           <ul class="nav navbar-nav navbar-right">
 61             <li><a href="#">Link</a></li>
 62             <li class="dropdown">
 63               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 64               <ul class="dropdown-menu">
 65                 <li><a href="#">Action</a></li>
 66                 <li><a href="#">Another action</a></li>
 67                 <li><a href="#">Something else here</a></li>
 68                 <li role="separator" class="divider"></li>
 69                 <li><a href="#">Separated link</a></li>
 70               </ul>
 71             </li>
 72           </ul>
 73         </div><!-- /.navbar-collapse -->
 74       </div><!-- /.container-fluid -->
 75     </nav>
 76 
 77     <!--圖標-->
 78     <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
 79 
 80     <!-- 下拉菜單 -->
 81     <div class="btn-group">
 82         <!--btn-default是背景顏色-->
 83         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
 84                 aria-expanded="false">
 85             Action <span class="caret"></span>
 86         </button>
 87         <ul class="dropdown-menu">
 88             <li><a href="#">Action</a></li>
 89             <li><a href="#">Another action</a></li>
 90             <li><a href="#">Something else here</a></li>
 91             <li role="separator" class="divider"></li>
 92             <li><a href="#">Separated link</a></li>
 93         </ul>
 94     </div>
 95 
 96 <script src="jquery-1.12.4.js"></script>
 97 <!--bootstrap.js依賴於jquery-->
 98 <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
 99 </body>
100 </html>

使用示例,!important強制樣式生效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--@media響應式佈局：根據頁面大小不同，頁面佈局不同-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .c1{
 9             background-color: red;
10             height: 50px;
11         }
12         /*最小寬度大於700px時生效*/
13         @media (min-width: 700px) {
14            .c2{
15                 background-color: grey;
16             }
17         }
18     </style>
19 </head>
20 <body>
21     <div class="c1 c2"></div>
22 </body>
23 </html>

@media響應式佈局

二、EasyUI

修改代價大,css和js都要修改

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
  6     <!--jquery-easyui下載解壓後，網站上的組件代碼複製下來，修改其中css和js連接-->
  7     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.4.2/themes/default/easyui.css">
  8     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.4.2/themes/icon.css">
  9     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.4.2/themes/color.css">
 10     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.4.2/demo/demo.css">
 11     <!--引入jquery.min.js(被easyui依賴)和jquery.easyui.min.js-->
 12     <script type="text/javascript" src="jquery-easyui-1.5.4.2/jquery.min.js"></script>
 13     <script type="text/javascript" src="jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
 14 </head>
 15 <body>
 16     <h2>Basic CRUD Application</h2>
 17     <p>Click the buttons on datagrid toolbar to do crud actions.</p>
 18 
 19     <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
 20             url="get_users.php"
 21             toolbar="#toolbar" pagination="true"
 22             rownumbers="true" fitColumns="true" singleSelect="true">
 23         <thead>
 24             <tr>
 25                 <th field="firstname" width="50">First Name</th>
 26                 <th field="lastname" width="50">Last Name</th>
 27                 <th field="phone" width="50">Phone</th>
 28                 <th field="email" width="50">Email</th>
 29             </tr>
 30         </thead>
 31     </table>
 32     <div id="toolbar">
 33         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
 34         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
 35         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
 36     </div>
 37 
 38     <div id="dlg" class="easyui-dialog" style="width:400px"
 39             closed="true" buttons="#dlg-buttons">
 40         <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
 41             <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">User Information</div>
 42             <div style="margin-bottom:10px">
 43                 <input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
 44             </div>
 45             <div style="margin-bottom:10px">
 46                 <input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
 47             </div>
 48             <div style="margin-bottom:10px">
 49                 <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
 50             </div>
 51             <div style="margin-bottom:10px">
 52                 <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
 53             </div>
 54         </form>
 55     </div>
 56     <div id="dlg-buttons">
 57         <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
 58         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
 59     </div>
 60     <script type="text/javascript">
 61         var url;
 62         function newUser(){
 63             $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
 64             $('#fm').form('clear');
 65             url = 'save_user.php';
 66         }
 67         function editUser(){
 68             var row = $('#dg').datagrid('getSelected');
 69             if (row){
 70                 $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
 71                 $('#fm').form('load',row);
 72                 url = 'update_user.php?id='+row.id;
 73             }
 74         }
 75         function saveUser(){
 76             $('#fm').form('submit',{
 77                 url: url,
 78                 onSubmit: function(){
 79                     return $(this).form('validate');
 80                 },
 81                 success: function(result){
 82                     var result = eval('('+result+')');
 83                     if (result.errorMsg){
 84                         $.messager.show({
 85                             title: 'Error',
 86                             msg: result.errorMsg
 87                         });
 88                     } else {
 89                         $('#dlg').dialog('close');        // close the dialog
 90                         $('#dg').datagrid('reload');    // reload the user data
 91                     }
 92                 }
 93             });
 94         }
 95         function destroyUser(){
 96             var row = $('#dg').datagrid('getSelected');
 97             if (row){
 98                 $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
 99                     if (r){
100                         $.post('destroy_user.php',{id:row.id},function(result){
101                             if (result.success){
102                                 $('#dg').datagrid('reload');    // reload the user data
103                             } else {
104                                 $.messager.show({    // show error message
105                                     title: 'Error',
106                                     msg: result.errorMsg
107                                 });
108                             }
109                         },'json');
110                     }
111                 });
112             }
113         }
114     </script>
115 </body>
116 </html>

使用示例

三、jQueryUI

相似EasyUI，沒有EasyUI插件全

2、插件

前端開發插件能大大縮減開發時間，避免重複寫簡單的代碼。

一、首頁輪播圖jQuerybxSlider

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--首頁輪播圖jQuerybxSlider-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <link rel="stylesheet" type="text/css" href="jQuerybxslider/jquery.bxslider.css">
 8 </head>
 9 <body>
10     <ul class="bxslider">
11       <li><img src="images/1.jpg" /></li>
12       <li><img src="images/2.jpg" /></li>
13       <li><img src="images/3.jpg" /></li>
14       <li><img src="images/4.jpg" /></li>
15       <li><img src="images/5.jpg" /></li>
16     </ul>
17 
18     <script src="jquery-1.12.4.js"></script>
19     <script src="jQuerybxslider/jquery.bxslider.js"></script>
20     <script>
21         //當頁面加載完成以後執行$('.bxslider').bxSlider();
22         $(document).ready(function () {
23            $('.bxslider').bxSlider();
24         });
25     </script>
26 </body>
27 </html>