`

JQuery UI中的Tabs与base元素冲突的BUG

阅读更多
  以前一直使用jquery-ui-1.8,最近打算试一下目前最新的版本1.11。但对于Tabs,页面是乱的,怎么也不正常。折腾了好几个小时,最后发现页面中使用的base元素,对Tabs有破坏性的影响。
  没有想清楚具体的原因,先记下来再说吧。

  到了晚上,又想起这个问题。这个问题实在讨厌,我的系统中所有页面中都使用了base元素,不解决这个冲突实在是不爽。经过几个小时的跟踪调试,终于发现的问题所在:
  新版本的jquery UI中,Tabs的代码存在一处错误,注意代码片断的第22行。
	_isLocal: (function() {
		var rhash = /#.*$/;

		return function( anchor ) {
			var anchorUrl, locationUrl;

			// support: IE7
			// IE7 doesn't normalize the href property when set via script (#9317)
			anchor = anchor.cloneNode( false );

			anchorUrl = anchor.href.replace( rhash, "" );
			locationUrl = location.href.replace( rhash, "" );

			// decoding may throw an error if the URL isn't UTF-8 (#9518)
			try {
				anchorUrl = decodeURIComponent( anchorUrl );
			} catch ( error ) {}
			try {
				locationUrl = decodeURIComponent( locationUrl );
			} catch ( error ) {}
			
			return anchor.hash.length > 1 || anchorUrl === locationUrl;//原来为&&
		};


  发现这个BUG很兴奋,专门注册了个账号,去jquery UI的论坛上发了个BUG报告帖子。


  • 大小: 78.2 KB
分享到:
评论
1 楼 Franciswmf 2015-01-28  

相关推荐

    jqueryui tabs

    使用特定的类名(如 `.ui-tabs`、`.ui-tabs-nav` 和 `.ui-tabs-panel`)来标记元素,以供 jQuery UI 使用。例如: ```html <div id="tabs"> <ul class="ui-tabs-nav"> <li><a href="#tab1">Tab 1</a></li> ...

    JQuery UI 中文帮助文档

    3. **调用方法**:对选中的元素调用jQuery UI提供的方法,如`$(selector).tabs()`来创建选项卡。 4. **配置选项**:可以通过参数设置组件的具体行为和外观,如`$(selector).dialog({width: 500, modal: true})`创建...

    jquery ui tabs paging 扩展

    使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。

    jquery ui tabs paging 不换行

    jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...

    jQuery-ui-tabs 分页相关

    每个标签页都应包含在一个 `<div>` 元素中,用 `class="ui-tabs"` 标记,而每个具体的标签页内容则放在 `<div>` 元素的子级,用 `class="ui-tabs-panel"` 标记。 - **JavaScript 初始化**:然后,使用 `$(function...

    jQueryui_tabs_impor.rar

    《jQuery UI中的Tabs组件详解及应用》 在Web开发领域,jQuery UI库是jQuery框架的一个重要扩展,提供了丰富的用户界面组件,其中的Tabs组件尤其受到开发者们的青睐。本篇文章将详细解析jQuery UI中的Tabs组件,包括...

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    jquery ui tabs_jqgrid demo

    从给定的文件信息来看,这是一段网页代码示例,主要展示了如何在网页中集成jQuery UI Tabs和jqGrid插件。以下是对标题、描述、标签以及部分内容中涉及的关键知识点的详细解读: ### 关键知识点:jQuery UI Tabs **...

    Jquery UI Tabs插件扩展

    在jQuery UI中,可以使用`$("#tabs").tabs("add", url, title)`方法,其中`url`是新标签页的内容源,`title`是显示在标签上的文字。扩展后的版本会检查是否已经存在同名的标签,如果存在则不会重复添加,而是直接...

    jquery.ui.tabs.js

    jquery的UI的选项卡tabs插件jquery.ui.tabs.js

    jQuery UI组件 jQuery UI

    1. **Tabs(选项卡)**:jQuery UI 提供了方便的选项卡组件,可以将内容分隔成多个部分,通过选项卡切换显示,提高网页的组织性和用户体验。 2. **Accordion(手风琴)**:手风琴组件允许内容以折叠/展开的方式呈现...

    jquery ui & themes

    《jQuery UI与主题设计详解》 在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制...

    jquery-ui.css、jquery-ui.js下载

    《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...

    jquery ui tabs

    接着,可以从官方网站(https://jqueryui.com)下载jQuery UI的压缩包,其中包括CSS样式文件和JavaScript脚本。在项目中,通常需要引入以下两个文件: 1. `css/jquery-ui.min.css`:这是jQuery UI的基础样式文件,...

    JQuery UI 中文帮助文档.rar

    - **主题系统**:通过Themeroller工具,用户可以自定义UI元素的外观,创造出与网站风格一致的界面。 - **交互性**:jQuery UI 提供了许多增强用户体验的交互效果,如淡入淡出、滑动、切换等,使网页更具动态感。 -...

    JQuery UI1.7中文文档

    **jQuery UI 1.7中文文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了一套完整的组件,包括交互、特效、小部件和主题,用于构建富有吸引力且易于使用的Web应用程序。jQuery UI ...

    很强大的jQuery UI

    5. **拖放功能**:jQuery UI 提供了拖放API,使得元素可以在页面上自由移动,与其他元素进行交互,实现动态布局。 6. **动画效果**:jQuery UI 包含一套丰富的动画效果,如淡入淡出、滑动等,可以轻松添加到任何...

    jQuery UI以及jQuery easy-ui技术手册

    - **API文档**:`jQuery_jQueryUI.chm`文件是jQuery UI的API参考,详尽地列出了每个组件的方法、属性和事件,是开发过程中不可或缺的参考资料。 **jQuery Easy-UI技术手册** jQuery Easy-UI 是基于jQuery和jQuery ...

Global site tag (gtag.js) - Google Analytics