不得不爱开源 Wijmo jQuery 插件集(10)-【Expander】(附页面展示和源码)
Expander 插件使你可以在你的网页中镶嵌另一个站点。在上一篇文章中我们,给大家介绍了 Wijmo Calendar-日历插件的特性及使用方法。感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Expander 的特性及使用方法。 Expander 即为 jQuery 中的扩展容器插件。
如果你是第一次看本系列文章,那么还可以参考本系列的其他几篇文章,相信会给你带来更多惊喜:
- 不得不爱开源 Wijmo jQuery 插件集(1)-【开篇】(附演示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(3)-【Menu】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(4)-【手风琴效果】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(5)-【对话框】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(6)-【Popup】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(7)-【进度条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(8)-【滑动条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集(9)-【日历】(附页面展示和源码)
首先让我们看看 Wijmo Expander 给我们带来了哪些惊喜?
ComponentOne为ASP.NET Wijmo出品的Expander™控件可以允许你通过使用不同的动画效果来显示或隐藏一个不断扩大的面板上的嵌入式的或者外部的内容。这些不断扩展的内容可以通过点击扩展器的标题来显示或隐藏。
建立你的第一个 Wijmo jQuery Menu:
HTML 标签: <div id="expander"><div>header</div><div>content</div></div>或者<div id="expander"><h1>header</h1><div>content</div></div>jQuery 脚本: <script id="scriptInit" type="text/javascript">$('#expander').wijexpander ({expanded: false });</script>
特性
扩展方向
该扩展器控件能够在几个不同的方向进行扩展。你可以设置是否令该控件扩展到顶部、右侧、底部或左侧。
外部内容
你可以在C1Expander的对话窗口中显示外部内容。这可以是你的项目中另一个网页的内容或你的项目之外的一个网站的内容。
动画
该扩展器包含内置的动画效果,比如,线性或弹性宽松,当展开或折叠该控件时可以对它进行设置。它可以用来自定义应该如何通过使用内置的动画转换选项来进行动画转换。你也具备修改动画效果的长度的能力。
页面加载
它可以设置是否需要在页面加载上展开或折叠该控件。在默认情况下,该控件最初会显示为展开显示内容。
主题
只需点击一下智能标签,就可以通过从六个溢价主题(北极,午夜时分,雅集,火箭,钴和英镑)中选择一个来改变该扩展器的外观。另外,还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题!
CSS支持
你可以使用这一种级联样式表(CSS)的样式来定义自定义皮肤。有了CSS支持,你可以使该扩展器与你的组织标准相匹配。
最后,和大家分享一些 Wijmo 资源:
1.源码下载(包含以上特性):Wijmo-Expander.zip
2.更多信息请参考:Wijmo 中文网站:http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
3.开源Wijmo jQuery 讨论社区: http://gcdn.grapecity.com/index.aspx
wijexpander API 介绍:(点击隐藏 API)
Options
allowExpand
- Type: Boolean
- Default: true
- Code Example:
-
$(
"#element"
).wijexpander({ allowExpand:
false
});
animated
- 该值用来确定动画的缓动效果。
- 预设效果包括:
- expand
- horizontal
- content
- Type: string
- Default: "slide"
- Code Example:
- You can create your own animation as follows:
-
$(
"#expander2"
).wijexpander({
animated:
"custom1"
});
jQuery.wijmo.wijexpander.animations.custom1 =
function
(options) {
this
.slide(options, {
easing:
"easeInBounce"
,
duration: 900
});
}
contentUrl
http://http://www.gcpowertools.com.cn/
- Type: string
- Default: ""
- Code Example:
-
$(
"#element"
).wijexpander({ contentUrl:
"http://componentone.com/"
});
disabled
- 禁用 Expander。
- Type: Boolean
- Default: false
- Code Example:
-
$(
"#element"
).wijexpander({ disabled:
true
});
expanded
- Type: Boolean
- Default: true
- Code Example:
-
$(
"#element"
).wijexpander({ expanded:
false
});
expandDirection
- Type: string
- Default: "bottom"
- Code Example:
-
$(
"#element"
).wijexpander({ expandDirection:
"right"
});
Events
afterCollapse
- 在 expander 折叠后触发
- Event type: wijexpanderaftercollapse
-
Parameters:
- e: jQuery.Event object.
- Code Example:
- Supply a callback function to handle the afterCollapse event as an option.
-
$(
"#expander"
).bind(
"afterCollapse"
,
function
(e) $(
"#expander"
).wijexpander({ afterCollapse:
function
(e) {
/// ...
}
/// });
- Bind to the event by type: wijexpanderaftercollapse.
-
$(
"#expander"
).bind(
"wijexpanderaftercollapse"
,
function
(e) {
/// ...
});
afterExpand
- 在内容展开后触发。
- Event type: wijexpanderafterexpand
-
Parameters:
- e: jQuery.Event object.
- Code Example:
- Supply a callback function to handle the afterExpand event as an option.
-
$(
"#expander"
).wijexpander({ afterExpand:
function
(e) {
/// ...
}
/// });
- Bind to the event by type: wijexpanderafterexpand.
-
$(
"#expander"
).bind(
"wijexpanderafterexpand"
,
function
(e) {
/// ...
});
beforeCollapse
- 在折叠之前触发。
- Event type: wijexpanderbeforecollapse
-
Parameters:
- e: jQuery.Event object.
- Code Example:
- Supply a callback function to handle the beforeCollapse event as an option.
-
$(
"#expander"
).wijexpander({ beforeCollapse:
function
(e) {
/// ...
}
/// });
- Bind to the event by type: wijexpanderbeforecollapse.
-
$(
"#expander"
).bind(
"wijexpanderbeforecollapse"
,
function
(e) {
/// ...
});
beforeExpand
- 在内容展开之前触发。返回 false 或者调用 event.preventDefault() 取消该事件。
- Event type: wijexpanderbeforeexpand
-
Parameters:
- e: jQuery.Event object.
- Code Example:
- Supply a callback function to handle the beforeExpand event as an option.
-
$(
"#expander"
).wijexpander({ beforeExpand:
function
(e) {
/// ...
}
/// });
- Bind to the event by type: wijexpanderbeforeexpand.
-
$(
"#expander"
).bind(
"wijexpanderbeforeexpand"
,
function
(e) {
/// ...
});
Methods
collapse
- 该方法用于关闭 expander。
- Code Example:
-
$(
"#element"
).wijexpander(
"collapse"
);
expand
- 该方法用于展开 expander。
- Code Example:
$(
"#element"
).wijexpander(
"expand"
);
转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/11/15/2770971.html
不得不爱开源 Wijmo jQuery 插件集(10)-【Expander】(附页面展示和源码)相关推荐
- 不得不爱开源 Wijmo jQuery 插件集(13)-【Tooltip】(附页面展示和源码)
Wijmo Tooltip 可以给你的网站添加动感十足的提示信息,给您的最终用户完美的工具提示!在上一篇文章中我们,给大家介绍了 Wijmo -列表插件的特性及使用方法.感谢园子中朋友的支持,朋友们的 ...
- 不得不爱开源 Wijmo jQuery 插件集(4)-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
- 分享一套帮助你优化开发web应用的jQuery插件集 - Vanity Toolset
日期:2012-7-10 来源:GBin1.com 在线演示 本地下载 jQuery的UI相关插件很多,今天我们介绍来自Vanity Toolset的jQuery插件集,帮助你有效的简化前端UI开 ...
- 1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书 二手书 特价书 旧书网 (2)jQuery-Horizontal ...
- ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器 ...
- (转)jQuery插件:Image lazy loader图片延迟加载
原文地址:http://www.cnblogs.com/cnfiowen/archive/2010/02/22/1671483.html Lazy Load 是一个用 JavaScript 编写的 j ...
- Lazy Load, 延迟加载图片的 jQuery 插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 多级弹出菜单jQuery插件ZoneMenu
ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...
最新文章
- 转载:谢谢原作者:块设备驱动实战基础篇一 (170行代码构建一个逻辑块设备驱动)
- Linux文件属性4——读取目录文件
- 基于容器服务 ACK 发行版打造 CNStack 社区版
- [再寄小读者之数学篇](2014-05-30 平均值不等式)
- android 性能优化---(5)Bitmap图片资源优化
- S5PV210体系结构与接口09:SD卡启动详解
- TypeError: Cannot set properties of undefined (setting ‘innerHTML‘)
- Linux入门之磁盘管理(3)文件系统挂载
- 【EOS】2.1 EOS Hello World合约
- 【POJ3070】斐波那契数列f[n]的后四位,n达1e+9(矩阵快速幂模版题)
- [Effective JavaScript 笔记] 第7条:视字符串为16位的代码单元序列
- 中国省份地级市政区图大全
- C语言入门练习— —累乘
- 概念区分:灰度发布、蓝绿发布、滚动发布
- 今天是2019年最后一天,全球金融危机,离我们已经过去十年了
- 1024程序员节最新福利之2018最全java资料集合
- SQL-多表关联查询详解
- Android入门,android开发需要什么基础
- eureka注册中心wro.css wro.js 404
- VaR(value at risk)在险价值
热门文章
- _2020年10个最好的Linux发行版本
- textCNN和lightGBM模型对景区口碑评价进行情感分析
- flask ajax 文件上传,使用ajax上传Python flask文件请求.files空的
- python语言特点粘性扩展_【语言处理与Python】9.2处理特征结构\9.3扩展基于特征的文法...
- @configuration注解_Spring注解@Configuration
- WebService的简单实现
- 一些OEM的厂商的漏洞分析
- C++下面 计算时间
- 常用服务的默认端口号总结
- mysql 5.1.x 比较 5.6.x版本的日志