首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端开发者都应知道的 jQuery 小技巧

回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...预加载图片 如果你的页面使用了大量不能初始可见的图片(例如绑定在 hover 上),预加载它们是十分有用的: $.preloadImages = function () { for...Hover 上的 Class 切换 如果用户的鼠标悬停在页面上某个可点击元素,你想要改变这个元素的视觉表现。...$('input[type="submit"]').prop('disabled', false); 停止链接加载 有时你不想链接跳转到某个页面或重加载页面,而希望可以做一些其他事情...但如果想让该元素第一次点击显现,第二次点击消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle

2.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

2:实现的方法二: (a):导入jquery.easyui.min.js和jquery.min.js这两个文件,以及theme这个文件; (b):创建一个html页面,源码如下所示: 1 <!...三:分类空间允许用户使用多面板,但在同一间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。...用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的。 1 <!...web页面触发 46 $(document).ready(function(){ 47 //$('selector').plugin('method', parameter...六:该分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以分页控件上添加自定义按钮,以增强其功能。 1 <!

4.2K100

python测试开发django-188.Bootstrap折叠(Collapse)插件

前言 折叠(Collapse)插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能,那么您需要引用 collapse.js, bootstrap已经包含了这个插件。...该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开,请添加附加类in。 <!...折叠元素实际显示之前(即在事件发生之前)返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。...折叠元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.collapse Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。...事件类型 描述 show.bs.collapse show调用实例方法立即触发此事件。 shown.bs.collapse 当折叠元素对用户可见触发此事件(将等待 CSS 转换完成)。

2.9K50

day49_BOS项目_01

-- 需要进行权限控制的页面访问,使用默认的类和默认的方法,默认的类和默认的方法可以不用写,这里写出来为了强调 -->         <action name="page_*_*" class="com.opensymphony.xwork2...<em>在</em>jsp<em>页面</em>中引入<em>jQuery</em> EasyUI相关的资源文件 示例代码如下:     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath...3.2、<em>accordion</em> <em>折叠</em>面板 详解如下:     通过 $.fn.<em>accordion</em>.defaults 重写<em>默认</em>的 defaults。     ...<em>折叠</em>面板(<em>accordion</em>)允许您提供多个面板(panel),同时显示一个或多个面板(panel)。     每个面板(panel)都有展开和<em>折叠</em>的内建支持。...点击面板(panel)头部可展开或<em>折叠</em>面板(panel)主体。     面板(panel)内容可通过 ajax 指定 'href' 属性来<em>加载</em>。用户可定义被选中的面板(panel)。

1K20

最新jquery+easyui_api培训文档

for jQuery Accordion is a part of easyui framework for jQuery....1.2 参数 1.2.1 容器参数 参数名称 参数类型 描述 默认值 width 数字 可折叠标签的宽度。 auto height 数字 可折叠标签的高度。...true 1.2.2 面板参数 可折叠标签面板继承自面板(panel),许多属性定义标签里,下面的属性就是如此: 参数名称 参数类型 描述 默认值 selected 布尔 设置可折叠标签中默认展开的标签页...输入框组件后显示的标签 Of  {pages} displayMsg 字符串 显示一个页面的信息。...href 字符串 一个远程的URL加载数据,然后显示面板中 null loadingMessage 字符串 当加载远程数据面板中显示的信息 Loading… 10.3 事件 名字 参数 描述

3.2K40

jQuery基础(五)一Ajax应用与常用插件-imooc

3-1 拖曳插件——draggable  3-2 放置插件——droppable  3-3 拖曳排序插件——sortable  3-4 面板折叠插件——accordion  3-5 选项卡插件——tabs...]) 参数url为加载服务器地址,可选项data参数为请求发送的数据,callback参数为数据请求成功后,执行的回调函数 例如,点击“加载”按钮,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示...为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get 例如,点击页面中的“加载”按钮,调用ajax()方法向服务器请求加载一个txt文件,当请求成功时调用..., 例如,页面中,通过加载sortable插件将元素中的各个表项实现拖曳排序的功能,如下图所示: 浏览器中显示的效果: 3-4面板折叠插件——accordion 面板折叠插件可以实现页面中指定区域类似...“手风琴”的折叠效果,即点击标题展开内容,再点另一标题,关闭已展开的内容,调用格式如下: $(selector).accordion({options}); 其中,参数selector为整个面板元素

16.5K20

AJAX控件UpdatePanel使用详解

但是一个时间内,它只能限制你的页面用户只能展开其中的一个部分, 每一个 Accordion 控件包括若干个 AccordionPane 控件,AccordionPane 控件可以象 Panel 控件一样...Accordion 控件具有保持其选中状态的功能,当页面发生提交的过程后,Accordion 保留其提交前选中的页面。...开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。...开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。...开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。

79150

Jump Start Bootstrap 第4章

要通过JQuery触发下拉插件,你需要使用方法dropdown(); $().dropdown('toggle'); 页面加载后,我们可以使用这个方法把下拉插件的从关闭状态切换到开启状态。...你可以看到,我调用了.myDropdownHandle之后,使用了dropdown()方法。下拉插件的默认状态是关闭的;然而你刷新页面后它将切换状态并使菜单可见。...我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发的状态。 <!...它还应该有一个自定义属性data-ride,它告诉Bootstrap页面加载就可以启动滑动效果。如果没有这个属性,您第一次手动操作之前,幻灯片将不会自动更改。...Bootstrap模式对话框有一个选项,当单击该句柄,将该链接加载到它的modal-body元素中。这个特性默认情况下是关闭的。

28.3K40

每个程序员都会的 35 个 jQuery 小技巧

加载图片 如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = 0; i...你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上,你希望改变其效果,下面这段代码可以在其悬停在元素上添加 class 属性,当用户鼠标离开,则自动取消该 class...并把要移除的属性作为参数传入: $('input[type="submit"]').removeAttr('disabled'); 阻止链接加载 有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()

4.4K10

收集的35个 jQuery 小技巧代码片段,可以帮你快速开发.

检测浏览器 注: 版本jQuery 1.4中,.support 替换掉了.browser 变量 $(document).ready(function() { // Target Firefox 2 and...-- Create an anchor tag -->Back to top 12.预加载图片 如果你的页面中使用了很多不可见的图片(如:hover...你希望改变其效果,下面这段代码可以在其悬停在元素上添加 class 属性,当用户鼠标离开,则自动取消该 class 属性: $('.btn').hover(function () { $(this...: $('input[type="submit"]').removeAttr('disabled'); 17.阻止链接加载 有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()

5.4K20

程序员都会的 35 个 jQuery 小技巧

检测浏览器 注: 版本jQuery 1.4中,$.support 替换掉了$.browser 变量 $(document).ready(function() { // Target Firefox...12.预加载图片 如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () {  for (var i = ...15.鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上,你希望改变其效果,下面这段代码可以在其悬停在元素上添加 class 属性,当用户鼠标离开,则自动取消该...,并把要移除的属性作为参数传入: $('input[type="submit"]').removeAttr('disabled'); 17.阻止链接加载 有时你不希望链接到某个页面或者重新加载它...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()

2.6K00

EasyUI学习笔记

jQuery.fn.panel.defaults可以给组件添加默认的配置项 常用属性: title string 面板头部显示的标题文本。...collapsed boolean 定义是否初始化的时候折叠面板。 closed boolean 定义是否初始化的时候关闭面板。...href:从远程加载内容 cache boolean 如果为true,超链接载入时缓存面板内容。 loadingMessage string 加载远程数据的时候面板内显示一条消息。 <!...fn大多都是以on开头的,大部分复杂组件,都可以初始化时,使用onxxx属性配置,值为事件响应 onCollapse 折叠是触发 onExpand 展开触发 小部分简单组件,还是使用JQuery...按钮的宽度可以动态和折叠/展开以适应它的文本标签。 常用的属性: plain boolean 为true显示简洁效果。

10.3K30

layui 树形表格 treeTable使用详细指南,不能折叠解决办法

treePidName: 'parentId', // pid字段的名称 treeDefaultClose: true, //是否默认折叠...最上级的父级id treeIdName string 否 id字段的名称 treePidName string 否 pid字段的名称 treeDefaultClose boolean 否 是否默认折叠...treeLinkage boolean 否 父级展开是否自动展开所有子级 treeColIndex  树形图标(箭头和文件夹、文件的图标)显示第几列, 索引值是cols数组的下标。...7,我遇到的坑 我照着他给的教程一步步弄下来页面也显示出来了,但就是不能折叠,不管是我用折叠方法还是点那个三角图片还是设置为默认折叠,就是不管用, 不能折叠,可把我给气坏了。...最后,分享一下我写的不成熟的这个页面的功能汇总,做个记录: 主要功能有,树形表格展示,添加,修改,删除,批量删除,搜索,layui时间日期自定义格式列,表格全部展开、折叠、刷新表格等功能,有兴趣的看下吧

4.7K30

Bootstrap学习文档(四)

建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你使用时,只需选择一个引入页面就可以了。...如果你是单个引入每个插件的,请确保文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。...如果你是单个引入每个插件的,请确保文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。...如果你是单个引入每个插件的,请确保文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。...slide 给图片添加运动的效果 data-interval="500" 间隔时间,单位为毫秒,1秒是等于1000毫秒的,不要低于400,否则容易出现问题 data-ride="carousel" 页面加载后就开始播放

3.6K20

easyUI的常用API

引入必要的JS与CSS文件 //引入 jQuery 核心库,这里采用的是 2.0 <script type="text/javascript" src="easyui/<em>jquery</em>.min.js...选项卡使用的class是: easyui-<em>accordion</em> <em>在</em>easyui-tabs元素中添加一个div就是一个子选项卡 子选项卡可以通过title属性来指定标题, data-options添加关闭按钮...title: 窗口标题, 类型为string 重写了一些data-options属性 : collapsible: 是否可<em>折叠</em> , 类型boolean <em>默认</em>true minimizable: 是否显示最小化按钮...选择的日期发生改变<em>时</em> onChange:函数名 编写函数<em>时</em>, 存在两个形式参数: 参数1. 选择的新日期 参数2. 之前的旧日期 2....选择日期<em>时</em> onSelect:函数名 编写函数<em>时</em>, 存在一个形式参数: 参数1.

2.4K30
领券