]]>
<head>
<script src="pageSystem.js"></script>
<script>
var psys;
window.onload = function() {
psys = new PageSystem(1120, "pageDiv", 10, showMsg); //鎬昏褰曟暟, 鍒嗛〉緋葷粺瀹瑰櫒錛屾瘡緇?0欏?鍥炶皟
psys.init();
}
function showMsg(currentPage, pageSize) {
//鍥炶皟鏂規(guī)硶鑷畾涔夛紝涓や釜鍙傛暟錛岀涓涓負褰撳墠欏碉紝絎簩涓負姣忛〉璁板綍鏁?br /> /****************灝哻urrentPage鍜宲ageSize璇鋒眰鏁版嵁鏇存柊鍒楄〃,鏈濂戒嬌鐢╝jax鎶鏈?*****************/
alert("璇鋒眰鏁版嵁瑕佺殑鐩稿簲鍙傛暟>> currentPage: "+ currentPage + " pageSize: " + pageSize);
}
/*****濡傛灉瑕佹洿鏂板垎欏電郴緇熻濡備笅鎿嶄綔******/
//psys.update(count); //@count 涓鴻褰曟繪暟
function updatePageSys() {
psys.update(150); //@count 涓鴻褰曟繪暟
}
</script>
<style>
#pageDiv{
font-size:13px;
}
</style>
</head>
<body>
<div id="pageDiv">
</div>
<br/><br/>
<a href="#" onclick="updatePageSys();"/>鏇存柊鍒嗛〉緋葷粺</a>
</body>
</html>
2銆乸ageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
this.totolCount = count; //鎬昏褰曟暟
this.initMaxPage = grountCount? grountCount: 5; //鏄劇ず欏墊暟錛屽 1 2 3 4 5
this.pageSize = 10; //姣忛〉璁板綍鏁?br /> this.currentMax = 0; //褰撳墠鏄劇ず鐨勬渶澶ч〉鐮? 濡?1 2 3 4 5; 5涓烘渶澶ч〉鐮?br /> this.currentMin = 0; //褰撳墠鏄劇ず鐨勬渶灝忛〉鐮? 濡?11 12 13 14 15; 11涓烘渶灝忛〉鐮?br /> this.homePage = 0; //棣栭〉
this.endPage = 0; //鏈〉
this.currentPage = 0; //褰撳墠欏?br /> this.currentActiveSpan; //褰撳墠媧誨姩a瀹瑰櫒
this.pageDivObj = document.getElementById(divID); //鍒嗛〉緋葷粺瀹瑰櫒
this.pages = 0; //鎬婚〉鏁幫紝璁＄畻寰楀埌
//this._url = _url; //鎻愪氦URL
this.callBack = callBack; //鍥炶皟
var that = this; //鎸囬拡鐨勫紩鐢?br />
this.init = function() {
this.pages = parseInt(this.totolCount / this.pageSize); //鑾峰緱鎬誨叡鏈夊嚑欏?br /> this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
this.createHomePage();
this.createPrePage();
var n = 1;
while(n <= this.pages) {
if(n > this.initMaxPage){
break; //鍒拌揪鏈澶ф樉紺烘暟
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(n == 1) { //鍒濆鍖栨椂絎竴欏典負媧誨姩欏?br /> _span.innerText = n;
this.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = n;
_span.appendChild(_a);
}
this.pageDivObj.appendChild(_span);
n++;
}
if(this.pages != 0) {
this.currentMax = n - 1; //褰撳墠緇勬渶澶ч〉鐮?1 2 3 4 5鍊間負5
this.currentMin = 1; //褰撳墠鏈灝忛〉鐮?1 2 3 4 5 鍊間負1
this.homePage = 1; //棣栭〉
this.endPage = this.pages; //鏈〉
this.currentPage = 1; //褰撳墠欏?br /> }
//alert(this.currentMax);
//alert(this.currentMin);
this.createNextPage();
this.createEndPage();
};
this.query = function() {
var curPage = that.currentPage; //褰撳墠欏?br /> var pageSize = that.pageSize;
if(that.callBack) that.callBack(curPage, pageSize);
};
this.reView = function() {
//閲嶆柊娓叉煋UI
that.reViewActivePage();
that.query();
};
this.reViewActivePage = function() {
//閲嶆柊娓叉煋褰撳墠欏佃鍥?br /> var actA = event.srcElement; //褰撳墠琚偣鍑葷殑 a瀵硅薄
var ap = actA.parentNode; //鑾峰緱褰撳墠a瀹瑰櫒span瀵硅薄
//榪樺師褰撳墠欏佃鍥?br /> var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = that.currentActiveSpan.innerText;
that.currentActiveSpan.innerText = "";
that.currentActiveSpan.appendChild(_a);
//娓叉煋鏂扮殑褰撳墠欏佃鍥?br /> that.currentActiveSpan = ap; //鍒囨崲褰撳墠媧誨姩欏靛鍣?br /> var curPage = parseInt(actA.innerText);
that.currentActiveSpan.removeChild(actA);
that.currentActiveSpan.innerText = curPage;
this.currentPage = curPage; //鏇存敼褰撳墠欏電爜
if(!that.toNextGroup()) that.toPreGroup();
};
this.toNextGroup = function() {
//閲嶆柊娓叉煋鏄劇ず欏典笅涓緇?1 2 3 4 5 --> 5 6 7 8 9
if(that.currentPage == that.currentMax) {//鐐瑰嚮鐨勯〉鐮佷負褰撳墠緇勬渶澶ч〉鐮侊紝褰揼o 涓嬩竴緇?br /> if(that.currentPage != that.endPage) { //濡傛灉鐐逛簡鏈〉褰撶劧涓嶄細鍐嶆湁涓嬩竴緇勫暒錛?br /> that.pageDivObj.innerHTML = ""; //@1
var pageCode = parseInt(that.currentPage) + 1; //鏄劇ず欏電爜
var n = 2; //褰撳墠媧誨姩欏典笉閲嶅垱
this.createHomePage();
this.createPrePage();
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //灝嗗綋鍓嶆椿鍔ㄩ〉鍥炴斁,璇風湅@1
while(pageCode <= that.pages) {
if(n > that.initMaxPage){
break; //鍒拌揪鏈澶ф樉紺烘暟
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
pageCode++;
n++;
}
that.currentMax = pageCode - 1;
that.currentMin = that.currentPage;
// alert("currentMax: " + that.currentMax);
// alert("currentMin: " + that.currentMin);
this.createNextPage();
that.createEndPage();
return true;
}//end if
}//end if
return false;
};
this.toPreGroup = function() { //
//閲嶆柊娓叉煋鏄劇ず欏典笂涓緇?5 6 7 8 9 -->1 2 3 4 5
if(that.currentPage == that.currentMin) { //鐐逛簡緇勪腑鏈灝忛〉鐮?br /> if(that.currentPage != 1) {
that.pageDivObj.innerHTML = ""; //@2
var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //鏄劇ず欏電爜
var n = 2; //褰撳墠媧誨姩欏典笉閲嶅垱
this.createHomePage();
this.createPrePage();
while(true) {
if(n > that.initMaxPage){
break; //鍒拌揪鏈澶ф樉紺烘暟
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode++;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
n++;
}
that.currentMax = that.currentPage;
that.currentMin = pageCode - (that.initMaxPage -1);
//alert("currentMax: " + that.currentMax);
// alert("currentMin" + that.currentMin);
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //灝嗗綋鍓嶆椿鍔ㄩ〉鍥炴斁,璇風湅@2
that.createNextPage();
that.createEndPage();
}//end if
}//end if
};
this.toHomePage = function(){
//鍘誨埌棣栭〉
if(that.pages == 0) return;
if(that.currentPage != 1) {//鍒囩粍
that.pageDivObj.innerHTML = "";
that.init();
}//end if
that.currentPage = 1;
that.currentMin = 1;
that.currentMax = that.initMaxPage;
that.query();
};
this.toEndPage = function() {
//鍘誨埌鏈〉
if(that.pages == 0 ||that.currentPage == that.pages) return;
if(true) {//鍒囩粍鏉′歡淇敼錛屾鏉′歡浣滃簾,涓存椂璁句負true
that.pageDivObj.innerHTML = "";
that.createHomePage();
that.createPrePage();
var pageCode = 1;
var n = 1;
while(pageCode <= that.pages) {
if(n > that.initMaxPage-1){
n = 1;
}
n++;
pageCode++;
}
pageCode = that.pages - (n-2);
for(var j = 1; j < n; j++) {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(pageCode == that.pages) { //鍒濆鍖栨椂絎竴欏典負媧誨姩欏?br /> _span.innerText = pageCode;
that.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
pageCode++;
}
that.pageDivObj.appendChild(_span);
}
that.createNextPage();
that.createEndPage();
}//end if
that.currentPage = that.pages;
that.currentMin = that.pages - (n-2);
that.currentMax = that.pages;
// alert("currentMin: " + that.currentMin);
//alert("currentMax: " + that.currentMax);
// alert("pages: " + that.pages);
that.query();
};
this.next = function() {
//涓嬩竴欏?br /> };
this.pre = function() {
//涓婁竴欏?br /> };
this.update = function(count) {
//鏇存柊鍒嗛〉緋葷粺
this.totolCount = count;
that.pageDivObj.innerHTML = "";
this.init();
};
this.createPrePage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.pre;
_a.innerText = "涓婁竴欏?;
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createNextPage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.next;
_a.innerText = "涓嬩竴欏?;
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createHomePage = function() {
var homeSpan = document.createElement("SPAN");
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toHomePage;
_a.innerText = "棣栭〉";
homeSpan.appendChild(_a);
this.pageDivObj.appendChild(homeSpan);
};
this.createEndPage = function() {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toEndPage;
_a.innerText = "鏈〉(" + this.pages +")";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
}
}
3銆佹晥鏋滃浘
濡傞渶杞澆錛岃娉ㄦ槑鍘熸枃鍑哄錛佽阿璋㈠悎浣溿?/span>
]]>
<html>
<head>
<title>嫻嬭瘯欏甸潰</title>
<style>
.list {
border-top:1 solid #8A2BE2;
border-left:1 solid #8A2BE2;
border-right:1 solid #8A2BE2;
}
.list td {
border-bottom: 1 solid #8A2BE2;
}
</style>
<script>
function $(el) {
return document.getElementById(el);
}
function showWin(param) {
window.showModalDialog("dailog.htm", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
function TB(tbid) {
this.tb = typeof(tbid) == "string"? $(tbid): tbid;
this.getValue = function(rowIndex, cellIndex){
var trs = this.tb.rows[rowIndex];
var _td = trs.cells[cellIndex];
return _td.innerText;
}
this.setValue = function(rowIndex, cellIndex, value) {
var _tr = this.tb.rows[rowIndex];
var _td = _tr.cells[cellIndex];
_td.innerText = value;
}
/********鑾峰彇琛岀儲寮?*******/
this.findRowIndex = function(eventSrc) {
var _tr = eventSrc; //eventSrc浜嬩歡婧?蹇呴』鍦═D閲岃幏浜嬩歡婧愭槸TD鎴朤R鏈韓
while(_tr.tagName != "TR") {
_tr = _tr.parentNode;
}
var trs = this.tb.rows;
for(var i = 0; i < trs.length; i++){
if(_tr == trs[i]) return i;
}
}
}
function edit() {
var tb = new TB("data");
rIndex = tb.findRowIndex(event.srcElement);
$("updateRowIndex").value = rIndex;
$("userName").value = tb.getValue(rIndex, 1); //鑾峰緱濮撳悕
$("sex").value = tb.getValue(rIndex, 2); //鑾峰緱鎬у埆
$("age").value = tb.getValue(rIndex, 3); //鑾峰緱騫撮緞
showWin({title:"淇敼鐢ㄦ埛淇℃伅", width:390, height:230, _div:"openWin",parent:window});
}
function saveAndUpdateView(){
var updateRowIndex = $("updateRowIndex").value;
var tb = new TB($f("data")); //$f()鍦╠ailog.html瀹氫箟,鑾峰埌鐨則able鏄埗紿楀彛涓殑table
tb.setValue(updateRowIndex, 1, $("userName").value);
tb.setValue(updateRowIndex, 2, $("sex").value);
tb.setValue(updateRowIndex, 3, $("age").value);
close();
}
</script>
</head>
<body>
<p style="margin-top:60px">
<center>
<table id="data" class="list" width="460px">
<tr>
<td>緙栧彿</td>
<td>鐢ㄦ埛鍚?lt;/td>
<td>鎬у埆</td>
<td>騫撮緞</td>
<td>鎿嶄綔</td>
</tr>
<tr>
<td>1</td>
<td>鏉庢案鑳?lt;/td>
<td>鐢?lt;/td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 淇敼 </span></td>
</tr>
<tr>
<td>2</td>
<td>鏋楀厔</td>
<td>鐢?lt;/td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 淇敼 </span></td>
</tr>
<tr>
<td>3</td>
<td>鍙跺厔</td>
<td>鐢?lt;/td>
<td>23</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 淇敼 </span></td>
</tr>
</table>
</center>
</p>
<!---寮瑰嚭紿楀彛鏄劇ず鐨勫唴瀹?--->
<div id="openWin" style="display:none;">
<form>
<fieldSet>
<legend>淇敼鐢ㄦ埛</legend>
<table>
<tr>
<td>鐢ㄦ埛鍚?lt;/td><td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>鎬у埆</td><td><input type="text" id="sex"/></td>
</tr>
<tr>
<td>騫撮緞</td><td><input type="text" id="age"/></td>
</tr>
</table>
</fieldSet>
<input type="hidden" id="updateRowIndex"/>
</form>
<span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();"> 淇敼 </span>
</div>
</body>
</html>
2銆乨ailog.html 紿楀彛鍘熷瀷
<html>
<head>
<script>
var param = window.dialogArguments; //浼犺繃鏉ョ殑妯″紡瀵硅瘽妗嗙獥鍙ｅ弬鏁?br /> document.title = param.title; //紿楀彛鏍囬,蹇呴』鍦ㄧ獥鍙ｅ垱寤哄墠瀹炵幇s
/********灝嗙埗紿楀彛鐨刯s鍔犺澆榪涙潵********/
var scripts = param.parent.document.scripts;
var _head = document.getElementsByTagName("head")[0];
for(var n = 0; n < scripts.length; n++) {
if(scripts[n].src) {
var _script = newEl("script");
_script.src = scripts[n].src;
bind(_head, _script);
}else{//鍔犺澆鐩存帴鍦╤tml鏂囨。涓啓鐨剆cript
var _script = newEl("script");
_script.text = scripts[n].text;
bind(_head, _script);
}
}
/*******鏍規(guī)嵁ID鑾峰緱鐖剁獥鍙ｇ殑鍏冪礌*********/
function $f(el) {
return param.parent.document.getElementById(el);
}
/***********鍒涘緩涓涓狧TML鍏冪礌*******/
function newEl(tagName) {
return document.createElement(tagName);
}
/***********榪藉姞鍏冪礌***************/
function bind(ower, child) {
ower.appendChild(child);
}
/*******鍦ㄦ祻瑙堝櫒瀹屾垚瀵硅薄鐨勮杞藉悗绔嬪嵆瑙﹀彂*********/
window.onload = function() {
var winDiv;
if(typeof(param._div) == "string") {
winDiv = param.parent.document.getElementById(param._div); //鐖剁獥鍙indow瀵硅薄,鍥犱負param._div瀵硅薄鍦ㄧ埗紿楀彛
}else{//鐩存帴浼犲璞¤繃鏉?br /> winDiv = param._div;
}
$("mainDiv").innerHTML = winDiv.innerHTML; //灝咲IV鍐呭鍦ㄥ脊鍑虹獥鍙ｄ腑娓叉煋
}
</script>
</head>
<body>
<center>
<div id="mainDiv" style="margin-top:20px;width:90%"></div>
</center>
</body>
</html>
濡傞渶杞澆錛岃娉ㄦ槑鍘熸枃鍑哄錛佽阿璋㈠悎浣溿?/span>
]]>
<!--浣犵殑js浠ｇ爜-->
</script>
鍊煎緱娉ㄦ剰鐨勬槸錛宩s浠ｇ爜蹇呴』鍦?lt;frameset>涔嬪墠鎻掑叆鎵嶆湁鏁堛?br /> 鍙︿竴縐嶆槸灝唈s浠ｇ爜鍐欏湪涓涓互 .js涓哄悗緙鐨刯s鏂囦歡閲岋紝鐢ㄤ互涓嬫柟娉曞紩鍏ュ埌HMTL妗ｄ緵浣跨敤
<script src="浣犺寮曞叆鐨?js鏂囦歡鐨勮礬寰? type="text/javascript"></script>
榪欎袱縐嶅疄鐜扮殑渚嬪瓙濡備笅錛?br /> <html>
<head>
<title>js exmaple</title>
<!--鐩存帴鍦℉MTL鏂囨。涓啓js浠ｇ爜-->
<script>
function sayHello() {
alert("hello");
}
</script>
<!--浠?js鏂囦歡涓姞杞?->
<script src="myjs/util.js"></script>
</head>
<body>
</body>
</html>
2銆佸彉閲忓０鏄?br /> javascript涓敤 var鍏抽敭瀛楀０鏄庝竴涓彉閲忥紝濡傦細var userName;鐢變簬javascript浣跨敤鐨勬槸寮辯被鍨嬶紝鎵浠ュ０鏄庢椂涓嶉渶瑕佹寚瀹氬叿浣撶被鍨嬶紝鍦ㄨ繍琛屾椂浼氭牴鎹墍璧嬬殑鍊兼鏌ュ叾鏁版嵁綾誨瀷銆傛瘮濡傚０鏄?var v; 鍦ㄨ繍琛屼腑濡傛灉鍑虹幇v = 123;閭ｄ箞鍙橀噺v鎸囨暟鍊肩被鍨嬶紝濡傛灉榪愯涓嚭鐜扮殑鏄痸 = "123"錛寁 涓哄瓧絎︿覆綾誨瀷銆?br /> 3銆佸嚱鏁板０鏄庯紝浠嬬粛涓ょ鍨嬪紡
涓銆乫unction sayHello(who) { //who涓哄弬鏁?br /> alert("say hello to: " + who);
}
浜屻乿ar sayHello = function(who) {
alert("say hello to: " + who);
}
璇存槑錛氱浜岀澹版槑鏂瑰紡鏄皢鍑芥暟鐨勬寚閽堣祴緇欎竴涓彉閲忥紝璋冪敤濡備笅錛歴ayHello("whoOne");鍜岀涓縐嶅０鏄庢柟寮忚皟鐢ㄤ竴鏍楓備婦涓浜岀澹版槑鏂瑰紡鏈夌敤鐨勫簲鐢紝濡傦紝鍦╦s浠ｇ爜涓紝緇欎竴涓摰閽殑onclick浜嬩歡娉ㄥ唽涓涓柟娉曞彲浠ュ涓嬪０鏄庯細 var btn = document.createElement("button");
btn.onclick= function() {
//娣誨姞褰撶偣鍑繪閾甸挳鏃舵兂鎵ц鐨刯s浠ｇ爜
}
4銆佷簨浠跺搷搴?br /> 澹版槑浜嗙殑鍑芥暟鍙互鍦╦s浠ｇ爜閲岃璋冪敤錛屼篃鍙互鐢ㄤ簬鍝嶅簲浜嬩歡銆傚錛?br /> <html>
<head>
<title>js exmaple</title>
<!--鐩存帴鍦℉MTL鏂囨。涓啓js浠ｇ爜-->
<script>
function sayHello() {
alert("hello");
}
</script>
</head>
<body>
<!--鍝嶅簲button涓殑onclick浜嬩歡錛堝崟鍑諱簨浠訛級,璋冪敤sayHello()鏂規(guī)硶-->
<button onclick="sayHello()">鐐瑰嚮灝嗚皟鐢╯ayHello()鏂規(guī)硶鏉ュ搷搴?lt;/button>
</body>
</html>
榪愯渚嬪瓙錛岀偣鍑婚摰閽悗榪愯緇撴灉濡備笅錛?br />
澶囨敞錛氳繖鏄竴綃囧緢綆鍗曠殑javascript鐩稿叧鐭ヨ瘑鏂囩珷錛岄傚悎瀵筳avascript瀹屽叏娌℃蹇電殑鍒濆鑰呭弬鑰冿紝 鏈夎涔嬪錛岃鎸囨璁ㄨ銆?br />
]]>