YMPrompt消息提示组件4.0是一款功能强大的JavaScript插件,提供美观且易于定制的弹窗界面,适用于各类网站和应用的消息通知。
### 组件使用简要介绍
1. **引入组件**:
- 在页面中添加以下 `
```
- 引入对应的皮肤文件的 CSS,例如:
```html
```
2. **自定义组件默认配置**(可选):
页面中的 JavaScript 可通过 `ymPrompt.setDefaultCfg(cfg)` 方法修改部分或全部的默认属性。例如:
```javascript
ymPrompt.setDefaultCfg({maskAlpha:0.2, maskAlphaColor:#00f});
```
3. **组件默认配置**(未设定项采用此配置中的默认值):
- `titleBar`: 显示标题栏,默认为 true。
- `fixPosition`: 随滚动条浮动,默认为 true。
- `dragOut`: 不允许拖出页面,默认为 false。
- `autoClose`: 点击按钮后自动关闭窗口,默认为 true。
- `maskAlphaColor`: 遮罩透明色, 默认黑色(#000)。
- `maskAlpha`: 遮罩透明度,默认 0.1。
- `winAlpha`: 拖动窗体时的透明度,默认值为 0.8。
- `title`: 标题栏文本, 默认 标题。
- `message`: 内容区域显示的信息, 默认 内容。
- `width`: 宽度,默认300px。
- `height`: 高度,默认185px。
- `iframe`: 是否使用 iframe 加载内容, 默认为 false。
- `btn`: 按钮定义数组形式。默认值为空数组,如[[确定,ok],[取消,cancel]]等。
- `icoCls`: 图标类型类名,默认为空字符串。
- `handler`: 回调事件函数。
- `showMask`: 是否显示遮罩层,默认为 true。
- `winPos`: 弹出窗口位置,支持8种内置位置(c,l,t,r,b,lt,rt,lb,rb)及自定义坐标。默认值为中心点(c)。
4. **调用消息函数**:
根据需要使用以下方法来显示不同类型的消息框:
- `ymPrompt.alert(参数)`:用于提示信息。
- `ymPrompt.succeedInfo(参数)`:成功信息类型。
- `ymPrompt.errorInfo(参数)`:错误信息类型。
- `ymPrompt.confirmInfo(参数)`:询问消息类型。
- `ymPrompt.win(参数)`:自定义窗口类型。
5. **方法和属性**:
- `setDefaultCfg(cfg)`: 设置组件默认配置,例如:`ymPrompt.setDefaultCfg({maskAlpha:0.2, maskAlphaColor:#00f})`
- `getPage()`: 在 iframe 模式下获取页面的 DOM 对象。
- `resizeWin(w,h)`: 动态修改窗口大小。如:`ymPrompt.resizeWin(400,300)`
- `doHandler(sign,autoClose)`: 触发某个按钮点击事件,例如:`ymPrompt.doHandler(ok,false);`
- `getButtons()`: 获取当前弹出的所有按钮对象。
- `close()`: 关闭当前弹出窗口。
6. **简化调用方式**:
可以在脚本中定义变量来简化方法的调用,例如:`var Alert = ymPrompt.alert;`
通过以上步骤可以轻松地将此组件集成到项目中,并根据需要进行配置和使用。