模板简介
模板使用简要说明
主题配色及保存
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
点击侧边栏刷新
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本子页面内新建TAB
iframe中操作当前Tabs
iframe页面内的loading
多标签页(Multitabs)插件说明
关于multitabs的一些调整
调整左侧的宽度
webuploader使用时候的问题
关于模板的默认主题或者配色
关于模板的字体图标问题
关于版权和商业用途
模板中固有的插件
光年模板的loading和消息(v3)
rangeSlider滑块(v3)
bootstrap-datepicker日期(v3)
bootstrap-datepicker日期(v4)
bootstrap-datetimepicker日期时间(v3)
bootstrap-datetimepicker日期时间(v4)
perfect-scrollbar滚动条
Chart.js图表
bootstrap-colorpicker颜色选择
jquery-confirm对话框
jquery.tagsinput标签
bootstrap-notify消息(v4)
chosen.jquery关联选择
jquery.bootstrap.wizard向导
clockpicker时间选择(v4)
bootstrap-maxlength长度验证(v4)
bootstrap-select下拉选择(v4)
fullcalendar日程(v4)
bootstrap-table表格插件
插件项目包含插件
Date Range Picker时间段选择
material风格时间选择器
dropzone上传
uploadify上传
webuploader上传
H5图片上传
cropper图片裁剪
ckeditor富文本编辑器
editor.md编辑器
summernote富文本编辑器
tinymce富文本编辑器
ueditor富文本编辑器
wangeditor富文本编辑器
bootstrap-validate表单验证
jquery-validate表单验证
bootstrap-select下拉选择
bootstrap-selectN联动
bootstrap-lyear-select下拉
select2下拉
bootstrap-multiselect下拉多选
lyear-dropdowntree下拉树状
ZTree树形菜单
treeview树状插件
jstree树状结构
imgVer拼图滑块
sliderVerification滑块验证
bootstrap3-dialog模态框
layer弹窗
jquery.auto.complete自动填充
fixedheadertable固定表头
fontIconPicker图标选择
fullcalendar日程
jQuery Raty评分
lyear.loading加载
Bootstrap MaxLength长度验证
jquery.toolbar弹出式工具栏
jquery.bootstrap-touchspin输入框微调
插件项目包含示例
表单布局示例
聊天页面示例
logo处使用文字
模态框中使用Tab选项卡
模态框最大化
顶部消息示例
搜索布局
搜索布局2
搜索布局3
侧滑边栏区域
选择示例
选择示例2
选择示例3
代码演示切换
留言列表布局
数据统计布局
产品价格布局
搜索框
用户头像篇
动画篇
其他篇
另一种侧边栏菜单
光年模板的loading和消息(v3) - 光年模板说明文档 - 笔下光年
网站首页
光年模板的loading和消息(v3)
v3和v4版本中使用的loading是不一样的,这里着重讲一下v3的loading,至于v4的会放到插件整合项目里面去介绍。 > 注意:这里讲的是v3中的loading 从该文件的内容,不难看出其实就是一个全局的loading加载提示,不过该文件还封装了另一个消息提示的方法 `notify`,这里也会列出v3中的使用。 ```javascript lightyear.loading('show'); // 显示 lightyear.loading('hide'); // 隐藏 ``` #### loading的一些小改动 因为 `iframe` 版本的原因,在 `iframe` 里面的页面中使用,遮罩层只在 `iframe` 的范围,不太好看,这里稍微改下这个 `js`,加上 `parent` 即可。 #### loading的另一种改动方式 [点击查看](#h4-notify- "点击查看") #### 通知消息 而在文件中封装的消息提示采用的是 `bootstrap-notify` 插件(封装方法来自`DolphinPHP`),为了简化使用时候的写法,当然您也可以直接使用 `bootstrap-notify` 提供的方法。 | 参数 | 说明 | | ------------ | ------------ | | $msg | 提示信息 | | $type | 提示类型: 'info', 'success', 'warning', 'danger' | | $delay | 定义消息提示消失的时间,毫秒数 | | $icon | 图标,例如: 'mdi mdi-emoticon-happy',具体参考图标 | | $from | 'top' 或 'bottom' | | $align | 'left', 'right', 'center' | | $url | 跳转链接,$delay时间后跳转 | ```javascript lightyear.notify('修改成功,页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center'); ``` #### notify的一些小改动 跟 `loading` 一样的问题,这个消息提示在 iframe 里面的页面中使用,也只是在 `iframe` 范围内,这里也可以做一些变动。 首先:需要把引入的插件和样式,放到最外层 `index.html` 里面。 ```html <link href="css/animate.css" rel="stylesheet"> <script src="js/bootstrap-notify.min.js"></script> ``` 修改 `lightyear.js`,同样加上parent即可。 ```javascript /* 省略... */ parent.jQuery.notify({ icon: $icon, message: $msg } /* 省略... */ ``` #### notify的另一种改动方式 和加载等待动画一起改动,在不改动 `lightyrea.js` 的前提下,把 `lightyear.js` 、`animate.css` 和 `bootstrap-notify.min.js` 的引入挪到 `index.html` 页面中,`iframe` 的页面里不再引入这些,在 `iframe` 里面调用加上 `parent`。 ```javascript parent.lightyear.loading('show'); parent.lightyear.loading('hide'); parent.lightyear.notify('修改成功,页面即将自动跳转~', 'success'); ``` 涉及的文件: - `lyear_js_notify.html` - `js/lightyear.js` - `js/bootstrap-notify.min.js`
上一篇:
模板中固有的插件
下一篇:
rangeSlider滑块(v3)