国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

常用的CSS框架

kk_miles / 1570人閱讀

摘要：常用的框架之前在寫自己的個人網站的時候，由于自己前端不是特別好，于是就去找相關的框架來搭建頁面了。找到以下這么一篇文章列出了很多常用的框架本篇主要是記錄我用過的框架，并把之前寫過的筆記進行整合一下。

常用的CSS框架

之前在寫自己的個人網站的時候，由于自己Web前端不是特別好，于是就去找相關的CSS框架來搭建頁面了。

找到以下這么一篇文章(列出了很多常用的CSS框架)：

http://w3schools.wang/report/top-UI-open-source-framework-summary.html

Bootstrap

Semantic-ui

Foundation

Materialize

Material-ui

Phantomjs

Pure

Flat-ui

Jquery-ui

React-bootstrap

Uikit

Metro-ui-css

Iview

Layui

Mui

Frozenui

AlloyUI

W3.CSS

本篇主要是記錄我用過的CSS框架，并把之前寫過的筆記進行整合一下。當然是不能面面俱到的...

jquery-easyUI

其實這個已經是比較早的了，只是之前學過了一點，做過筆記才拿到這里來。畢竟可能以后還是會用到的?

什么是easyUI

我們可以看官方對easyUI的介紹：

easyUI就是一個在Jquery的基礎上封裝了一些組件....我們在編寫頁面的時候，就可以直接使用這些組件...非常方便...easyUI多用于在后臺的頁面上...

在學習easyUI之前，我已經學過了bootstrap這么一個前端的框架了...因此學習easyUI并不困難....大多情況下，我們只要查詢文檔就可以找到對應的答案了。

easyUI快速入門

首先我們得去下載easyUI的資料...

然后在我們把對應的文件導入進去項目中，如下圖：

在html文件的body標簽內，寫上如下的代碼：


    
    
    
    

    
        這是我的第一個EasyUI程序

效果：

關于樣式的屬性我們都會在data-options這個屬性上設置的。

除了指定 class="easyui-panel"這樣的方式來使用easyUI的組件，我們還可以使用javascript的方式來動態生成...代碼如下所示：


    
panel content.

在使用easyUI的組件的時候，默認的是英文格式的。如果我們想要變成是中文格式，可以到以下的目錄找到對應的JS，在項目中導入進去就行了！

語法

layout布局

layout能夠幫助我們布局..

嵌套

當然了，我們的頁面不可能只有5個模塊，可能還有很多子模塊。我們是可以嵌套的。如以下的代碼：
accordion分類 
    
    
   
        
        
        
   
               北京  
        
   
        
   
            上海    
        
   
        
   
            廣州    
        
 
        
   
            深圳

有格式的按鈕linkbutton 
    增加部門
 
    查詢部門
 
    修改部門
 
    刪除部門

選項卡tabs 
    
    
    
   
        
        
        
   
            tab1

        
   
        
   
            tab2    
        
   
        
   
            tab3

分頁pagination

提示框validatebox 

    
    姓名：

    
    
    
    
    郵箱：


    

    密碼：

ComboBox下拉列表框 
    
    
    
    
    城市：

我們的json需要的格式也可以在文檔中找到，我們只要對照著來寫就行了。


[
  {    
    "id":1,    
    "name":"北京"   
  },
  {    
    "id":2,    
    "name":"上海"   
  },
  {    
    "id":3,    
    "name":"廣州"   
  },
  {    
    "id":4,    
    "name":"深圳"
  },
  {    
    "id":5,    
    "name":"武漢"   
  }
]
DateBox日期輸入框 
    
    入職時間：

NumberSpinner數字微調 
    商品數量:
     
    
    

    你一共購買了1個商品

Slider滑動條 
    

        身高：

ProgressBar進度條

Window窗口

Dialog對話框窗口

Messager消息窗口

Tree樹

    既然我們用到了JSON，那么我們可以在手冊看它需要的格式是什么：

    [
  {    
    "id":1,    
    "text":"廣東",
    "state":"closed",
    "children":[
    {
       "id":11,
       "text":"廣州"    ,
           "state":"closed",
           "children":[
          {
         "id":111,    
                 "text":"天河"
          },    
          {
         "id":112,    
                 "text":"越秀"
          }    
       ]
    },
    {
       "id":12,
       "text":"深圳"        
    }
    ]
  },    
  {    
    "id":2,    
    "text":"湖南"
  } 
]

    基于easyUI開發的一個綜合案例模版 
    <%@ page language="java" pageEncoding="UTF-8"%>


  
    練習
    
    
    
    
  
      
    
    
    
    
  
  
    
        
        
    
            
            
            
    
                
    jQuery-EasyUI組件
                
            
       
            
            
            
    
                
    XX公司版權所有
                
            
       
            
            
            
       
            
            
            
    
                
                
       
                       
                    
       
                                        
                           
         
                           
    • 
                                增加人事
                           
      • 
                           
    • 
                                   查詢人事
                                   
        
                                       
      • 
                                           分頁查詢人事
                                           
          
                                               
        • 
                                                   模糊分頁查詢人事
                                               
          • 
                                               
        • 
                                                   精確分頁查詢人事
                                               
          • 
                                           
        
                                       
        • 
                                       
      • 
                                           查詢所有人事
                                       
        • 
                                   
      
                           
      • 
                        
    
                    
       
                    
       
                        客戶管理    
                    
     
                    
       
                        權限管理    
                    
    
                    
       
                        報表管理    
                    
     
                    
       
                        幫助

    效果：

    分頁

    相信我們的分頁已經做得不少了，這次我們使用easyUI+Oracle+jdbc來做一個分頁...【之前大都都用Mysql，這次用Oracle】

    DateGrid會異步以POST方式向服務器傳入二個參數：page和rows二個參數，服務端需要哪個，就接收哪個參數

    page：需要顯示的頁號

    rows：需要獲取多少條記錄

    編寫emp實體 
    package zhongfucheng.entity;

import java.io.Serializable;
import java.util.Date;

/**
 * Created by ozc on 2017/7/17.
 */
public class Emp implements Serializable {

    private Integer empno;
    private String ename;
    private String job;
    private Integer mgr;
    private Date hiredate;
    private Integer sal;
    private Integer comm;
    private Integer deptno;

    public Emp() {
    }

    public Emp(Integer empno, String ename, String job, Integer mgr, Date hiredate, Integer sal, Integer comm, Integer deptno) {
        this.empno = empno;
        this.ename = ename;
        this.job = job;
        this.mgr = mgr;
        this.hiredate = hiredate;
        this.sal = sal;
        this.comm = comm;
        this.deptno = deptno;
    }

    public Integer getEmpno() {
        return empno;
    }

    public void setEmpno(Integer empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public Integer getMgr() {
        return mgr;
    }

    public void setMgr(Integer mgr) {
        this.mgr = mgr;
    }

    public Date getHiredate() {
        return hiredate;
    }

    public void setHiredate(Date hiredate) {
        this.hiredate = hiredate;
    }

    public Integer getSal() {
        return sal;
    }

    public void setSal(Integer sal) {
        this.sal = sal;
    }

    public Integer getComm() {
        return comm;
    }

    public void setComm(Integer comm) {
        this.comm = comm;
    }

    public Integer getDeptno() {
        return deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }
}
    編寫EmpDao

    使用Oracle的語法來實現分頁...!

    public class EmpDao {
    public  int getPageRecord() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
        String sql = "SELECT COUNT(EMPNO) FROM EMP";
        String count = queryRunner.query(sql, new ScalarHandler()).toString();
        return Integer.parseInt(count);
    }
    public  List getList(int start, int end) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

        String sql = "SELECT *FROM (SELECT rownum rownumid,emp.* FROM emp WHERE rownum <= ?) xx WHERE xx.rownumid> ?";

        List list = (List) queryRunner.query(sql, new Object[]{end, start}, new BeanListHandler(Emp.class));
        return list;
    }
}
    編寫EmpService

    得到對應的分頁數據，封裝到分頁對象中！

    public class EmpService {


    private EmpDao empDao = new EmpDao();
    public Page getPageResult(int currentPage) throws Exception {

        Page page = new Page(currentPage, empDao.getPageRecord());
        List empList = empDao.getList(page.getStartIndex(), page.getLinesize() * currentPage);
        page.setList(empList);
        return page;
    }

}
    處理請求的Servlet

    接收page參數，如果為空，就設置為1

    把得到的分頁數據封裝成datagrid要的格式，返回給瀏覽器！

        protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        try {
            //調用service
            EmpService empService = new EmpService();

            //設置編號方式
            request.setCharacterEncoding("UTF-8");

        /*獲取客戶端傳遞進來的參數，easyUI使用的是page參數*/
            String pageStart = request.getParameter("page");

            if (pageStart == null || pageStart.length() == 0) {
                pageStart = "1";
            }
            int currentPage = Integer.parseInt(pageStart);
            Page pageResult = empService.getPageResult(currentPage);

            Map map = new HashMap();

            map.put("total", pageResult.getTotalRecord());
            map.put("rows", pageResult.getList());


            //使用第三方工具將map轉成json文本
            JSONArray jsonArray = JSONArray.fromObject(map);
            String jsonJAVA = jsonArray.toString();

            //去掉二邊的空格
            jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
            System.out.println("jsonJAVA=" + jsonJAVA);

            //以字符流的方式，將json字符串輸出到客戶端
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(jsonJAVA);
            pw.flush();
            pw.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    JSP頁面顯示 
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>

  

    dataGrid+分頁
    效果：

    BootStrap

    BootStrap這個CSS框架是非常火的，現在已經更新到了BootStrap4了，我在個人網站中也有用到它。

    它還有其他的組件的，比如：BootStrap-Validation等，用到相關的組件時不妨查查有沒有該對應的。

    中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html

    下面我就截取以慕課網的案例的代碼了：

    最近在學bootStrap，在慕課網中有這么一個例子....感覺以后會用到這些代碼。保存起來。

    


    
    
    
    現代瀏覽器博物館
    

    

    














    

    
    
    
        
    
            chrome

            
    Chrome
    

            
    Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。
    

            
    點我下載
    
        
    
        
    
            firefox

            
    Firefox
    

            
    Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器。
    

            
    點我下載
    
        
    
        
    
            safari

            
    Safari
    

            
    Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器。
    

            
    點我下載
    
        
    
    
    

    

    
    
    

    
    
        
    
            
    
                
    

                    
    Google Chrome 使用最廣的瀏覽器
    

                    
    Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。
                        該瀏覽器是基于其他開源軟件所撰寫，包括WebKit，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。
    
                
    
                
    
                    Chrome
                
    
            
    
        
    
        
    
            
    
                
    
                    Firefox
                
    
                
    

                    
    Mozilla Firefox 美麗的狐貍
                    
    

                    
    Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器，
                        使用Gecko引擎（非ie內核），支持多種操作系統如Windows、Mac和linux。
    
                
    
            
    
        
    
        
    
            
    
                
    

                    
    Safari Mac用戶首選
    

                    
    Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。
                        Safari在2003年1月7日首度發行測試版，并成為Mac OS X v10.3與之后的默認瀏覽器，也是iPhone與IPAD和iPod touch的指定瀏覽器。
    
                
    
                
    
                    Safari
                
    
            
    
        
    
        
    
            
    
                
    
                    Opera
                
    
                
    

                    
    Opera 小眾但易用
                    
    

                    
    Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器。
                        是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統平臺上運行。.
    
                
    
            
    
        
    
        
    
            
    
                
    

                    
    IE 你懂的
    

                    
    Internet Explorer，原稱Microsoft Internet Explorer(6版本以前)和Windows Internet
                        Explorer(7，8，9，10版本)，
                        簡稱IE，是美國微軟公司推出的一款網頁瀏覽器。它采用的排版引擎(俗稱內核)為Trident。
    
                
    
                
    
                    IE
                
    
            
    
        
    
    
    

    
    


    
    


    







    
            
                     
             
               
    
                   
     文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
    
                 
                   
    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93112.html

    相關文章

    • 大前端2018現在上車還還得及么

      摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

      stormgens 評論0 收藏0

    • 大前端2018現在上車還還得及么

      摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

      mylxsw 評論0 收藏0

    • [ 學習路線 ] 學完這些去阿里！GOGOGO

      摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦 以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

      zhaochunqi 評論0 收藏0

    • [ 學習路線 ] 學完這些去阿里！GOGOGO

      摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦 以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

      learn_shifeng 評論0 收藏0

    • 常用的CSS框架

      摘要：常用的框架之前在寫自己的個人網站的時候，由于自己前端不是特別好，于是就去找相關的框架來搭建頁面了。找到以下這么一篇文章列出了很多常用的框架本篇主要是記錄我用過的框架，并把之前寫過的筆記進行整合一下。 常用的CSS框架 之前在寫自己的個人網站的時候，由于自己Web前端不是特別好，于是就去找相關的CSS框架來搭建頁面了。 找到以下這么一篇文章(列出了很多常用的CSS框架)： http://...

      Alfred 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <