当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery给div或者p添加href自动加载链接内容插件

发表于: 2013-08-05   作者:bee1314   来源:转载   浏览次数:
摘要: /** * 当class为page的div,p,或者其他的非a标签包含href属性时 * 通过该插件自动的ajax包含的内容 * 当需要改变div的href属性时,需要手动的trigger触发hrefChange自定义事件 * $("#test").attr("href", "bee1314.iteye.com");
/**
 * 当class为page的div,p,或者其他的非a标签包含href属性时
 * 通过该插件自动的ajax包含的内容
 * 当需要改变div的href属性时,需要手动的trigger触发hrefChange自定义事件
 * $("#test").attr("href", "bee1314.iteye.com");
 * $("#test").trigger("hrefChange")
 */
(function($) {
	// load content and you should be care context
	function load(context) {
		var nodeName = context.nodeName;
		var href = $(context).attr("href")
		console.log("nodeName=>" + nodeName + "; href=>" + href);
		if (nodeName != "a" && nodeName != "A" && href != "") {
			$(context).load(href);
		}
	}

	$(".page").each(function() {
		//load content
		load(this);
		//auto reload content when href changed
		var self = this;
		$(self).bind("hrefChange", function() {
			load(self);
		})
	})
})(jQuery);

 或许将href属性改成url属性更好,这样可以避开判断是不是a标签。

 

使用方式:

1. 添加class的属性为page,插件会根据page属性进行过滤查找

<!--该div中就会自动加载href链接的内容,是不是有iframe的赶脚-->

<div id="test" class="page" href="bee1314.iteye.com"> 

 

当需要改变href的链接时候:

$("#test").attr("href", "www.github.com")

$("#test").trigger("hrefChange");  //通过jQuery的自定义事件实现让插件帮助我们重新reload div内容。

jquery给div或者p添加href自动加载链接内容插件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近正在一个学校安全检查项目,在项目中使用了JQUERY,一直以来都在使用JQUERY,但从来 没有想把以
漫画原创Jquery把http地址自动变成可访问的url链接插件功能虽简单,但很实用,尤其是编写编辑器插件
1.1.1 摘要 现在,我们经常使用的微博、微信或其他应用都有异步加载功能,简而言之,就是我们在刷微
1.1.1 摘要 现在,我们经常使用的微博、微信或其他应用都有异步加载功能,简而言之,就是我们在刷微
(1) AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form)。 (2)Facebook like Autocom
autocomplete方法有两个参数,第一个用来填写URL地址或是数据,jQuery Autocomplete插件是支持Ajax
参数: deValue:文本框内默认值 textCls :文本框默认样式名 listCls :邮箱列表样式名 mailArr :
autocomplete方法有两个参数,第一个用来填写URL地址或是数据,jQuery Autocomplete插件是支持Ajax
你是否需要在有限的空间内显示更多的内容,或者你只是想使您的网站的某个部分,更吸引人,jQuery是
转自 给力技术 灵活的jQuery内容滚动插件 - Sly   Sly 是一个可实现内容滚动幻灯片的 jQuery 插件
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号