不得不爱开源 Wijmo jQuery 插件集（11）-【Spilter】(附页面展示和源码)

Spilter ™插件可以用来添加一个网页分割器到你的网站。它可以显示任意分割网页，在每个分割块中展示不同的网页内容，其中包含可自定义的风格和导航元素。

在上一篇文章中我们，给大家介绍了 Wijmo Expander-扩展容器插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Spilter 的特性及使用方法。 wijspilter 即为 jQuery 中的分割器插件。

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

首先让我们看看 Wijmo wijcalendar 给我们带来了哪些惊喜？

建立你的第一个 Wijmo jQuery Menu:

HTML 标签： 
 <div id="splitter">


<div>Panel1</div>

<div>Panel2</div>     

</div>
CSS ：
<style type="text/css">

#splitter

{


height: 200px;

width: 200px;

}

</style>
jQuery 脚本： 
 <script id="scriptInit" type="text/javascript">


$(document).ready(function () {

$("#splitter").wijsplitter({ orientation: "vertical" });

});

</script>

特性

支持水平和竖直方向分割。

可折叠和伸展的窗格

wijSpliter 包含一个可移动的 (分割条)split bar。分割条可以把页面分割成两个或者更多区域。同时，这些区域是可折叠和伸展的。

嵌套

可以任意无限层的嵌套 wijSpliter 。

最后，和大家分享一些 Wijmo 资源：

1.源码下载（包含以上特性）:Wijmo-Splitter.zip

2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx

Options

barZIndex

一个值，该值可以指示分离器栏的z-index。

Default: -1.

Type: Number.

Code example:

$('.selector’).wijsplitter({barZIndex: 1});

collapsingPanel

设置点击按钮时哪一个 panel 将关闭。可能的值有 "panel1" 和 "panel2".

Default: "panel1"

Type: String

Code example:

$('.selector’).wijsplitter({collapsingPanel: "panel1"});

fullSplit

该值用来设置或获取一个值，该值可以指示控件是否充满了文档。

Type: Boolean

Default: false

Code example:

$('.selector’).wijsplitter({fullSplit: false});

orientation

该值用来获取或设置一个值，该值可以指示分离器面板的水平或垂直方向。

Type: String

Default: 'vertical'

Code example:

$('.selector’).wijsplitter({orientation: ‘vertical’});

panel1

用来获取SplitterPanel对象，该对象可以定义分离器顶部或左侧面板的信息。

Type: Object

Default: { minSize: 1,collapsed: false,scrollBars: "auto" }

Code example:

$('.selector’).wijsplitter({panel1: {

{

minSize:1,

collapsed:false,

scrollBars:"auto"}

});

collapsed

该值用来获取或设置一个值，该值可以确定分离器面板是要折叠还是要展开。

Type: Boolean

Default: false

Code example:

$('.selector’).wijsplitter(panel1: {collapsed: false});

minSize

该值用来获取或设置在调整分离器大小时的最小距离（以像素为单位）。

Type: Number

Default: 1

Code example:

$('.selector’).wijsplitter(panel1: {minSize: 1});

scrollBars

该值用来获取或设置分离器面板要显示的滚动条的类型。

Type: String

Default: ‘auto’

Code example:

$('.selector’).wijsplitter(panel1: {scrollBars: ‘auto’});

Panel2

用来获取SplitterPanel对象，该对象可以定义分离器底部或右侧面板的信息。

Type: Object

Default: { minSize: 1,collapsed: false,scrollBars: "auto" }

Code example:

$('.selector’).wijsplitter({panel2: {

{

minSize:1,

scrollBars: "auto",

collapsed:false}

});

collapsed

该值用来获取或设置一个值，该值可以确定分离器面板是要折叠还是要展开。

Type: Boolean

Default: false

Code example:

$('.selector’).wijsplitter(panel2:{collapsed: false});

minSize

该值用来获取或设置在调整分离器大小时的最小距离（以像素为单位）。

Type: Number

Default: 1

Code example:

$('.selector’).wijsplitter(panel2: {minSize: 1});

scrollBars

该值用来获取或设置分离器面板要显示的滚动条的类型。

Type: String

Default: ‘auto’

Code example:

$('.selector’).wijsplitter(panel2:{scrollBars: ‘auto’});

resizeSettings

一个值，该值可以定义分离器栏被拖动时的动画。

Type: Object

Default:{ }

Code example:

$('.selector’).wijsplitter({resizeSettings: { ghost :true}});

disabled

默认值巍峨哦 easing。

Type: String

Default: 'swing'

Code example:

$('.selector’).wijsplitter({resizeSettings: {animationOptions:{ easing: 'swing'}}});

duration

设置滑动的缓冲时间（以毫秒为单位）。

Type: Number

Default: 100

Code example:

$('.selector’).wijsplitter({resizeSettings: {animationOptoins:{ animationDuration: 100}}});

easing

easing 的动画效果。

Type: String

Default: 'swing'

Code example:

$('.selector’).wijsplitter({resizeSettings: {animationOptions:{ easing: ‘swing’}}});

ghost

获取或设置一个值，在拖拽 spliter bar 时是否显示轮廓线。

Type: Boolean

Default: false

Code Example:

$('.selector’).wijsplitter({resizeSettings: {ghost: false}});

showExpander

一个值，该值可以确定是否允许显示分离器控件的扩展器。

Default: true

Type: Boolean

Code example:

$('.selector’).wijsplitter({showExpander: true});

splitterDistance

该值用来获取或设置在C1Splitter的左侧或顶部边缘的、以像素为单位的分离器的位置。

Type: Number

Default: 100

Code example:

$('.selector’).wijsplitter({splitterDistance: 100});

Methods

destroy()

销毁 wijsplitter 的设置，还原插件到初始化状态。

Code Example:

$(" selector ").wijsplitter ( "destroy" );

disable()

禁用 wijsplitter。

Code Example:

$(" selector ").wijsplitter ( "disable" );

enable()

启用 wijsplitter。

Code Example:

$(" selector ").wijsplitter ( "enable " );

option()

获取或设置任意 wijsplitter 选项。如果没有指定选项值，将作为 getter 使用。

Code Example:

$(" selector ").wijsplitter ("option" , optionName , [value]);

option()

一次性设置多个 wijsplitter 选项。

Code Example:

$(" selector ").wijsplitter ("option" , options);

refresh

强制刷新 splitter。

Parameters

size: boolean 值，指示当插件的大小改变时是否刷新。

state: boolean 值，指示当插件折叠或扩展时是否刷新。

Code Example:

$(".selector","refresh", true, false);

widget()

返回 .wijmo-wijsplitter 元素。

Code Example:

$(" selector ").wijsplitter ("widget");

Events

collapse

该值用来获取或设置那将在PANEL1折叠之前调用的javascript 函数的名称。

Default: null

Type: Function

Code Example:

// Supply a callback function to handle the collapse event:

$("#element").wijsplitter({ collapse: function () { return false; } });

// Bind to the event by type:

$("#element").bind("wijsplittercollapse", function () { return false; });

collapsed

该值用来获取或设置那将在PANEL1因点击“折叠”或“展开”图片而折叠时调用的javascript函数的名称。

Default: null

Type: Function

Code Example:

// Supply a callback function to handle the collapsed event:

$("#element").wijsplitter({ collapsed: function () { } });

// Bind to the event by type:

$("#element").bind("wijsplittercollapsed", function () { });

expand

该值用来获取或设置那将在PANEL1展开之前调用的javascript函数的名称。

Default: null

Type: Function

Code Example:

// Supply a callback function to handle the expand event:

$("#element").wijsplitter({ expand: function () { return false; } });

// Bind to the event by type:

$("#element").bind("wijsplitterexpand", function () { return false; });

expanded

该值用来获取或设置那将在PANEL1因点击“折叠”或“展开”图片而扩展时调用的javascript函数的名称。

Default: null

Type: Function

Code Example:

// Supply a callback function to handle the expanded event:

$("#element").wijsplitter({ expanded: function () { } });

// Bind to the event by type:

$("#element").bind("wijsplitterexpanded", function () { });

sized

该值用来获取或设置那将在分离器拖动完成时在客户端调用的javascript函数的名称。

Default: null

Type: Function

Code example:

// Supply a callback function to handle the sized event:

$("#element").wijsplitter({ sized: function () { } });

// Bind to the event by type:

$("#element").bind("wijsplittersized", function () { });

sizing

该值用来获取或设置那将在拖动分离器时在客户端调用的javascript函数的名称。

Default: null

Type: Function

Code example:

// Supply a callback function to handle the sizing event:

$("#element").wijsplitter({ sizing: function () { } });

// Bind to the event by type:

$("#element").bind("wijsplittersizing", function () { });

posted @ 2012-11-15 15:07 葡萄城开发工具阅读(2475) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

葡萄城开发工具

不得不爱开源 Wijmo jQuery 插件集（11）-【Spilter】(附页面展示和源码)

建立你的第一个 Wijmo jQuery Menu:

特性

最后，和大家分享一些 Wijmo 资源：

wijsplitter API 介绍：(点击隐藏 API)

Options

barZIndex

collapsingPanel

fullSplit

orientation

panel1

collapsed

minSize

scrollBars

Panel2

collapsed

minSize

scrollBars

resizeSettings

disabled

duration

easing

ghost

showExpander

splitterDistance

Methods

destroy()

disable()

enable()

option()

option()

refresh

widget()

Events

collapse

collapsed

expand

expanded

sized

sizing

公告