- 浏览: 63857 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (46)
- jvm调优相关 (3)
- java编程语言 (6)
- jQuery &css (11)
- hsf ;spring (3)
- Eclipse 相关 (1)
- 缓存 jvm相关 (2)
- 文件处理 (7)
- html post请求乱码问题 (0)
- java 表单字符处理问题 (2)
- ibitas相关 (2)
- TCP/IP相关 (1)
- 网站架构 (1)
- 编码规范和代码重构 (2)
- spring架构&java web框架原理 (2)
- java web日志相关 (1)
- 网络编程 (1)
- 其他收藏 (0)
- iReport;报表 (0)
- 包和类加载冲突 (0)
- 数据库相关 (1)
- 心得;分享;其他 (1)
- web安全相关 (0)
- 线上问题总结和处理 (0)
- mtee (0)
- xu (0)
- 可心一点 (0)
- 爬虫 (0)
最新评论
统一目录下的资源结构图:
index.html:
<html> <head> <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" charset="utf-8"/> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2>Around Town Last Night</h2> <div id="ajaxInProgress"></div> <div id="photos"> <fieldset id="photoDetails"> <legend>Photo Tagging</legend> <form id="details"> <p id="status"></p> <p> <label for="name">Name:</label><br/> <input type="text" class="textField" name="name" id="name" /> </p> <p> <label for="tags">Tags:</label><br/> <input type="text" class="textField" name="tags" id="tags" /> </p> <p> <input type="hidden" name="id" id="id"> <input type="button" value="update" id="update" /> </p> </form> <div id="gallery"></div> </fieldset> </div> </div> </div> </body> </html>
gallery.css:
#gallery { background-color:#94C5EB; border:1px solid #015287; height:103px; width: 325px; overflow: auto; text-align:center; position: relative; margin-bottom: 10px; } #gallery img { width: 97px; height: 97px; float:left; border:1px solid #fff; padding:2px; } h2 { clear: both; } #photoDetails{ border-color: #015287; background-color:#F4F4EE; } #photoDetails legend{ color: #D15600; } #details{ width:250px; float:left; margin-right:15px; } #details .textField{ width: 100%; } #details p{ margin:0; } #ajaxInProgress{ width:610px; height:13px; margin-top:-5px; padding: 2px 0; } #ajaxDetails{ float:right;} #status{ font-weight: bold; } .progress { background: #fff url(progress.gif) no-repeat center right; }
图片资源文件 images.xml:
<?xml version="1.0" encoding="UTF-8"?> <celebs> <celeb id="421"> <name>Johnny Stardust</name> <image>johnny_200.jpg</image> </celeb> <celeb id="422"> <name>Kellie Kelly</name> <image>kellie_200.jpg</image> </celeb> <celeb id="423"> <name>Mo'Fat</name> <image>mofat_200.jpg</image> </celeb> <celeb id="424"> <name>Beau Dandy</name> <image>beau_200.jpg</image> </celeb> <celeb id="425"> <name>Darth Fader</name> <image>fader_200.jpg</image> </celeb> <celeb id="426"> <name>Glendatronix</name> <image>glenda_200.jpg</image> </celeb> </celebs>
json格式的数据资源 celebs.json:
{ "name": "Johnny Stardust", "id": 422, "tags": [ "guitar", "hero", "a-list" ] }
script.js:
var GALLERY = { container: '#gallery', url: 'images.xml', delay: 1000, attempts: 3, running: false, init: function(){ this.container = $(this.container); var _gallery = this; $( this.container ).scroll( function(){ _gallery.checkScroll(); }); this.load(); }, checkScroll: function() { var gallery_div = $(this.container); if(gallery_div[0].scrollHeight - gallery_div.height() - gallery_div.scrollTop() <= 0) { this.load(); } }, reset: function() { this.delay = 1000; this.attempts = 3; }, load: function() { // Don't call if we're already running! if(this.running) { return; } this.running = true; var _gallery = this; $.ajax({ type:"get", dataType: 'xml', url: this.url, success: function(data){ $(data) .find('celebs') .children() .each(function() { var node = $(this); var id = node.attr('id'); var name = node.find('name').text(); var image = node.find('image').text(); _gallery.display({'id': id, 'image': image, 'name': name}); }); }, complete: function() { // reset running variable to false _gallery.running = false; }, error: function(xhr, status) { if(_gallery.attempts-- == 0) { // Sorry. We give up. _gallery.reset(); return; } setTimeout(function() { _gallery.load(); }, _gallery.delay *= 2); } }); }, display: function(dataItem) { $('<img />') .attr({ src: '../../images/' + dataItem.image, alt: dataItem.name }) .hide() .data('id', dataItem.id) .load(function() { $(this).fadeIn(); }) .click(function() { CELEB.load($(this).data('id')); }) .appendTo('#gallery'); } } var CELEB = { url: 'celebs.json', load: function(image_id) { var _celeb = this; $('#details input').attr('disabled', 'disabled'); $.getJSON( this.url, function(data) { $('#details input').removeAttr('disabled'); _celeb.display(data); }); }, display: function(data) { $('#id').val(data.id); $('#name').val(data.name); $('#tags').val(data.tags.join(" ")); } } $(document).ready(function(){ $('#ajaxInProgress') .ajaxStart(function() { $(this).addClass('progress'); }) .ajaxStop( function(){ $(this).removeClass('progress'); }); GALLERY.init(); });
这里的js代码中函数功能独立而小巧,其中的传参方式和 函数的作用域定义的方式也很到位,值得学习和细细品味。
执行效果(由于浏览器插件的问题,如片没有显示出来):
发表评论
-
JSESSION失效问题
2012-11-16 22:17 866问题:在开发环境下的页面进行数据查询时,自动跳到后台权限控制登 ... -
jquery中在一个页面中弹出编辑对话框的实例
2012-10-16 21:05 4595在web开发中,一个页面的某些字段可能需要通过弹出浮出对话框的 ... -
一个常用的页面分页插件实例
2012-10-15 18:24 1194一:(页面分页控件)页面head标签中引进: ... -
ajax请求遇到的一些乱码问题及其解决
2012-10-12 18:12 10401. 在一个系统中的表单数据项很多的编 ... -
值得网站开发人员收藏的 10 个网站
2012-09-27 11:31 0http://www.chinaz.com/free/2010 ... -
12 款简化 CSS3 开发的实用工具
2012-09-27 10:19 0http://www.mangguo.org/10-usefu ... -
网页输入框的提示实现 placeholder
2012-09-21 11:51 0http://blog.csdn.net/trgoofi/ar ... -
50个必备的实用jQuery代码段
2012-09-13 15:00 0http://www.admin10000.com/docum ... -
关于http请求头和响应头的一些疑问
2012-09-12 15:27 01.请求头的值是谁设置上去的?是浏览器自己设置上去的,还是WE ... -
textarea中的输入的规则名称和规则id等生成超链接的js脚本
2012-09-12 11:24 0<script type="text ... -
js 正则表达式用法
2012-09-11 18:24 0正则表达式使用详解 ... -
js中循环获取checkbox值的方式
2012-09-10 15:26 1090在html页面的表单中,有事需要获取checkbox值,由于它 ... -
js中字符串处理的常用方法replaceAll, split , join, indexOf , Array
2012-09-10 15:16 797一:replaceAll的调用方式: 例如1:如想替 ... -
JS跳转页面方式
2012-09-07 20:32 836有的时候在vm页面中,在通过jquery post方式请求完, ... -
jquery的常用api函数总结
2012-07-20 18:00 662.attr( attributeName ): 得到 ... -
jquery/css学习心得三:js的内嵌写法和分开写法
2012-07-20 17:26 3553js可以嵌入写入到html中完成动态功能或者html和js结构 ... -
jquery和css的一些学习心得(一)
2012-07-18 16:02 635最近由于项目开发需要,学习一些jquery的东东,有一些 ...
相关推荐
我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。 写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。 暂时告一段落吧。待有新的发现再来分享。 加一些...
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
2.8.1 定义和调用函数 2.8.2 用arguments对象访问函数的参数 2.8.3 实例:杨辉三角 2.9 其他对象 2.9.1 对象简述 2.9.2 时间日期:Date对象 2.9.3 数学计算:Math对象 2.10 BOM基础 ...
有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...
2.8.1 定义和调用函数 2.8.2 用arguments对象访问函数的参数 2.8.3 实例:杨辉三角 2.9 其他对象 2.9.1 对象简述 2.9.2 时间日期:Date对象 2.9.3 数学计算:Math对象 2.10 BOM基础 ...
[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...
如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 dataType (String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息...
是学习Div CSS jquery制作菜单的一个好实例,可以显示5级子菜单,关于本菜单中的JS封装,作者其实是想利用一些私有方法和变量,但是这么包装,感觉有些不伦不类,既然还是要搞了半天,还是返回的一个构造函数,还...
1. 引用 jquery.js 和 jquery.nicescroll.js 1 2 [removed][removed] [removed][removed] 2. 通过 jquery 获取需要添加滚动条的元素,调用 niceScroll 函数进行配置即可使用该插件,如下 1 2 3 4 5 6 7 8 9 $('#...
#jquery原始码学习笔记##整体架构 jQuery框架的核心就是从HTML文档中匹配元素并执行执行操作$('。someelement')。css() $('。someelement')。find()...等 jQuery有两大特点 jquery对象的建构方式 jquery方法...
Legit.js 旨在成为一个极其轻量级的库,用于操作 DOM、处理事件和其他一些常用的杂项功能。 合法的一点是保持在 5K 以下,这是一个很难保持的目标。 只处理你总是需要的东西 轻松扩展 点击事件 所有本机点击事件...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性、方法和构造函数 8.8 函数式编程 第9章 类和模块 9.1 类和原型 9.2 类和构造函数 9.3 JavaScript中Java式的类...
本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习,也适合...
这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...
《JavaScript权威指南(第6版)》是程序员学习核心JavaScript语言和由WEB浏览器定义的JavaScript API的指南和综合参考手册。 《JavaScript权威指南(第6版)》涵盖html5和ecmascript 5。很多章节完全重写,以便与时俱进...
在JavaScript和CSS的帮助下,字对齐的网络线性光泽度。 如何使用 在标题中添加<link rel="stylesheet" type="text/css" href="interlinear.css"/>并在页面底部添加[removed][removed] 。 这是为了确保在自动...