經常使用的CSS框架
經常使用的CSS框架
以前在寫本身的我的網站的時候，因爲本身Web前端不是特別好，因而就去找相關的CSS框架來搭建頁面了。javascript
找到如下這麼一篇文章(列出了不少經常使用的CSS框架)：css
- 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框架，並把以前寫過的筆記進行整合一下。固然是不能面面俱到的...html
jquery-easyUI
其實這個已是比較早的了，只是以前學過了一點，作過筆記纔拿到這裏來。畢竟可能之後仍是會用到的?前端
什麼是easyUI
咱們能夠看官方對easyUI的介紹：html5
easyUI就是一個在Jquery的基礎上封裝了一些組件....咱們在編寫頁面的時候，就能夠直接使用這些組件...很是方便...easyUI多用於在後臺的頁面上...java
在學習easyUI以前，我已經學過了bootstrap這麼一個前端的框架了...所以學習easyUI並不困難....大多狀況下，咱們只要查詢文檔就能夠找到對應的答案了。node
easyUI快速入門
首先咱們得去下載easyUI的資料...jquery
而後在咱們把對應的文件導入進去項目中，以下圖：linux
在html文件的body標籤內，寫上以下的代碼：web
<!--
第一：寫一個普通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>
效果：
關於樣式的屬性咱們都會在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，在項目中導入進去就好了！
語法
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>
嵌套
固然了，咱們的頁面不可能只有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>
有格式的按鈕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>
選項卡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>
分頁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>
提示框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>
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須要的格式也能夠在文檔中找到，咱們只要對照着來寫就好了。
[
{
"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>
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>
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>
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>
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>
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>
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>
Tree樹
<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/js-day06/json/pro.json"
});
</script>
既然咱們用到了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"%>
<!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>
效果：
分頁
相信咱們的分頁已經作得很多了，此次咱們使用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>
效果：
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">×</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>© 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...：
- 在HTML頁面中編寫模態框時，在div初始化時添加屬性 aria-hidden=」true」 data-backdrop=」static」，便可。。
- 在須要顯示模態框，初始化時，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ，backdrop：’static’指的是點擊背景空白處不被關閉； keyboard:false指的是觸發鍵盤esc事件時不關閉。
Materialize
這個也是很好看的CSS框架，具體的用法跟BootStrap是差很少的，會了BootStrap這個也就看文檔來用了，沒什麼特別的地方的。
若是文章有錯的地方歡迎指正，你們互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同窗，能夠 關注微信公衆號:Java3y
相關文章
- 1. 經常使用的CSS框架
- 2. Android經常使用框架
- 3. android 經常使用框架
- 4. PHP經常使用框架
- 5. python經常使用框架
- 6. Python經常使用框架
- 7. android經常使用框架
- 8. 經常使用C#框架
- 9. java經常使用框架
- 10. 經常使用框架
- 更多相關文章...
- • 使用 CSS 顯示 XML - XML 教程
- • SQLite 常用函數 - SQLite教程
- • 常用的分佈式事務解決方案
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 經常使用的CSS框架
- 2. Android經常使用框架
- 3. android 經常使用框架
- 4. PHP經常使用框架
- 5. python經常使用框架
- 6. Python經常使用框架
- 7. android經常使用框架
- 8. 經常使用C#框架
- 9. java經常使用框架
- 10. 經常使用框架