- 浏览: 466132 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
a1439226817:
能不能发下源码1439226817@qq.com
ExtJsCRUD组件实现 -
w923690968:
[list][*]引用[u][/u][/list]
[JS]Drag And Drop -
zhumingyuan:
您好!用的的是3.2.3版本,按照您的方法配置了一下,但是还是 ...
spring vmc3.1.1 下,通过AnnotationMethodHandlerAdapter配置webBindingInitializer失效解决方案 -
sumo084:
我把xDarkness-MultClrBubble-1.0.j ...
JAVA实现类泡泡屏保效果 -
sumo084:
求源码,楼主好人,630483738@qq.com,谢谢
JAVA实现类泡泡屏保效果
入门小测验:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=gbk"> <title>测试</title> </head> <body> <h3> 功能实现:<br> 1、点击“验证”按钮,执行一个方法,方法实现功能:<br> 验证“文本框”必填,<br> 单选按钮必须选中“男”,<br> 复选框必须选中一个值,<br> 下拉框必须选中一个值<br> 2、点击“重置”按钮,执行一个方法,方法实现功能:<br> 清空除单选按钮的所有值,文本框中内容清空、复选框所有勾选都去除,下拉框复位到“请选择”<br> 3、点击“设置默认值”按钮,执行一个方法,方法实现功能:<br> “文本框”内容为“conch”,<br> 单选按钮选中“男”,<br> 复选框选中"1","3",<br> 下拉框选中"2"<br> </h3> <hr/> <form id="form1" name="form1"> 文本框 :<input type="text" id="txt" value="" /> <br /> 单选按钮: <input type="radio" value="男" name="sex" />男 <input type="radio" value="女" name="sex" checked="checked"/>女 <br /> 复选框: <input type="checkbox" value="1" name="check[]"/>1 <input type="checkbox" value="2" name="check[]" />2 <input type="checkbox" value="3" name="check[]" />3 <br /> 下拉框: <select id="sel" style="width: 100px"> <option value="">请选择</option> <option value="yi">1</option> <option value="er">2</option> <option value="san">3</option> </select> <br /> <input type="button" value="验证"/> <input type="button" value="重置"/> <input type="button" value="设置默认值"/> </form> </body> </html>
一个就JS基础教程:http://nianshi.iteye.com/blog/747761
HTML DOM简介
- DOM可以做什么?
- DOM的结构
- 访问DOM节点1——getElementById()
- 访问DOM节点2——getElementsByTagName()
- 访问DOM节点3——通过节点关系
- DOM节点信息
- DOM信息nodeType的应用
- 修改DOM——innerHTML
- 删除DOM节点——removeChild
- 添加DOM节点
- DOM简介总结
XGrid V0.1:动态表格实现
1、这是一个简单的表格,里面的数据行(tr)是静态的数据
<html> <head> </head> <body> <div id="grid"> <table border="1"> <tr> <td id="no">No</td> <td>Name</td> <td>Password</td> <td>Organization</td> <td>Email</td> </tr> <tr> <td>1</td> <td>darkness1</td> <td>Password1</td> <td>Organization1</td> <td>darkness1@conch.com</td> </tr> <tr> <td>2</td> <td>darkness2</td> <td>Password2</td> <td>Organization2</td> <td>darkness2@conch.com</td> </tr> </table> </div> </body> </html>
2、我们希望将其中的数据行可以动态创建出来,首先将加粗的数据行(tr)删除,再添加一个div,我们将动态数据添加到新的div中
<div id="grid"> <table border="1"> <tr border="1"> <td id="no">No</td> <td>the Email</td> <td>the Name</td> <td>the Organization</td> <td>the Password</td> </tr> </table> </div> <div id="dynamicGrid" />
3、提取出数据
var json = { persons: [{ no: 1, name: "darkness1", password: "password1", organization: "organization1", email: "darkness@conch.com" },{ no: 2, name: "darkness2", password: "password2", organization: "organization2", email: "darkness@conch.com" },{ no: 3, name: "darkness3", password: "password3", organization: "organization3", email: "darkness@conch.com" }] };
4、将数据动态添加到新的div中
var grid = document.getElementById("dynamicGrid"); // function createTable() {} var createTable = function() { var table = document.createElement("table"); table.border="1"; var tbody = document.createElement("tbody"); var persons = json.persons; for(var i = 0; i < persons.length; i++) { var tr = document.createElement("tr"); var person = persons[i]; for(var j in person) { var td = document.createElement("td"); td.innerHTML = person[j]; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); grid.appendChild(table); } createTable();
XGrid V0.2:实现数据模型
1、上一个版本实现了表格数据的动态显示,但是有一个问题,它的表头是静态的,数据的顺序也是静态的,如果我把标题栏的顺序调换一下,下面的数据与标题栏就不对应了,我希望创建一个类,能够将标题与数据的字段列匹配起来,如下面所示
function Grid(config){
}
var newGrid = new Grid({
dataModel: [
{title::"the name", field:"name"},
{title::"the organization", field:"organization"},
{title::"the email", field:"email"}
],
dataStore: json.persons
});
table中的标题栏要删掉,需要根据dataMode动态创建出来
<body> <div id="dynamicGrid" /> </body>
function Grid(config){
var dataModel = config.dataModel;
var dataStore = config.dataStore;
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var thead = document.createElement("thead");
table.appendChild(thead);
var tr = document.createElement("tr");
// create title
for(var i=0; i<dataModel.length; i++) {
var model = dataModel[i];
var title = model.title;
var td = document.createElement("td");
td.innerHTML = title;
tr.appendChild(td);
}
thead.appendChild(tr);
// create data list
for(var i=0; i<dataStore.length; i++) {
var data = dataStore[i];
// one record
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var j=0; j<dataModel.length; j++) {
var model = dataModel[j];
var field = model.field;
var td = document.createElement("td");
td.innerHTML = data[field];
tr.appendChild(td);
}
}
document.getElementById(config.renderTo).appendChild(table);
}
//var grid = document.getElementById("dynamicGrid");
var aGrid = new Grid({
dataModel: [
{title:"the name", field:"name"},
{title:"the organization", field:"organization"},
{title:"the email", field:"email"}
],
dataStore: json.persons,
renderTo: "dynamicGrid"
});
XGrid V0.3:添加分页功能
1、添加分页按钮
<table> <tr> <td><input type="button" value="Before" onclick="aGrid.goBefore()"/></td> <td> Current Page: <label id="lblCurrentPage" value="1"/> Total Page: <label id="lblTotalPage"/> </td> <td><input type="button" value="Next" onclick="aGrid.goNext()"/></td> </tr> </table> <div id="dynamicGrid" />
2、准备测试数据
var json = { persons: [] }; for(var i=0; i<119; i++) { json.persons.push({ no: (i+1), name: "darkness"+(i+1), password: "password"+(i+1), organization: "organization"+(i+1), email: "darkness@conch.com" }); }
3、新的类设计方式
function Grid(config){ this.perPageSize = config.perPageSize || 20; this.start = 0; this.dataModel = config.dataModel; this.dataStore = config.dataStore; var table = document.createElement("table"); this.listContainer = document.createElement("tbody"); table.appendChild(this.listContainer); var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); // create title for(var i=0; i<this.dataModel.length; i++) { var model = this.dataModel[i]; var title = model.title; var td = document.createElement("td"); td.innerHTML = title; tr.appendChild(td); } thead.appendChild(tr); // create data list this.refresh(); document.getElementById(config.renderTo).appendChild(table); } Grid.prototype = { refresh: function() { while(this.listContainer.hasChildNodes()) { this.listContainer.removeChild(this.listContainer.firstChild); } for(var i=this.start; i<this.perPageSize*this.getCurrentPage() && i<this.dataStore.length; i++) { var data = this.dataStore[i]; // one record var tr = document.createElement("tr"); this.listContainer.appendChild(tr); for(var j=0; j<this.dataModel.length; j++) { var model = this.dataModel[j]; var field = model.field; var td = document.createElement("td"); td.innerHTML = data[field]; tr.appendChild(td); } } }, getTotalPage: function() { var size = (this.dataStore.length + this.perPageSize-1)/this.perPageSize; return Math.floor(size); }, getCurrentPage: function() { return this.start/this.perPageSize + 1; }, goNext: function() { this.start = this.start + this.perPageSize; this.refresh(); }, goBefore: function() { this.start = this.start - this.perPageSize; this.refresh(); } }; //var grid = document.getElementById("dynamicGrid"); var aGrid = new Grid({ dataModel: [ {title:"the name", field:"name"}, {title:"the organization", field:"organization"}, {title:"the email", field:"email"} ], dataStore: json.persons, perPageSize: 10, renderTo: "dynamicGrid" }); document.getElementById("lblTotalPage").innerHTML = aGrid.getTotalPage();
XGrid V0.4 完善分页
<html> <head> <style> /*表格 */ table { border-collapse: collapse; } table.cellspacing { border-collapse: separate; } table.dataTable { border: 1px solid #C6C6C6; border-collapse: collapse; background: url(./Images/thbg.gif) #FFFFFF repeat-x left top; table-layout: fixed; } table.dataTable td, table.dataTable th { color: #555555; border-bottom: 1px solid #DDDDDD; border-right: none 0; line-height:16px; +line-height:18px; padding: 3px 7px 3px 6px; +padding: 2px 7px 2px 6px; white-space: nowrap; } table.dataTable td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } table.dataTable .wrap { white-space:normal; } table.dataTable tr.dataTableHead td, table.dataTable tr.dataTableHead td span { color: #445055; font-weight: bold; } table.dataTable tr.dataTableHead td { height: 27px; line-height:27px; padding: 0 7px 0 6px; border-left: #D6D6D6 0px solid; border-bottom: #C6C6C6 0px solid; background: url(./Images/th.gif) no-repeat left top; } table.dataTable tr.dataTableHead td.thOver { background: url(./Images/thbg_over.gif) no-repeat left top; } table.dataTable tr.dataTableHead:first-child { background-image: none; } </style> <body> <h3>XGrid 版本日志</h3> <h4> @version 0.5 美化界面、提供列选择功能、完善分页显示/跳转功能 </h4> <div id="dynamicGrid" /> <table> <tr> <td> <input type="button" value="显示勾选条" onclick="aGrid.showPk()"> </td> </tr> </table> </body> <script> var json = { persons: [] }; for(var i=0; i<119; i++) { json.persons.push({ no: (i+1), name: "darkness"+(i+1), password: "password"+(i+1), organization: "organization"+(i+1), email: "darkness@conch.com" }); } Function.prototype.bind = function() { var __method = this; var args = Array.prototype.slice.call(arguments); var object=args.shift(); return function() { return __method.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } function Grid(config){ this.perPageSize = config.perPageSize || 20; this.start = 0; this.dataModel = config.dataModel; this.dataStore = config.dataStore; var table = document.createElement("table"); table.className = "dataTable"; this.listContainer = document.createElement("tbody"); table.appendChild(this.listContainer); var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); tr.className = "dataTableHead"; // create title var tdNo = document.createElement("td"); var no = "No." tdNo.innerHTML = no; tr.appendChild(tdNo); var tdPk = document.createElement("td"); var ckAll = document.createElement("input"); ckAll.type = "checkbox"; ckAll.id = "ckAll"; ckAll.onclick = function(){ var check = document.getElementsByName("id"); for(i=0; i<check.length; i++) { check[i].checked = ckAll.checked; } }; tdPk.appendChild(ckAll); tr.appendChild(tdPk); for(var i = 0; i < this.dataModel.length; i++) { var model = this.dataModel[i]; var title = model.title; var td = document.createElement("td"); td.innerHTML = title; tr.appendChild(td); } thead.appendChild(tr); this.createPagebar(); document.getElementById(config.renderTo).appendChild(table); // create data list this.refresh(); } Grid.prototype = { createPagebar: function() { this.pagebarContainer = document.createElement("tr"); this.pagebarContainer.xtype = "pagebar"; this.listContainer.appendChild(this.pagebarContainer); var td = document.createElement("td"); td.colSpan = this.dataModel.length + 2; td.align = "left"; this.pagebarContainer.appendChild(td); var divLeft = document.createElement("div"); divLeft.style.float="left"; divLeft.style.fontFamily="Tahoma"; divLeft.innerHTML = '共 <span id="lblTotalSize"></span> 条记录,每页 <span id="lblperPageSize"></span> 条,当前第 <span id="lblCurrentPage">1</span> / <span id="lblTotalPage"></span> 页'; td.appendChild(divLeft); var divRight = document.createElement("div"); divRight.style.float="right"; divRight.style.fontFamily="Tahoma"; var aFirstPage = document.createElement("a"); divRight.appendChild(aFirstPage); aFirstPage.href = "javascript:void(0);"; aFirstPage.onclick = this.goBeginning.bind(this); aFirstPage.innerText = "第一页"; var aBeforePage = document.createElement("a"); divRight.appendChild(aBeforePage); aBeforePage.href = "javascript:void(0);"; aBeforePage.onclick = this.goBefore.bind(this); aBeforePage.innerText = "上一页"; var aNextPage = document.createElement("a"); divRight.appendChild(aNextPage); aNextPage.href = "javascript:void(0);"; aNextPage.onclick = this.goNext.bind(this); aNextPage.innerText = "下一页"; var aLastPage = document.createElement("a"); divRight.appendChild(aLastPage); aLastPage.href = "javascript:void(0);"; aLastPage.onclick = this.goEnd.bind(this); aLastPage.innerText = "最末页"; var span = document.createElement("span"); span.innerText = "转到第"; divRight.appendChild(span); var input = document.createElement("input"); input.id = "pageNum"; input.type = "text"; input.style.width = "40"; input.onkeyup = function(){ input.value=input.value.replace(/\D/g,''); }; divRight.appendChild(input); var span = document.createElement("span"); span.innerText = "页"; divRight.appendChild(span); var btnGoToPage = document.createElement("input"); btnGoToPage.type = "button"; btnGoToPage.value = "跳转"; btnGoToPage.onclick = this.goPageTo.bind(this); divRight.appendChild(btnGoToPage); td.appendChild(divRight); }, refresh: function() { while(this.listContainer.hasChildNodes() && this.listContainer.firstChild.xtype != "pagebar") { this.listContainer.removeChild(this.listContainer.firstChild); } for(var i=this.start; i<this.perPageSize*this.getCurrentPage() && i<this.dataStore.length; i++) { var data = this.dataStore[i]; // one record var tr = document.createElement("tr"); this.listContainer.insertBefore(tr, this.pagebarContainer); var tdNum = document.createElement("td"); var n = i + 1 - this.start; n += " "; tdNum.innerHTML = n; tr.appendChild(tdNum); var tdSelec = document.createElement("td"); var pkField = ""; for (var j=0; j<this.dataModel.length; j++) { var model = this.dataModel[j]; if (model.isPk == true) { pkField = model.field }; } tdSelec.innerHTML = "<input type='checkbox' name ='id' value=" + this.dataStore[i][pkField] + " />"; tr.appendChild(tdSelec); for (var j=0; j<this.dataModel.length; j++) { var model = this.dataModel[j]; var field = model.field; var td = document.createElement("td"); td.innerHTML = data[field]; tr.appendChild(td); } } document.getElementById("lblTotalPage").innerHTML = this.getTotalPage(); document.getElementById("lblperPageSize").innerHTML = this.perPageSize; }, getTotalPage: function() { var size = (this.dataStore.length + this.perPageSize - 1) / this.perPageSize; return Math.floor(size); }, getCurrentPage: function() { return this.start / this.perPageSize + 1; }, promptCurrentPage: function() { document.getElementById("lblCurrentPage").innerHTML = aGrid.getCurrentPage(); }, goNext: function() { if (!(this.start == (this.getTotalPage() - 1) * this.perPageSize)) { this.start = this.start + this.perPageSize; this.promptCurrentPage(); this.refresh(); } }, goBefore: function() { if (!(this.start == 0)) { this.start = this.start - this.perPageSize; this.promptCurrentPage(); this.refresh(); } }, goBeginning: function() { this.start = 0; this.promptCurrentPage(); this.refresh(); }, goEnd: function() { this.start = (this.getTotalPage() - 1) * this.perPageSize; this.promptCurrentPage(); this.refresh(); }, goPageTo: function() { var num = document.getElementById("pageNum").value; if (!(num < 0 || num > this.getTotalPage())) { this.start = (num-1) * this.perPageSize; this.promptCurrentPage(); this.refresh(); } else { this.goEnd(); } }, // show picked values showPk: function() { var inputElements = document.getElementsByName("id"); var l = inputElements.length; var checkedValues = new Array(); for (var i = 0; i < l; i++) { if (inputElements[i].checked) { checkedValues.push(inputElements[i].value); } } var show = checkedValues.join(); alert(show); } }; //var grid = document.getElementById("dynamicGrid"); var aGrid = new Grid({ dataModel: [ {title:"NAME", field:"name", isPk: true}, {title:"ORGANIZATION", field:"organization"}, {title:"EMAIL", field:"email"} ], dataStore: json.persons, perPageSize: 10, renderTo: "dynamicGrid" }); </script> </html>
发表评论
-
SwingC API 演示DEMO,不断更新
2011-11-10 11:30 2303原文 本帖不再更新,以后发布在这儿 1、运行一个带换肤 ... -
发布swf更新版本时客户端Flash缓存问题
2011-09-26 17:18 1521本文转载自 http://uh.9ria.com/spac ... -
WebOS试探+WebIM简单演示
2011-08-19 17:06 2793原文:http://www.abigdreamer.com ... -
Swing打成jar包后,双击运行没反应,怎么查看出错信息
2010-12-01 22:04 1825打cmd 进dos环境, 进入你的jar所在目录 java - ... -
JAVA实现类泡泡屏保效果
2010-11-29 20:29 2451效果如图: ========================= ... -
java实现靠边隐藏窗口
2010-11-26 21:43 3136说明: 由于个人精力有限,现将部分研究的代码开源出来, 代码 ... -
高仿真QQ界面
2010-09-01 12:12 1959效果图: -
flash关注
2010-02-22 17:29 1047http://download.csdn.net/source ...
相关推荐
根据提供的文件信息,可以看出这份资料主要...综上所述,通过系统地学习Coco2d-js视频教程,不仅能够掌握游戏开发的基本技能,还能深入了解Coco2d-js框架的内部机制,为今后在游戏开发领域的深入探索打下坚实的基础。
CAI,全称为Computer-Assisted Instruction,即计算机辅助教学,是一种利用计算机技术进行教育和培训的...在“CAI课件制作基础教程(电子教案)”中,你将找到丰富的实例和实践指导,帮助你轻松入门并精通CAI课件的制作。
本压缩包中的"JavaScript 学习和教学课件"为第七版基础教程,是专为想要掌握JavaScript的朋友们精心准备的资源。 在Web开发领域,JavaScript主要负责客户端的交互性,它能够动态更新网页内容,实现用户与页面的实时...
《HTML5+CSS3 网站设计基础教程》是一门专为计算机相关专业学生开设的专业基础课程,旨在让...通过这门课程的学习,学生将具备制作现代、交互性强的网页的能力,为未来从事UI设计、JavaScript网页特效等工作做好准备。
### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...
标题 "学生做的网页" 暗示这是一个由学生创建的网页项目,可能包含了基础的HTML、CSS和JavaScript技术。这个项目对于那些想要学习网页开发的初学者来说,是一个很好的起点,因为它提供了实际的代码示例和布局设计。...
《Web前端开发项目教程(HTML5 CSS3 JavaScript)》是一门专为计算机科学(CS)领域的学生设计的专业基础课程,旨在培养具备Web前端开发技能的专业人才。课程通过理论与实践相结合的方式,帮助学生掌握网站开发、维护...
《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一门针对计算机相关专业学生开设的专业基础课程,旨在让学生掌握网页设计与制作的核心技术。课程包括HTML标记、CSS样式、JavaScript编程基础等内容,通过实际项目...
JavaScript前端开发程序设计教程是学习Web开发不可或缺的一部分,它涵盖了从基础语法到高级特性的全面内容。本套教程包括了习题、课件、代码和答案,为学习者提供了丰富的学习资源,帮助深入理解和掌握JavaScript在...
《HTML CSS JavaScript 学习Demo集合》简介《HTmL CSS JavaScript 学习Demo集合》是一份专门为零基础学习者准备的综合性资源包。通过这份资源,用户将踏上一段从零开始的Web前端学习之旅。它包含了大量实用的示例和...
《HTML5+CSS3 网站设计基础教程》是一门专为计算机相关专业学生设计的专业基础课程,旨在让学生掌握网页设计的基本技能和概念。课程涵盖了HTML5的起源、发展和浏览器兼容性,以及HTML5的新特性,如新标记、属性和...
《HTML5+CSS3 网站设计基础教程》是一门专为计算机相关专业学生设计的专业基础课程,旨在培养学生在网页设计方面的技能和理解。课程覆盖了从网页基础到高级特性的广泛内容,包括HTML5的新特性、CSS3的选择器和样式...
本教程是专为广大学生,特别是那些正在准备毕业设计的初学者设计的,旨在提供全面且易懂的JavaServer Pages(JSP)知识。JSP是一种动态网页技术,它允许开发者在HTML或XML文档中嵌入Java代码,从而实现服务器端的...
- **录入学生基本信息**:系统需要具备录入学生基础信息的能力,包括学号、姓名、年龄、出生地、专业和班级总学分。为了确保数据的唯一性,系统需检查学号的唯一性,防止重复录入。 - **修改学生基本信息**:在...
《24848+网络应用程序设计教程教辅》是一份专为计算机网络学习者准备的详尽资源,旨在帮助用户深入理解网络应用程序的设计与开发。这份教程教辅结合了理论与实践,全面覆盖了网络应用程序设计的基础知识、核心技术...
"前端学生作业毕设实训素材-新增三个首页模版.rar" 是一个专门为这类需求准备的资源包,包含了丰富的实践素材,可以帮助学生提升前端开发技能,理解实际项目中的工作流程。这个压缩包主要包含以下三个方面的知识点:...
6. **参考文献**:学生在研究过程中将参考多本专业书籍,如UML面向对象建模方法、SQL Server教程、Eclipse编程技术、Java编程、JSP基础与应用、JavaScript开发指南以及Java设计模式等,这些书籍提供了丰富的理论基础...
**PHP简明教程** ...本教程旨在为初学者提供一个简洁、清晰的PHP学习路径,适应于40课时左右的PHP选修课程。由于PHP语言的开源性质...通过本教程的学习,初学者将能够快速掌握PHP编程基础,为今后的Web开发打下坚实基础。
根据提供的文件信息,这里主要涉及的是一个名为“ext中文教程”的资源分享,它包含了教程与示例,并且被描述为“经典”的学习资料。虽然实际内容部分无法直接解析出具体的信息,但从标题、描述和标签中可以推断出这...