`

jquery学习心得(二):一个很好的css和js函数调用的例子

 
阅读更多

统一目录下的资源结构图:

 

 

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代码中函数功能独立而小巧,其中的传参方式和 函数的作用域定义的方式也很到位,值得学习和细细品味。

执行效果(由于浏览器插件的问题,如片没有显示出来):

 

  • 大小: 5.1 KB
  • 大小: 5.9 KB
分享到:
评论

相关推荐

    jquery插件使用方法大全

    我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。 写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。 暂时告一段落吧。待有新的发现再来分享。 加一些...

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    精通JavaScript+jQuery Part1

     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基础  ...

    jquery-1.1.3 效率提高800%

    有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...

    《精通Javascript+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基础  ...

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    [removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...

    jquery电子文档chm

    如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 dataType (String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息...

    红色多级下拉菜单Div CSS jquery菜单实例.rar

    是学习Div CSS jquery制作菜单的一个好实例,可以显示5级子菜单,关于本菜单中的JS封装,作者其实是想利用一些私有方法和变量,但是这么包装,感觉有些不伦不类,既然还是要搞了半天,还是返回的一个构造函数,还...

    jquery.nicescroll-master

    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-source-code:jquery原始码学习-jquery source code

    #jquery原始码学习笔记##整体架构 jQuery框架的核心就是从HTML文档中匹配元素并执行执行操作$('。someelement')。css() $('。someelement')。find()...等 jQuery有两大特点 jquery对象的建构方式 jquery方法...

    legit.js:一个用于修改 DOM CSS 的轻量级 JavaScript 框架

    Legit.js 旨在成为一个极其轻量级的库,用于操作 DOM、处理事件和其他一些常用的杂项功能。 合法的一点是保持在 5K 以下,这是一个很难保持的目标。 只处理你总是需要的东西 轻松扩展 点击事件 所有本机点击事件...

    JavaScript权威指南(第6版)

    本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...

    JavaScript权威指南(第6版)(中文版)

    本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    JavaScript权威指南(第六版) 清晰-完整

    8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性、方法和构造函数 8.8 函数式编程 第9章 类和模块 9.1 类和原型 9.2 类和构造函数 9.3 JavaScript中Java式的类...

    JavaScript权威指南(第6版)(附源码)

    本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习,也适合...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...

    JavaScript权威指南(第6版)中文文字版

    《JavaScript权威指南(第6版)》是程序员学习核心JavaScript语言和由WEB浏览器定义的JavaScript API的指南和综合参考手册。 《JavaScript权威指南(第6版)》涵盖html5和ecmascript 5。很多章节完全重写,以便与时俱进...

    interlinear:使用JS和CSS进行线性涂漆

    在JavaScript和CSS的帮助下,字对齐的网络线性光泽度。 如何使用 在标题中添加&lt;link rel="stylesheet" type="text/css" href="interlinear.css"/&gt;并在页面底部添加[removed][removed] 。 这是为了确保在自动...

Global site tag (gtag.js) - Google Analytics