zepto.js按需加载模板对象

Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。这里要说说它的load方法,原型是:

load(url, function(data, status, xhr){ ... })  ? self

其描述这样说道:

Set the html contents of the current collection
to the result of a GET Ajax call to the given URL. Optionally, a CSS selector can be specified in the URL, like so, to use only the HTML content matching the selector for updating the collection:

$('#some_element').load('/foo.html #bar')

If no CSS selector is given, the complete response text is used instead.

Note that any JavaScript blocks found are only executed in case no selector is given.

下面举个例子看小下效果:

先爆个照:

给左侧的list一个click事件,加载模板到右侧的请求设置中

$(".sideNav a").click(function (event) {
        event.preventDefault();
        $(this).addClass('active').parent().siblings().find('a').removeClass('active');
        $('.jNice fieldset').load('html/' + $(this).attr('href').replace('#', '') + '.html');
    });

我的html文件夹中demo模板如下:

<p><label>请求地址:</label><input type="text" class="text-long"
    value="http://192.168.1.200:5088/yykapp.ashx" style=" width:600px;" id="txturl" /></p>
<p><label>方法类型:</label><input type="text" class="text-medium" id="txttype" /></p>
<p><label>请求参数:</label><textarea rows="1" cols="1" style=" width:600px;" id="txtxml"></textarea></p>
<input type="button" id="btnSend" value="提交请求" />

好的,效果如下:

注意,请求的地址后面可以添加id对象,这个id对象是指,对应的请求url页面的dom对象,比如我要修改下demo的模板内容

下面我们更改下加载对象的代码,在地址后面添加一个id对象:

$('.jNice fieldset').load('html/' + $(this).attr('href').replace('#', '') + '.html #kkk');

注意中间有一个逗号。效果如下:

这个时候加载进来的也是整个的demo页面代码,只不过填充到我们的选择器对象的内容是 url地址后面的标签对象,注意,包括id对象本身:

zepto.js按需加载模板对象

时间: 2024-10-19 00:26:35

zepto.js按需加载模板对象的相关文章

js 按需加载

一.通过点击事件加载代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&quo

按需加载.js .css文件

首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script><link>这两种元算--这句话是说给自己的.可以绑定点击事件,滚轮事件(例如图片的懒加载是动态的.) 使用 require.js (一个按需加载的插件)管理.js按需加载,来自http://www.cnblogs.com/chenxizhang/archive/2013/05/16/308194

学习zepto.js(对象方法)[3]

继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<span id="special"></span>").attr("id");//--> "special" 注意:只能返回对象中第一个节点的属性值 set: 返回值为一个zepto对象 $("<spa

Js外部资源按需加载

内容来源:http://hi.baidu.com/begin/item/df02bd79ca8cc0710d0a078a 按需加载js的研究和实现 加载js的基本原理,就是在DOM里面加载<script>元素,加载这些元素都是异步的过程.所以可以说是无阻塞的加载.但是如果脚本之间存在依赖的话,就会出现不可预知的错误.根据这个,在加载脚本的时候,需要监听"load"事件,对于IE的特殊性,需要监听"readystatechange"事件.基于这些,实现两个

按需加载JS

JavaScript无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大.这时候比较合理的做法就是按需加载.按需加载和按需执行JS比较类似,只不过要执行的JS变成了固定的“实现加载JS”的代码.按需加载实现的思路如下: 对滚动条进行事件绑定,假设绑定的函数为function lazyLoadJS(){}; 在函数lazyLoadJS中,按照下面思路实现:选择一个元素作为参照物,当滚动条即将靠近时该元素位置,开始执

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

不依赖jquery的图片LazyLoad按需加载js-echo.js

echo.min.js源码如下: /*! echo.js v1.7.0 | (c) 2015 @toddmotto | https://github.com/toddmotto/echo */ !function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.e

学习zepto.js(对象方法)[5]

继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. 方法的实现就是循环调用方法对象.然后将所有的dom元素克隆并返回 而且使用的深度克隆,就是说,会将节点下方的子节点统统克隆过来. closest: 方法接收1-2个参数,第一个为selector(选择器),第二个为context(上下文); 方法会从调用节点开始,逐级向上匹配. 如果只传入selector,