Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 fc6cbefb 编写于 作者: C Catouse
浏览文件
操作

* fix issue #169, improve scrollInside option of modal and modaltrigger.

上级 394de938
隐藏空白更改
内联 并排
Showing with 164 addition and 12 deletion
CHANGES.md
浏览文件 @ fc6cbefb
......@@ -47,11 +47,10 @@ ZUI 官方网站为 https://www.openzui.com/ ，并提供了[英文文档(https:
* 优化了菜单项对象上的 `html` 属性，如果指定 HTML 文本则会作为构建整个菜单项使用，而不仅仅是作为菜单项文本内容，这样方便用户构建任意交互形式的菜单项；
* 对话框和对话框触发器：
* 增加全局辅助方法 `$.zui.reloadModal(urlOrOptions, modalID)` 来方便用户重新载入指定远程对话框上的内容，当对话框内容重新载入时会显示加载中提示动画；
* 优化了 `scrollInside` 选项，现在同时支持对话框和对话框触发器，解决了在一些特殊情况下没有按预期工作的问题，并针对浏览器窗口发生变化情况进行了优化；
* 修复了一些特殊情况下动态更新远程对话框内容后对话框上仍然可能保留更新前部分内容的问题；
* 修复了调用 `$.fn.show()` 方法时没有使用全局选项 `$.zui.ModalTrigger.DEFAULTS` 的问题；
* 修复了 `scrollInside` 选项在一些特殊情况下没有按预期工作的问题，并针对浏览器窗口发生变化情况进行了优化；
* 修复了加载 iframe 内容失败时并监听 `broken` 事件时没有返回有效的 HTML 字符串可能导致出错的问题；
* 修复了开启 `scrollInside` 选项时 `modal-scroll-inside` 辅助类名错误（[issue #168](https://github.com/easysoft/zui/issues/168)）；
* 树形菜单：
* 初始化选项 `initialState` 增加新的选项值 `'active'`，在初始化之后展开所有激活的节点以及对应的父节点（确保激活的节点可见）
* 新增 `$.fn.expandSelect(selector)` 方法，用户展开指定的节点以及父节点；
......
docs/part/javascript-modal.md
浏览文件 @ fc6cbefb
......@@ -172,10 +172,23 @@ filter: dhk mtk duihuakuang motaikuang
```html
<!-- 禁用动画效果的对话框 -->
<div class="modal">
...
...
</div>
```
## 内部滚动
通常对话框显示时，如果内容较多允许用户滚动页面来查看其他部分，但可以使用 `scrollInside` 选项来限制对话框仅在 `.modal-body` 内部滚动，对话框的总体高度不会超过浏览器窗口高度。
<div class="example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-scroll-inside="true" data-target="#scrollInsideModal">内部滚动</button>
</div>
```html
<!-- 禁用动画效果的对话框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-scroll-inside="true" data-target="#scrollInsideModal">内部滚动</button>
```
## 关闭对话框
在静态对话框HTML中增加一个按钮并添加data属性`data-dismiss="modal"`，这样当点击该按钮时会关闭此对话框。你可以将该属性添加至对话框内的任何元素。
......@@ -291,6 +304,12 @@ $('#myModal').modal(options)
* 页面内值唯一的字符串，使用本地存储记住位置；</td>
<td>启用该选项需要同时启用 `moveable` 选项，当该值为一个在页面范围内值唯一的字符串时，通过浏览器本地存储来存储数据，关闭页面或浏览器之后也不会忘记。</td>
</tr>
<tr>
<td>`scrollInside`</td>
<td>是否在对话框内部显示滚动条</td>
<td>默认为 `false`，即在对话框所属的页面上显示滚动条</td>
<td></td>
</tr>
</tbody>
</table>
......@@ -498,6 +517,35 @@ $('#myModal').on('shown.zui.modal', function() {
</div>
</div>
<div class="modal fade modal-for-page" id="scrollInsideModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title">内部滚动演示</h4>
</div>
<div class="modal-body">
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">确认</button>
<button type="button" class="btn">取消</button>
</div>
</div>
</div>
</div>
<style>
#pageContent .example > .modal {display: block; position: static;}
</style>
......
docs/part/javascript-modaltrigger.md
浏览文件 @ fc6cbefb
......@@ -58,8 +58,8 @@ filter: duihuakuangchufaqi dhkcfq motaikuang mtk
最简单的方法是为custom指定内容文本即可。同样可以使用`data-custom`属性。
<div class="example">
<button type="button" class="btn btn-primary" data-custom="<h1>此内容是自定义的</h1><p>哈哈:)</p>" data-toggle="modal">指定内容文本</button>
</div>
<button type="button" class="btn btn-primary" data-custom="<h1>此内容是自定义的</h1><p>哈哈:)</p>" data-toggle="modal">指定内容文本</button>
</div>
```html
<!-- 使用data-custom 属性 -->
......@@ -230,6 +230,30 @@ $('#triggerButton').modalTrigger({icon: 'heart'});
<button type="button" class="btn btn-primary" data-moveable="true" data-toggle="modal" data-custom="..."><i class="icon icon-move"></i> 打开我 拖动我</button>
```
## 内部滚动
通常对话框显示时，如果内容较多允许用户滚动页面来查看其他部分，但可以使用 `scrollInside` 选项来限制对话框仅在 `.modal-body` 内部滚动，对话框的总体高度不会超过浏览器窗口高度。
<div class="example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-scroll-inside="true" data-custom="<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br><h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br><h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br><h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br><h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br><h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>">
在内部显示滚动条（自定义）
</button>
<button type="button" class="btn btn-primary" data-iframe="docs/partial/iframe-long-modal.html" data-toggle="modal" data-scroll-inside="true">在内部显示滚动条（iframe）</button>
<button type="button" class="btn btn-primary" data-remote="docs/partial/remote-long-modal.html" data-toggle="modal" data-scroll-inside="true">在内部显示滚动条（ajax）</button>
</div>
```html
<button type="button" class="btn btn-primary" data-toggle="modal" data-scroll-inside="true" data-custom="...">在内部显示滚动条（自定义）</button>
<button type="button" class="btn btn-primary" data-iframe="docs/partial/iframe-long-modal.html" data-toggle="modal" data-scroll-inside="true">在内部显示滚动条（iframe）</button>
<button type="button" class="btn btn-primary" data-remote="docs/partial/remote-long-modal.html" data-toggle="modal" data-scroll-inside="true">在内部显示滚动条（ajax）</button>
```
## 如何使用
### 使用data属性来调用
......@@ -427,9 +451,13 @@ myModalTrigger.show();
<tr>
<td>`loadingIcon`</td>
<td>加载时显示的动画所使用的图标</td>
<td>* 以`icon-*`形式定义的图标名称
* 自定义加载动画所使用的html</td>
<td>`icon-*`定义的图标名称请参考[图标](#search/icon:spin)。</td>
<td>
<ul>
<li>以 `icon-` 形式定义的图标名称</li>
<li>自定义加载动画所使用的html</li>
</ul>
</td>
<td>`icon-` 定义的图标名称请参考[图标](#search/icon:spin)。</td>
</tr>
<tr>
<td>`scrollInside`</td>
......
docs/partial/iframe-long-modal.html 0 → 100644
浏览文件 @ fc6cbefb
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset='utf-8'>
<link href="../../dist/css/zui.css" rel="stylesheet">
<script src="../../assets/jquery.js"></script>
</head>
<body>
<div class="container">
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
</div>
</body>
</html>
docs/partial/remote-long-modal.html 0 → 100644
浏览文件 @ fc6cbefb
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title">内部滚动演示（ajax）</h4>
</div>
<div class="modal-body">
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
<h4>虞美人·春花秋月何时了</h4><p><small>五代·李煜</small></p>
<p><br>春花秋月何时了？<br>往事知多少。<br>小楼昨夜又东风，<br>故国不堪回首月明中。<br><br>雕栏玉砌应犹在，<br>只是朱颜改。<br>问君能有几多愁？<br>恰似一江春水向东流</p><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">确认</button>
<button type="button" class="btn">取消</button>
</div>
</div>
en/docs/part/javascript-modal.md
浏览文件 @ fc6cbefb
......@@ -291,6 +291,12 @@ The available parameters are：
* The only string of values on the page and is saved to local storage;</td>
<td>Enable `moveable` to enable this option. When the value is the only string within the page range save data through browser local storage, so the data will not be removed after the page or browser is closed.</td>
</tr>
<tr>
<td>`scrollInside`</td>
<td>Whether a scroll bar in a dialog is displayed</td>
<td>The default is `false`, which means the scroll bar is displayed on the page the dialog belongs to.</td>
<td></td>
</tr>
</tbody>
</table>
......
src/js/modal.js
浏览文件 @ fc6cbefb
......@@ -46,6 +46,14 @@
that.$element.trigger('loaded.' + zuiname)
})
}
if (options.scrollInside) {
$(window).on('resize.' + zuiname, function() {
if (that.isShown) {
that.adjustPosition();
}
});
}
}
Modal.VERSION = '3.2.0'
......@@ -90,12 +98,24 @@
var $body = $dialog.find('.modal-body').css(bodyCss);
if (options.scrollInside && $body.length) {
var headerHeight = options.headerHeight;
if (typeof headerHeight !== 'number') {
headerHeight = $dialog.find('.modal-header').height();
var footerHeight = options.footerHeight;
var $header = $dialog.find('.modal-header');
var $footer = $dialog.find('.modal-footer');
if (typeof headerHeight !== 'number' && $header.length) {
headerHeight = $header.outerHeight();
} else if ($.isFunction(headerHeight)) {
headerHeight = headerHeight($header);
} else {
headerHeight = 0;
}
if (typeof footerHeight !== 'number' && $footer.length) {
footerHeight = $footer.outerHeight();
} else if ($.isFunction(footerHeight)) {
footerHeight = footerHeight($footer);
} else {
footerHeight = 0;
}
bodyCss.maxHeight = winHeight - headerHeight;
bodyCss.maxHeight = winHeight - headerHeight - footerHeight;
bodyCss.overflow = $body[0].scrollHeight > bodyCss.maxHeight ? 'auto' : 'visible';
$body.css(bodyCss);
}
......
src/js/modal.trigger.js
浏览文件 @ fc6cbefb
......@@ -255,7 +255,7 @@
if (scrollInside) {
var headerHeight = options.headerHeight;
if (typeof headerHeight !== 'number') {
headerHeight = $header.height();
headerHeight = $header.outerHeight();
} else if ($.isFunction(headerHeight)) {
headerHeight = headerHeight($header);
}
......
src/less/modules/modals.less
浏览文件 @ fc6cbefb
......@@ -221,5 +221,8 @@
}
.modal-scroll-inside {
overflow: hidden!important;
}
.body-modal-scroll-inside {
overflow: auto;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或