`

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

阅读更多
/**
 * 当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 PopupDiv 弹出层插件 v1.0

    2. 将JQuery PopupDiv 插件的JavaScript文件(例如:jquery.popupdiv.js)和CSS文件(例如:jquery.popupdiv.css)添加到项目中。 3. 在HTML文件中引入这些资源,并确保jQuery库在插件之前加载。 ```html ...

    Jquery Sortable实现div拖动排序效果

    在网页开发中,jQuery Sortable 是一个非常实用的插件,它允许用户通过拖放操作对HTML元素(如div)进行排序。这个功能对于构建交互性强、用户体验良好的列表或网格布局至关重要。本篇文章将深入探讨如何使用 jQuery...

    jquery 图片延迟加载插件制作tab选项卡图片异步加载

    本教程将深入讲解如何使用jQuery创建一个图片延迟加载插件,特别是针对tab选项卡中的图片进行异步加载。 首先,我们需要理解为什么要进行图片延迟加载。当用户打开一个页面时,如果页面中包含大量图片,这些图片会...

    手机页面内容逐渐加载jquery.mobile插件

    在移动互联网领域,优化用户体验是至关重要的,而“手机页面内容逐渐加载jquery.mobile插件”正是为此目的设计的。这个插件充分利用了jQuery Mobile的功能,实现了网页内容的渐进式加载,即用户在滚动页面时,内容会...

    jQuery横向和纵向内容滚动插件Sly

    **jQuery横向和纵向内容滚动插件Sly** 在网页设计中,内容滚动是一种常见的交互方式,它可以提升用户体验,尤其在处理大量信息时。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现各种滚动效果。其中,...

    JQuery实现的传统页面DIV排序删除

    **jQuery 实现的传统页面DIV排序删除** 在网页开发中,我们常常需要实现用户交互功能,如元素的拖拽排序...以上内容就是关于 `jQuery` 在 `ThinkPHP` 框架中实现页面 `DIV` 排序和删除的核心知识,希望对你有所帮助。

    秋天 jQuery tabs 插件.rar

    秋天 jQuery tabs 插件是一个基于流行的JavaScript库jQuery开发的组件,用于实现网页中的标签页功能。这个插件允许用户在不同的内容区域之间轻松切换,提高了网页的交互性和用户体验。下面将详细介绍该插件的使用、...

    jQuery Tabs插件 (选项卡插件)

    3. **动态加载内容**:当选项卡内的内容体积较大时,插件支持动态加载,只在切换到相应选项卡时才加载其内容,提高页面加载速度。 4. **交互效果**:jQuery Tabs可以实现平滑的过渡动画,如淡入淡出、滑动等,提升...

    jquery动态添加tab内嵌ifream插件

    本篇文章将详细讲解如何利用jQuery实现动态添加Tab并内嵌iFrame插件,以及相关的核心知识点。 首先,我们需要理解Tab组件的基本原理。Tab组件通常用于在有限的空间内展示多个独立但相关的页面内容。用户可以通过...

    jquery 星级评分插件

    在HTML结构中,你需要为想要添加星级评分的元素添加一个ID,然后在文档加载完成后调用jQuery的`$.fn.raty`方法来初始化插件。例如: ```html &lt;div id="star-rating"&gt;&lt;/div&gt; ``` ```javascript $(document).ready...

    jquery 浮动层插件

    **jQuery浮动层插件详解** 在网页开发中,浮动层(通常称为弹窗或对话框)是一种常见的交互设计元素,用于展示重要的信息、提示、表单或者任何需要用户注意的内容。jQuery作为一款广泛使用的JavaScript库,提供了...

    jquery轮播图插件

    jQuery轮播图插件是一种广泛应用于网页设计中的动态展示图像或内容的工具,它通过JavaScript库jQuery实现,为网站添加了交互性和视觉吸引力。在网页设计中,轮播图能够有效地展示多张图片或信息,通常以幻灯片的形式...

    jQuery加载动画插件shCircleLoader.zip

    jQuery加载动画插件shCircleLoader是一款用于网页中的加载等待效果工具,它提供了丰富的样式和功能,使得在网页内容加载期间可以展示美观且吸引用户的动画效果。这个插件包含九种不同的加载动画样式,可以根据项目...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    JQuery倒计时插件

    **jQuery倒计时插件详解** 在Web开发中,倒计时功能经常被用于各种应用场景,比如活动开始前的预告、考试倒计时、产品上市时间提示等。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现...

    jquery loading遮罩层插件

    "busy-load"就是这样一个专门用于jQuery的加载遮罩层插件,它能够帮助开发者轻松地在页面上创建自定义的加载指示器。 **jQuery库的使用** jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画设计...

    jquery filterizr图片列表筛选插件附教程链接

    通过使用这个插件,开发者可以为网站添加交互性,使用户能够轻松地根据类别、属性或其他条件筛选展示的内容。以下是对Filterizr的基本介绍、功能特性以及如何使用它的详细说明。 ### 1. Filterizr基本概念 ...

    jQuery图像展示插件Strip

    如果还没有,可以从jQuery官方网站下载或者通过CDN链接引入。接着,将Strip插件的CSS和JS文件引入到你的HTML文档中。 2. **HTML结构**:在HTML中创建一个用于展示图片的容器,通常使用`&lt;div&gt;`元素,并为其添加特定...

    jquery页面跳转loading加载

    在实际开发中,开发者可能会利用现有的jQuery插件,如jQuery BlockUI,来快速实现页面加载的loading效果,或者自定义JavaScript和CSS代码以满足特定的需求。 总的来说,"jquery页面跳转loading加载"是一个关于提升...

    使用jQuery插件FancyBox轻松实现弹窗视频

    jQuery插件FancyBox就是这样一款强大的工具,它能够帮助开发者轻松地创建出美观且功能丰富的弹窗效果,包括视频展示。本文将详细介绍如何使用FancyBox实现弹窗视频的功能。 首先,我们需要了解jQuery和FancyBox的...

Global site tag (gtag.js) - Google Analytics