**Split.js插件详解**
Split.js是一款专为前端开发者设计的纯JavaScript库，它使得创建可调节大小的拆分视图面板变得极其简单。这款插件的独特之处在于其轻量级的设计，不需要依赖任何外部库，如jQuery，这使得它在项目集成中更加灵活和高效。
**核心功能**
1. **无依赖性**：Split.js的编写完全基于原生JavaScript，不依赖jQuery或其他库，因此可以避免引入额外的依赖，减小项目体积，提高页面加载速度。
2. **响应式布局**：Split.js支持响应式设计，可以根据不同的屏幕尺寸自动调整拆分视图的布局，适应各种设备，包括桌面、平板和手机。
3. **可拖动调整**：用户可以通过鼠标或触屏手势拖动分隔条，动态改变各个面板的大小，提供直观的交互体验。
4. **配置选项丰富**：Split.js提供了丰富的配置选项，如初始大小、最小/最大值限制、方向（水平或垂直）、拖动行为等，允许开发者自定义拆分视图的行为。
5. **API接口**：通过API，开发者可以动态地调整面板大小，或者在代码中触发面板的分割和合并操作。
**使用步骤**
1. **引入Split.js**：首先需要将split.js库引入到HTML文件中，通常放在`<head>`标签内或者`<body>`标签的底部。
2. **选择元素**：选择需要拆分的元素，通常是一系列相邻的div元素，并为它们设置合适的CSS样式。
3. **初始化Split.js**：调用Split函数，传入之前选择的元素和配置对象。例如，若要创建水平拆分视图，可以这样初始化：
```javascript
Split(['#panel1', '#panel2'], {
direction: 'horizontal',
sizes: [50, 50]
});
```
4. **监听事件**：Split.js还提供了多种事件，如`dragstart`、`dragend`和`resize`，可以监听这些事件来执行相应的业务逻辑。
**压缩包文件解析**
在提供的压缩包文件中，我们可以看到以下内容：
- **index.html、index2.html**：这两个文件可能是示例页面，展示了Split.js如何在实际项目中应用。
- **readme.html**：这个文件可能包含了插件的使用说明和相关文档。
- **jQuery之家.url**：可能是一个链接，指向一个关于jQuery的资源网站。
- **css、related、fonts**：这些目录可能包含样式的CSS文件、相关的辅助资源和字体文件。
- **js**：这个目录很可能包含了Split.js的源码和其他JavaScript文件。
- **grips**：可能存放了用于表示分隔条的图片资源。
通过阅读`index.html`和`index2.html`，结合`readme.html`中的说明，开发者可以更好地理解Split.js的用法和特性。同时，查看`js`目录下的文件，可以深入研究Split.js的内部实现。对于初学者来说，这是一个很好的学习案例，能够帮助他们掌握如何在实际项目中应用Split.js创建拆分视图。
201512071636.zip （16个子文件） 
css 
default.css 5KB
2.jpg 40KB
icomoon.svg 2KB
index.html 12KB
vertical.png 91B
