经常使用的CSS框架

经常运用的CSS框架

之前在写本身的个人网站的时刻,由于本身Web前端不是迥殊好,于是就去找相干的CSS框架来搭建页面了。

找到以下这么一篇文章(列出了许多经常运用的CSS框架):

  1. Bootstrap
  2. Semantic-ui
  3. Foundation
  4. Materialize
  5. Material-ui
  6. Phantomjs
  7. Pure
  8. Flat-ui
  9. Jquery-ui
  10. React-bootstrap
  11. Uikit
  12. Metro-ui-css
  13. Iview
  14. Layui
  15. Mui
  16. Frozenui
  17. AlloyUI
  18. W3.CSS

本篇主假如纪录我用过的CSS框架,并把之前写过的笔记举行整合一下。固然是不能四平八稳的…

jquery-easyUI

实在这个已是比较早的了,只是之前学过了一点,做过笔记才拿到这里来。毕竟可以今后照样会用到的?

什么是easyUI

我们可以看官方对easyUI的引见:

《经常使用的CSS框架》

easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时刻,就可以直接运用这些组件…异常轻易…easyUI多用于在背景的页面上…

在进修easyUI之前,我已学过了bootstrap这么一个前端的框架了…因而进修easyUI并不难题….大多情况下,我们只需查询文档就可以找到对应的答案了。

easyUI疾速入门

起首我们得去下载easyUI的材料…

然后在我们把对应的文件导入进去项目中,以下图:

《经常使用的CSS框架》

在html文件的body标签内,写上以下的代码:



    <!-- 
        第一:写一个一般div标签
        第二:首倡为div标签取一个id属性,将来用jquery好定位
        第三:为一般div标签增添easyui组件的款式
              一切的easyui组件的款式均按以下花样设置:
              easyui-组件名
        第四:假如要用easyui组件本身的属性时,必需在一般标签上誊写data-options属性名,
              内容为,key:value,key:value,假如value是string范例加引号,表面双引号,
              则内里单引号      
        注重:要在一般标签中誊写data-options属性的条件是:在一般标签上加class="easyui-组件名" 
              属性值大小写都可     
    -->
    
    
    <div 
        id="xx" 
        class="easyui-panel" 
        style="width:500px;height:300px;padding:15px"
        title="我的面板"
        data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
    
        这是我的第一个EasyUI递次
        
    </div>

结果:

《经常使用的CSS框架》

关于款式的属性我们都会在data-options这个属性上设置的。

除了指定 class="easyui-panel"如许的体式格局来运用easyUI的组件,我们还可以运用javascript的体式格局来动态天生…代码以下所示:


<div id="p2" style="padding:10px;">
    <p>panel content.</p>
</div>

<script type="text/javascript">
    $('#p2').panel({
        width: 500,
        height: 150,
        title: 'My Panel',
        border: true,
        collapsible: true
    });
</script>

在运用easyUI的组件的时刻,默许的是英文花样的。假如我们想要变成是中文花样,可以到以下的目次找到对应的JS,在项目中导入进去就好了!

《经常使用的CSS框架》

语法

《经常使用的CSS框架》

layout规划

layout可以协助我们规划..



        <!-- 规划 -->
        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
            
            <!-- 地区面板--北边 -->
            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
            
            <!-- 地区面板--南方 -->
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
            
            <!-- 地区面板--东边 -->
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
            
            <!-- 地区面板--西边 -->
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 地区面板--中间 -->
            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
            
        </div>
    
    
        <script type="text/javascript">
            //easyui挪用要领的语法以下:$('selector').组件名('method',parameter); 
            
            //阅读器加载jsp页面时触发
            $(function(){
                //将北边摺叠
                $('#layoutID').layout('collapse','north');
                //歇息3秒
                window.setTimeout(function(){
                    //将南方摺叠
                    $("#layoutID").layout("collapse","south");
                    //将北边睁开
                    $('#layoutID').layout('expand','north');
                    window.setTimeout(function(){
                        //将南方睁开
                        $("#layoutID").layout("expand","south");
                    },3000);
                    
                },3000);
            });
            
            
        </script>

《经常使用的CSS框架》

嵌套

固然了,我们的页面不可以只要5个模块,可以另有许多子模块。我们是可以嵌套的。如以下的代码:


    <div id="layoutID" class="easyui-layout" data-options="fit:true">
    
        <!-- 北 -->
        <div data-options="region:'north'" style="height:100px"></div>
         
        <!-- 中 --> 
        <div data-options="region:'center'">
        
            <div class="easyui-layout" data-options="fit:true">
            
                <!-- 西 -->    
                <div data-options="region:'west'" style="width:200px"></div>
            
                <!-- 中 -->
                <div data-options="region:'center'">
                
                    <div class="easyui-layout" data-options="fit:true">
                
                        <!-- 北 -->
                        <div data-options="region:'north'" style="height:100px"></div>
                        
                        <!-- 中 -->
                        <div data-options="region:'center'"></div>
                
                    </div>
                
                </div>
            
            </div>
        
        </div>
    
    </div>        

accordion分类


    <!-- 容器 -->
    <div 
        id="accordionID" 
        class="easyui-accordion" 
        data-options="fit:false,border:true,animate:true,multiple:false,selected:-1" 
        style="width:300px;height:400px;">   
        
        <!-- 面板 -->
        <div title="题目1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
               北京  
        </div>   
        <div title="题目2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
            上海    
        </div>   
        <div title="题目3">   
            广州    
        </div> 
        <div title="题目4" data-options="collapsible:true">   
            深圳    
        </div> 
         
    </div> 
    
    
    <script type="text/javascript">
        //当阅读器加载web页面时触发
        $(function(){
            //增添一个面板
            //$('selector').plugin('method', parameter); 
            $("#accordionID").accordion("add",{
                "title" : "题目5",
                "iconCls" : "icon-add",
                "content" : "武汉",
                "selected" : false
            });
            //歇息3秒
            window.setTimeout(function(){
                //移除题目1面板
                $("#accordionID").accordion("remove",0);
                //作废面板2选中
                $("#accordionID").accordion("unselect",0);
                //面板3选中
                $("#accordionID").accordion("select",1);
            },3000);
        });
    </script>

《经常使用的CSS框架》

有花样的按钮linkbutton

    <a 
        id="btn_add" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-add'">增添部门</a><p> 
    <a 
        id="btn_find" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-search'">查询部门</a><p> 
    <a 
        id="btn_update" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-edit'">修正部门</a><p> 
    <a 
        id="btn_delete" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-remove'">删除部门</a><p>
    
    
    
    
    
    <script type="text/javascript">
        //定位4个按钮
        $("a").click(function(){
            //猎取你所单击的按钮的题目
            var title = $(this).text();
            //去空格
            title = $.trim(title);
            //显现
            alert(title);
        });
    </script>

《经常使用的CSS框架》

选项卡tabs


    
    <!-- 容器 -->
    <div 
        id="tabsID" 
        class="easyui-tabs" 
        style="width:500px;height:250px;"
        data-options="plain:false,fit:false,border:true,tools:[
            {
                iconCls:'icon-add',
                handler:function(){
                    alert('增添')
                }
            },
            {
                iconCls:'icon-save',
                handler:function(){
                    alert('保留')
                }
            }
        ],selected:-1">   
        
        <!-- 选项卡 -->
        <div title="题目1" style="padding:20px">   
            tab1<br/>
        </div>   
        <div title="题目2" data-options="closable:true" style="overflow:auto;padding:20px;">   
            tab2    
        </div>   
        <div title="题目3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
            tab3    
        </div>   
    </div>  
    

《经常使用的CSS框架》

分页pagination

    <!-- 静态体式格局建立pagination 
    <div 
        id="paginationID" 
        class="easyui-pagination" 
        data-options="total:2000,pageSize:10" 
        style="background:#efefef;border:1px solid #ccc;"></div> 
    -->
    
    <div 
        id="paginationID" 
        style="background:#efefef;border:1px solid #ccc;width:800px">
    </div> 
    
    <script type="text/javascript">
        //total示意总纪录数
        //pageSize示意每页显现若干条纪录
        //pageNumber示意当前页号
        //pageList示意可供挑选的每页显现若干条纪录,pageSize变量的值必需属性pageList鸠合中的值之一
        $("#paginationID").pagination({
            "total" : 100,
            "pageSize" : 10,
            "pageNumber" : 1,
            "pageList" : [10,20],
            "layout" : ['list','sep','first','prev','manual','next','last','links']
        });
    </script>
    
    <script type="text/javascript">
        $("#paginationID").pagination({
            "onSelectPage" : function(pageNumber,b){
                alert("pageNumber=" + pageNumber);
                alert("pageSize=" + b);
            }
        });
    </script>

《经常使用的CSS框架》

提醒框validatebox


<div style="margin:200px"></div>
    
    姓名:<input id="nameID"/><p/>
    
    <script type="text/javascript">
        $("#nameID").validatebox({
            required : true,
            validType : ['length[1,6]','zhongwen']
        });
    </script>
    <script type="text/javascript">
        //自定义划定规矩:zhongwen
        $.extend($.fn.validatebox.defaults.rules, {    
            //zhongwen划定规矩名
            zhongwen: {  
                //validator考证体  
                //value示意用户在文本框中输入的内容
                validator: function(value){   
                    //假如相符中文划定规矩 
                    if(/^[\u3220-\uFA29]*$/.test(value)){
                        return true;    
                    }
                }, 
                //假如不相符中文划定规矩,以下就是提醒信息   
                message: '姓名必需为中文'   
            }    
        });  
    </script>
    
    邮箱:<input id="emailID"/><p/>

    <script type="text/javascript">
        $("#emailID").validatebox({
            required : true,
            validType : ['length[1,30]','email']
        });
    </script>

    暗码:<input id="passwordID"/><p/>

    <script type="text/javascript">
        $("#passwordID").validatebox({
            required : true,
            validType : ['length[6,6]','english']
        });
    </script>
    <script type="text/javascript">
        $.extend($.fn.validatebox.defaults.rules, {    
            english: {  
                validator: function(value){   
                    if(/^[a-zA-Z]*$/.test(value)){
                        return true;    
                    }
                }, 
                message: '暗码必需为英文'   
            }    
        });  
    </script>
    

《经常使用的CSS框架》

ComboBox下拉列表框


<!-- 
    都市:
    <select id="cityID" class="easyui-combobox" name="city" style="width:200px;">   
        <option>aitem1</option>   
        <option>bitem2</option>   
        <option>bitem3</option>   
        <option>citem4</option>   
        <option>citem5</option>   
        <option>citem4</option>   
        <option>ditem5</option>   
        <option>ditem4</option>   
        <option>ditem5</option>   
        <option>ditem4</option>   
        <option>ditem5</option>   
        <option>eitem4</option>   
        <option>eitem5</option>   
    </select>  
    -->    
    
    
    
    都市:
    <input id="cityID" name="city"/>  
    
    <script type="text/javascript">
        //url示意要求的途径
        //valueField示意传到服务器的值,看不见的
        //textField示意页面中显现的值,看得见
        $("#cityID").combobox({
            url : "../json/city.json",
            valueField :"id",    
               textField : "name"   
        });
    </script>
    <script type="text/javascript">
        $(function(){
            //为下拉组合框设置值
            $("#cityID").combobox("setValue","长沙");
        });
    </script>
    

我们的json须要的花样也可以在文档中找到,我们只需对照着来写就好了。
《经常使用的CSS框架》



[
  {    
    "id":1,    
    "name":"北京"   
  },
  {    
    "id":2,    
    "name":"上海"   
  },
  {    
    "id":3,    
    "name":"广州"   
  },
  {    
    "id":4,    
    "name":"深圳"
  },
  {    
    "id":5,    
    "name":"武汉"   
  }
]  

DateBox日期输入框


    
    入职时候:
    <input id="dd" type="text"/>
    <script type="text/javascript">
        $("#dd").datebox({
            required : true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect : function(mydate){
                var year = mydate.getFullYear(); 
                var month = mydate.getMonth() + 1;
                var date = mydate.getDate();
                alert(year+ "年" + month + "月" + date + "日");
            }
        });
    </script>
    

《经常使用的CSS框架》

NumberSpinner数字微调


    商品数目:
    <input id="ss" style="width:80px;"> 
    <script type="text/javascript">
        $("#ss").numberspinner({
            min : 1,
            max : 100,
            value : 1
        });
    </script>
    <p/>
    你一共购买了<span id="num">1</span>个商品
        
        
    <script type="text/javascript">
        $("#ss").numberspinner({
            onSpinUp : function(){
                //猎取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            },
            onSpinDown : function(){
                //猎取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            }
        });
    </script>
    
    
    <script type="text/javascript">
        $("#ss").keyup(function(xxx){
            //将阅读器发生的事宜对象设置到myevent变量中
            var myevent = xxx;
            //猎取按键的unicode编码
            var code = myevent.keyCode;
            //假如按钮是回车
            if(code == 13){
                //猎取数字微调的当前值,由于$(this)此时示意的是文本框,直接猎取value属性值即可
                var value = $(this).val();
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");    
            }
        });
    </script>

《经常使用的CSS框架》

Slider滑动条


    <div style="margin:100px">
        身高:<span id="tip"></span>
        <p/>
        <div id="ss" style="height:400px;width:600px"></div>
    </div>
    <script type="text/javascript">
        $("#ss").slider({
            mode : "v",
            min : 150,
            max : 190,
            rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
            showTip : true,
            value : 150
        });
    </script>
        
    <script type="text/javascript">
        $("#ss").slider({
            onChange : function(newValue){
                if(newValue == 160){
                    $("#tip").text("及格").css("color","blue");
                }else if(newValue == 170){
                    $("#tip").text("优越").css("color","green");
                }else if(newValue == 180){
                    $("#tip").text("优异").css("color","pink");
                }else if(newValue == 190){
                    $("#tip").text("卓着").css("color","red");
                }    
            }
        });
    </script>

《经常使用的CSS框架》

ProgressBar进度条


    
    <div id="p" style="width:400px;"></div> 
    <script type="text/javascript">
        $("#p").progressbar({
            width : 1300,
            height : 100,
            value : 0
        });
    </script>    
    
    <input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>
    
    
    
    
    
    <script type="text/javascript">
        //猎取1到9之间的随机数,包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
    </script>
    <script type="text/javascript">
        var timeID = null;
        //函数
        function update(){
            //猎取随机值,比方:3
            var num = getNum();
            //猎取进度条当前值,比方:99
            var value = $("#p").progressbar("getValue");
            //推断
            if(value + num > 100){
                //强行设置进度条的当前值为100
                $("#p").progressbar("setValue",100);
                //住手定时器
                window.clearInterval(timeID);
                //按钮正效
                $("#startID").removeAttr("disabled");
            }else{
                //设置进度条的当前值为num+value的和
                $("#p").progressbar("setValue",(value+num));
            }
        }
        //定拉按钮,同时供应单击事宜
        $("#startID").click(function(){
            //每隔300毫秒实行update要领
            timeID = window.setInterval("update()",300);
            //按钮失效
            $(this).attr("disabled","disabled");
        });
    </script>

《经常使用的CSS框架》

Window窗口



    <input type="button" value="翻开窗口1" id="open1"/>
    <input type="button" value="封闭窗口1" id="close1"/>
    
    <div style="margin:600px"></div>
        
    <div id="window1"></div>
        
    <script type="text/javascript">
        //定位翻开窗口1按钮,同时增添单击事宜
        $("#open1").click(function(){
            //翻开窗口1
            $("#window1").window({
                title : "窗口1",
                width : 840,
                height : 150,
                left : 200,
                top : 100,
                minimizable : false,
                maximizable : false,
                collapsible : false,
                closable : false,
                draggable : false,
                resizable : true,
                href : "/js-day06/empList.jsp"
            });
        });
    </script>
    
    <script type="text/javascript">
        //定位封闭窗口1按钮,同时增添单击事宜
        $("#close1").click(function(){
            //封闭窗口1
            $("#window1").window("close");
        });
    </script>

《经常使用的CSS框架》

Dialog对话框窗口



    <input type="button" value="翻开对话框" id="open"/>

    <div style="margin:600px"></div>

    <div id="dd"></div>
    <script type="text/javascript">
        $("#open").click(function(){
            $("#dd").dialog({
                title : "对话框",
                width : 300,
                height : 400,
                left : 200,
                top : 100,
                minimizable : false,
                maximizable : false,
                collapsible : false,
                closable : false,
                draggable : false,
                resizable : true,
                toolbar : [
                    {
                        text:'编辑',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },
                    {
                        text:'协助',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}
                    }
                ],
                buttons : [
                    {
                        text:'提交',
                        handler:function(){alert("提交");}
                    },
                    {
                        text:'封闭',
                        handler:function(){
                            //封闭对话框
                            $("#dd").dialog("close");    
                        }
                    }
                ],
                href : "/js-day06/easyui/10_form.html"
            });
        });    
    </script>    

《经常使用的CSS框架》

Messager音讯窗口


    <input type="button" value="正告框"/><br/>
    <input type="button" value="确认框"/><br/>
    <input type="button" value="输入框"/><br/>
    <input type="button" value="显现框"/><br/>
    
    
    <div style="margin:100px"></div>
    <script type="text/javascript">
        //定位一切的button按钮,同时供应单击事宜
        $(":button").click(function(){
            //猎取value属性值
            var tip = $(this).val();
            //去空格
            tip = $.trim(tip);
            //假如正告框的话
            if("正告框" == tip){
                $.messager.alert("正告框","继承勤奋","warning",function(){
                    alert("封闭");
                });
            }else if("确认框" == tip){
                $.messager.confirm("确认框","你确认要封闭该确认框吗?",function(value){
                    alert(value);
                });    
            }else if("输入框" == tip){
                $.messager.prompt("输入框","你期希的月薪是若干?",function(sal){
                    
                    if(sal == undefined){
                        alert("请输入月薪");
                    }else{
                        if(sal<6000){
                            alert("你的谦逊了");
                        }else if(sal < 7000){
                            alert("你加点油了");
                        }else{
                            alert("你很不错了");
                        }
                    }
                    
                });
            }else if("显现框" == tip){
                $.messager.show({
                    showType : "slide",
                    showSpeed : 500,
                    width : 300,
                    height : 300,
                    title : "显现框",
                    msg : "这是内容",
                    timeout : 5000
                });
            }
        });    
    </script>

《经常使用的CSS框架》

Tree树


    <ul id="treeID"></ul>
    <script type="text/javascript">
        $("#treeID").tree({
            url : "/js-day06/json/pro.json"
        });
    </script>
    

既然我们用到了JSON,那末我们可以在手册看它须要的花样是什么:

《经常使用的CSS框架》


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

《经常使用的CSS框架》

基于easyUI开辟的一个综合案例模版


<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>演习</title>
    
    <!-- 引入css文件,不限递次 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>
  
      <!-- 引入js文件,有递次限定 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
    
  </head>
  <body>
    
        <!-- Layout规划 -->
        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
            
            <!-- 北 -->
            <div data-options="region:'north',border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;">
                <center><font style="font-size:66px">jQuery-EasyUI组件</font></center>            
            </div>   
            
            <!-- 南 -->
            <div data-options="region:'south'" style="height:100px;">
                <center><font style="font-size:33px">XX公司版权一切</font></center>            
            </div>   
            
            <!-- 东 -->
            <div data-options="region:'east',iconCls:'icon-reload'" style="width:100px;"></div>   
            
            <!-- 西 -->
            <div data-options="region:'west'" style="width:200px;">
                <!-- Accordion分类 -->
                <div 
                    id="accordionID" 
                    class="easyui-accordion" 
                    data-options="fit:true,border:false,selected:-1" 
                    style="width:300px;height:400px;">   
                    <div title="部门治理" data-options="iconCls:'icon-save'" style="padding:10px;">   
                           <!-- Linkbutton按钮 -->
                        <a 
                            id="btn_add" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-add'">增添部门</a><p> 
                        <a 
                            id="btn_find" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-search'">查询部门</a><p> 
                        <a 
                            id="btn_update" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-edit'">修正部门</a><p> 
                        <a 
                            id="btn_delete" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-remove'">删除部门</a><p>  
                    </div>   
                    <div title="人事治理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        <!-- tree树 -->                
                           <ul id="treeID" class="easyui-tree" data-options="lines:true">   
                           <li>
                                <span>增添人事</span>
                           </li>
                           <li>
                                   <span>查询人事</span>
                                   <ul>
                                       <li>
                                           <span>分页查询人事</span>
                                           <ul>
                                               <li>
                                                   <span>隐约分页查询人事</span>
                                               </li>
                                               <li>
                                                   <span>准确分页查询人事</span>
                                               </li>
                                           </ul>
                                       </li>
                                       <li>
                                           <span>查询一切人事</span>
                                       </li>
                                   </ul>
                           </li>
                        </ul>
                    </div>   
                    <div title="客户治理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        客户治理    
                    </div> 
                    <div title="权限治理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        权限治理    
                    </div>
                    <div title="报表治理" data-options="iconCls:'icon-print'" style="padding:10px;">   
                        报表治理    
                    </div> 
                    <div title="协助" data-options="iconCls:'icon-help'" style="padding:10px;">   
                        协助    
                    </div>  
                </div>
            </div>   

            <!-- 中 -->
            <div data-options="region:'center'" style="padding:5px;background:#eee;">
                <!-- Tabs选项卡 -->
                <div 
                    id="tabsID" 
                    class="easyui-tabs" 
                    style="width:500px;height:250px;"
                    data-options="plain:true,border:false,selected:-1,fit:true">   
                </div>
            </div>   
            
        </div>

        <script type="text/javascript">
            //定位4个按钮
            $("a").click(function(){
                //猎取你所单击的按钮的题目
                var title = $(this).text();
                //去空格
                title = $.trim(title);
                //假如title变量是"增添部门"
                if("增添部门" == title){
                    //检察该选项卡是不是已翻开
                    var flag = $("#tabsID").tabs("exists",title);
                    //假如未翻开
                    if(!flag){
                        //翻开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "content" : "文本",
                            "iconCls" : "icon-add"
                        });
                    }
                }else if("查询部门" == title){
                    var flag = $("#tabsID").tabs("exists",title);
                    if(!flag){
                        //翻开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "content" : "文本",
                            "iconCls" : "icon-search"
                        });
                    }
                }
            });
        </script>
        <script type="text/javascript">
            $(function(){
                //收起一切的选项
                $("#treeID").tree("collapseAll");
            });
        </script>
        <script type="text/javascript">
            $("#treeID").tree({
                onClick : function(node){
                    //猎取点击树节点的文本
                    var title = node.text;
                    //去空格
                    title = $.trim(title);
                    //发生tab选项卡
                    var flag = $("#tabsID").tabs("exists",title);
                    //假如没有翻开的话
                    if(!flag){
                        //翻开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "href" : "${pageContext.request.contextPath}/empList.jsp",
                            "iconCls" : "icon-search"
                        });
                    }    
                }
            });
        </script>

  </body>
</html>

结果:

《经常使用的CSS框架》

《经常使用的CSS框架》

分页

置信我们的分页已做得不少了,此次我们运用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<Emp> 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<Emp> list = (List<Emp>) 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<Emp> 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" %>
<html>
  <head>

    <title>dataGrid+分页</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>

  <table id="dg" style="width: 800px" ></table>
  <script>
    $('#dg').datagrid({
      url:'${pageContext.request.contextPath}/getPageServlet?time'+ new Date().getTime(),
      columns:[[

        /*这里的field要对应JavaBean的属性称号,不然猎取不到数据*/
        {field:'empno',title:'编号',width:100},
        {field:'ename',title:'姓名',width:100},
        {field:'job',title:'事情',width:100},
        {field:'mgr',title:'上编',width:100},
        {field:'hiredate',title:'入时',width:100},
        {field:'sal',title:'月薪',width:100},
        {field:'comm',title:'佣金',width:100},
        {field:'deptno',title:'部编',width:100}
      ]],
      fitColumns : true,
      singleSelect : true,
      pagination : true,

        /*pageSize对应rows,pageNum对应page,datagrid会自动把这两个值通报进去*/
      pageNumber : 1,
      pageSize : 3,
      pageList : [3],
      fit:true
    });
  </script>

  </body>
</html>

结果:

《经常使用的CSS框架》

BootStrap

BootStrap这个CSS框架是异常火的,如今已更新到了BootStrap4了,我在个人网站中也有用到它。

它另有其他的组件的,比方:BootStrap-Validation等,用到相干的组件时无妨查查有无该对应的。

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

下面我就截取以慕课网的案例的代码了:

近来在学bootStrap,在慕课网中有这么一个例子….觉得今后会用到这些代码。保留起来。


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>当代阅读器博物馆</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>

        body {
            padding-top: 50px;
            padding-bottom: 40px;
            color: #5a5a5a;
        }

        /* 轮播广告 */

        .carousel {
            height: 500px;
            margin-bottom: 60px;
        }

        .carousel .item {
            height: 500px;
            background-color: #000;
        }

        .carousel .item img {
            width: 100%;
        }

        .carousel-caption {
            z-index: 10;
        }

        .carousel-caption p {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }

        /* 简介 */

        .summary {
            padding-right: 15px;
            padding-left: 15px;
        }

        .summary .col-md-4 {
            margin-bottom: 20px;
            text-align: center;
        }

        /* 特征 */

        .feature-divider {
            margin: 40px 0;
        }

        .feature {
            padding: 30px 0;
        }

        .feature-heading {
            font-size: 50px;
            color: #2a6496;
        }

        .feature-heading .text-muted {
            font-size: 28px;
        }

        /* 相应式规划 */
        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }

            .feature-heading {
                font-size: 34px;
            }

            .feature-heading .text-muted {
                font-size: 22px;
            }
        }

        @media (min-width: 992px) {
            .feature-heading {
                margin-top: 120px;
            }
        }
    </style>

</head>

<body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
    <div class="container">
        <div class="navbar-header">

            <!--假如分辨率较小,那末这里就会涌现-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">当代阅读器博物馆</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#ad-carousel">综述</a></li>
                <li><a href="#summary-container">简述</a></li>

                <!--下拉框-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">特性 <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>
                        <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>
                        <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>
                        <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>
                        <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>
                    </ul>
                </li>
                <!--模态窗口-->
                <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
            </ul>
        </div>
    </div>
</div>


<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
        <li data-target="#ad-carousel" data-slide-to="3"></li>
        <li data-target="#ad-carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/chrome-big.jpg" alt="1 slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome,又称Google阅读器,是一个由Google(谷歌)公司开辟的网页阅读器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/firefox-big.jpg" alt="2 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox,中文名一般称为“火狐”或“火狐阅读器”,是一个开源网页阅读器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/safari-big.jpg" alt="3 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari,是苹果计算机的最新操作系统Mac OS X中的阅读器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/opera-big.jpg" alt="4 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera阅读器,是一款挪威Opera Software ASA公司制造的支撑多页面标签式阅读的收集阅读器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/ie-big.jpg" alt="5 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer,简称 IE,是微软公司推出的一款网页阅读器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<!-- 主要内容 -->
<div class="container summary">

    <!-- 简介 -->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome,又称Google阅读器,是一个由Google(谷歌)公司开辟的网页阅读器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox,中文名一般称为“火狐”或“火狐阅读器”,是一个开源网页阅读器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari,是苹果计算机的最新操作系统Mac OS X中的阅读器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>

    <!-- 特征 -->

    <hr class="feature-divider">
    <ul class="nav nav-tabs" role="tablist" id="feature-tab">
        <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
        <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
        <li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
        <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-chrome">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Google Chrome <span
                            class="text-muted">运用最广的阅读器</span></h2>

                    <p class="lead">Google Chrome,又称Google阅读器,是一个由Google(谷歌)公司开辟的网页阅读器。
                        该阅读器是基于其他开源软件所撰写,包含WebKit,目的是提拔稳定性、速率和安全性,并创造出简朴且有效力的运用者界面。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/chrome-logo.jpg"
                         alt="Chrome">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-firefox">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/firefox-logo.jpg"
                         alt="Firefox">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">优美的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox,中文名一般称为“火狐”或“火狐阅读器”,是一个开源网页阅读器,
                        运用Gecko引擎(非ie内核),支撑多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-safari">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2>

                    <p class="lead">Safari,是苹果计算机的最新操作系统Mac OS X中的阅读器,运用了KDE的KHTML作为阅读器的运算中间。
                        Safari在2003年1月7日首度刊行测试版,并成为Mac OS X v10.3与以后的默许阅读器,也是iPhone与IPAD和iPod touch的指定阅读器。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/safari-logo.jpg"
                         alt="Safari">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-opera">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/opera-logo.jpg"
                         alt="Opera">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span>
                    </h2>

                    <p class="lead">Opera阅读器,是一款挪威Opera Software ASA公司制造的支撑多页面标签式阅读的收集阅读器。
                        是跨平台阅读器可以在Windows、Mac和Linux三个操作系统平台上运转。.</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-ie">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2>

                    <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(6版本之前)和Windows Internet
                        Explorer(7,8,9,10版本),
                        简称IE,是美国微软公司推出的一款网页阅读器。它采纳的排版引擎(俗称内核)为Trident。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/ie-logo.jpg"
                         alt="IE">
                </div>
            </div>
        </div>
    </div>

    <!-- 关于 -->
    <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">封闭</span></button>
                    <h4 class="modal-title" id="modal-label">关于</h4>
                </div>
                <div class="modal-body">
                    <p>慕课网隶属于北京慕课科技中间(有限合资),是一家处置互联网免费教授教养的收集教诲公司。秉持“开辟、立异、平正、分享”的精力,
                        将互联网特征周全的应用在教诲范畴,致力于为教诲机构及求学者打造一站式互动在线教诲品牌。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
                </div>
            </div>
        </div>
    </div>


    <!--角标-->
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2014 慕课网 </p>
    </footer>

</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>

    /*触发点击事宜*/
    $(function () {
        $('#ad-carousel').carousel();
        $('#menu-nav .navbar-collapse a').click(function (e) {
            var href = $(this).attr('href');
            var tabId = $(this).attr('data-tab');
            if ('#' !== href) {
                e.preventDefault();
                $(document).scrollTop($(href).offset().top - 70);
                if (tabId) {
                    $('#feature-tab a[href=#' + tabId + ']').tab('show');
                }
            }
        });
    });
</script>
</body>
</html>

Bootstrap 模态框防止点击背景处封闭:

解决要领(摘抄自:
http://blog.csdn.net/gloomy_1…

  1. 在HTML页面中编写模态框时,在div初始化时增添属性 aria-hidden=”true” data-backdrop=”static”,即可。。
  2. 在须要显现模态框,初始化时,$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 个中 ,backdrop:’static’指的是点击背景空白处不被封闭; keyboard:false指的是触发键盘esc事宜时不封闭。

Materialize

这个也是很悦目的CSS框架,详细的用法跟BootStrap是差不多的,会了BootStrap这个也就看文档来用了,没什么迥殊的处所的。

官网:http://materializecss.com

假如文章有错的处所迎接斧正,人人相互交换。习气在微信看技术文章,想要猎取更多的Java资本的同砚,可以
关注微信民众号:Java3y

    原文作者:Java3y
    原文地址: https://segmentfault.com/a/1190000013507931
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞