mirror of
https://gitee.com/layui/layui.git
synced 2025-08-20 09:28:56 +08:00
release: v2.9.2-rc.1
This commit is contained in:
贤心
GitHub
parent
c0b1aa6c27
commit
246722e71c
3
.github/ISSUE_TEMPLATE/config.yml
vendored
3
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -3,3 +3,6 @@ contact_links:
|
||||
- name: 📄 官方文档
|
||||
url: https://layui.dev/
|
||||
about: 建议在创建 Issue 之前，仔细查阅 Layui 开发文档，以便对其有更深入的了解，和更好地分析问题。
|
||||
- name: 🔎 Gitee Issues
|
||||
url: https://gitee.com/layui/layui/issues
|
||||
about: 从过往的 6000+ Issues 中搜索相似议题，主要适用于 2.x 版本
|
||||
|
||||
30
.github/workflows/issue-close-require.yml
vendored
Normal file
30
.github/workflows/issue-close-require.yml
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
name: Issue Close Require
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 0 * * *"
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
issue-close-require:
|
||||
permissions:
|
||||
issues: write
|
||||
pull-requests: write
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: need reproduce
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'close-issues'
|
||||
labels: 'need reproduce'
|
||||
inactive-day: 5
|
||||
body: |
|
||||
由于超过 5 天仍未收到相关重现，该 issue 已被自动关闭。
|
||||
- name: resolved
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'close-issues'
|
||||
labels: 'resolved'
|
||||
inactive-day: 3
|
||||
82
.github/workflows/issue-labeled.yml
vendored
Normal file
82
.github/workflows/issue-labeled.yml
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
name: Issue Labeled
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [labeled]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
issue-labeled:
|
||||
permissions:
|
||||
issues: write
|
||||
pull-requests: write
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: bug
|
||||
if: github.event.label.name == 'bug'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
issue-number: ${{ github.event.issue.number }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 你好。团队已初步确认该 Bug，我们将在后续版本进行详细的排查和修复，感谢您的积极反馈 👍
|
||||
|
||||
- name: help wanted
|
||||
if: github.event.label.name == 'help wanted'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 很棒 👋
|
||||
我们有意愿采纳这项议题，欢迎您创建 [Pull Request](https://github.com/layui/layui/pulls) 来协助实现，若变更内容涉及到 API 新增和改动，除了提交核心代码外，还需包含：[文档](https://github.com/layui/layui/tree/main/docs)、测试用例等相关文件，以便我们更好地进行 Review。期待您的贡献!
|
||||
|
||||
- name: invalid
|
||||
if: github.event.label.name == 'invalid'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment,close-issue'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 你好，为了提升沟通效率，我们对 Issue 制定了规范要求，你的 Issue 因不符合规范而被自动关闭。
|
||||
建议您在下次创建 Issue 时，遵循表单模板规范填写。谢谢。
|
||||
> 相关延伸：👉 [**提问的智慧**](https://github.com/tvvocold/How-To-Ask-Questions-The-Smart-Way)
|
||||
|
||||
- name: need reproduce
|
||||
if: github.event.label.name == 'need reproduce'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 您好，请提供一个最小化的重现，以便我们为您协助排查问题。良好的重现应当包括但不仅限于：
|
||||
- 产生问题的详细步骤
|
||||
- 与问题相关的完整代码
|
||||
- 在线 Demo (推荐通过 [stackblitz](https://stackblitz.com/) 或 [codepen](https://codepen.io/) 创建)
|
||||
> 相关延伸：👉 [为什么要提供最小化重现？](https://antfu.me/posts/why-reproductions-are-required-zh)
|
||||
|
||||
- name: discussion
|
||||
if: github.event.label.name == 'discussion'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment,close-issue'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 你好，Issue 一般只接受「Bug 报告」和「新功能请求」，而您的议题涉及到基础用法和功能疑惑等业务相关的讨论，这并不适合作为 Issue 讨论。建议您通过以下方式寻求解决方案：
|
||||
- 仔细查阅 Layui 官方文档：https://layui.dev
|
||||
- 搜索相关技术资料或咨询人工智能大模型
|
||||
- [Discussions](https://github.com/layui/layui/discussions)
|
||||
|
||||
- name: unrelated
|
||||
if: github.event.label.name == 'unrelated'
|
||||
uses: actions-cool/issues-helper@v3
|
||||
with:
|
||||
actions: 'create-comment,close-issue'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
@${{ github.event.issue.user.login }} 经过确认，您提出的问题与 Layui 不存在相关联。建议通过以下方式寻求解决方案：
|
||||
- 搜索相关技术资料或咨询人工智能大模型
|
||||
- [Discussions](https://github.com/layui/layui/discussions)
|
||||
18
.github/workflows/release-npm.yml
vendored
Normal file
18
.github/workflows/release-npm.yml
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
name: Publish to NPM
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
publish-npm:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
registry-url: https://registry.npmjs.org
|
||||
- run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
82
.github/workflows/release.yml
vendored
Normal file
82
.github/workflows/release.yml
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
name: Create Release
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Create Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Get the version
|
||||
id: get_version
|
||||
run: echo "VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
|
||||
|
||||
# 获取当前版本贡献者
|
||||
- name: Fetch Contributors
|
||||
id: contributors
|
||||
run: |
|
||||
USERNAME_LIST=""
|
||||
|
||||
# 获取完整的提交历史
|
||||
git fetch --prune --unshallow
|
||||
|
||||
# 按日期排序标签，获取上一个标签
|
||||
PREVIOUS_TAG=$(git for-each-ref --sort=-creatordate --format '%(refname:short)' refs/tags | sed -n 2p)
|
||||
|
||||
# 获取当前标签
|
||||
CURRENT_TAG=${GITHUB_REF#refs/tags/}
|
||||
|
||||
echo "Previous Tag: $PREVIOUS_TAG"
|
||||
echo "Current Tag: $CURRENT_TAG"
|
||||
|
||||
for COMMIT_SHA in $(git log ${PREVIOUS_TAG}...$CURRENT_TAG --pretty=format:"%H")
|
||||
do
|
||||
USER=$(curl -s -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
|
||||
https://api.github.com/repos/${GITHUB_REPOSITORY}/commits/$COMMIT_SHA \
|
||||
| jq -r '.author.login')
|
||||
if [ "$USER" != "null" ] && [ ! -z "$USER" ]; then
|
||||
USERNAME_LIST="$USERNAME_LIST @$USER"
|
||||
fi
|
||||
done
|
||||
USERNAME_LIST=$(echo $USERNAME_LIST | tr ' ' '\n' | sort -u | tr '\n' ' ')
|
||||
echo "usernames=$USERNAME_LIST" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Determine Prerelease
|
||||
id: prerelease
|
||||
run: |
|
||||
if [[ ${{ github.ref }} =~ - ]]; then
|
||||
echo "Setting prerelease to true"
|
||||
echo "prerelease=true" >> $GITHUB_OUTPUT
|
||||
else
|
||||
echo "Setting prerelease to false"
|
||||
echo "prerelease=false" >> $GITHUB_OUTPUT
|
||||
fi
|
||||
|
||||
- name: Create Zip File
|
||||
id: asset
|
||||
run: |
|
||||
DIR_NAME="layui-${{ env.VERSION }}"
|
||||
mkdir -p $DIR_NAME/layui
|
||||
mv dist layui
|
||||
mv layui $DIR_NAME/
|
||||
mv examples/introduce/* $DIR_NAME/
|
||||
zip -r $DIR_NAME.zip $DIR_NAME
|
||||
echo "filename=$DIR_NAME" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: GH Release
|
||||
id: create_release
|
||||
uses: softprops/action-gh-release@v0.1.15
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
body: |
|
||||
- **更新日志**: https://layui.dev/docs/2/versions.html#${{ env.VERSION }}
|
||||
- **本次贡献**: ${{ steps.contributors.outputs.usernames }} 🎉
|
||||
prerelease: ${{ steps.prerelease.outputs.prerelease }}
|
||||
files: ${{ steps.asset.outputs.filename }}.zip
|
||||
@ -13,6 +13,7 @@
|
||||
其中，标题应尽量言简意赅（一句话概括议题），其他表单项则尽量将您所遇到的问题描述详细。
|
||||
|
||||
> **若 Issue 未遵循模板规范仔细填写，可能将无法获得相关回答，敬请知晓和理解**
|
||||
> 更多细节可参考：1. [**提问的智慧**](https://github.com/tvvocold/How-To-Ask-Questions-The-Smart-Way)、2. [**请提供最小重现**](https://antfu.me/posts/why-reproductions-are-required-zh)
|
||||
|
||||
## 对接
|
||||
|
||||
|
||||
20
SECURITY.md
Normal file
20
SECURITY.md
Normal file
@ -0,0 +1,20 @@
|
||||
# Security Policy
|
||||
|
||||
## Supported Versions
|
||||
|
||||
Use this section to tell people about which versions of your project are
|
||||
currently being supported with security updates.
|
||||
|
||||
| Version | Supported |
|
||||
| ------- | ------------------ |
|
||||
| 2.9.x | :white_check_mark: |
|
||||
| 2.8.x | :white_check_mark: |
|
||||
| < 2.8.0 | :x: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
Use this section to tell people how to report a vulnerability.
|
||||
|
||||
Tell them where to go, how often they can expect to get an update on a
|
||||
reported vulnerability, what to expect if the vulnerability is accepted or
|
||||
declined, etc.
|
||||
2
dist/css/layui.css
vendored
2
dist/css/layui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/layui.css.map
vendored
2
dist/css/layui.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/layui.js
vendored
2
dist/layui.js
vendored
File diff suppressed because one or more lines are too long
2
dist/layui.js.map
vendored
2
dist/layui.js.map
vendored
File diff suppressed because one or more lines are too long
@ -140,13 +140,16 @@
|
||||
<td>delay</td>
|
||||
<td>
|
||||
|
||||
延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效
|
||||
延迟触发的毫秒数。当 `trigger: 'hover'` 时才生效。示例：
|
||||
|
||||
- `delay: 300` : 表示显示与隐藏的延迟时间均为 300 毫秒
|
||||
- `delay: [200, 300]` <sup>2.9.2+</sup> : 数组成员值分别表示显示延迟时间和隐藏延迟时间
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>number/array</td>
|
||||
<td>
|
||||
|
||||
`300`
|
||||
`[200, 300]`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -9,9 +9,27 @@ toc: true
|
||||
|
||||
<h2 id="2.9.x" lay-toc="{title: '2.9.x'}"></h2>
|
||||
|
||||
<h2 id="v2.9.2-rc.1" class="ws-anchor">
|
||||
v2.9.2-rc.1
|
||||
<!-- <span class="layui-badge-rim" style="color: #16b777;">稳定版</span> -->
|
||||
<span class="layui-badge-rim">2023-12-16</span>
|
||||
</h2>
|
||||
|
||||
- #### 移动端的改进
|
||||
- 新增 slider, layer, carousel, laydate, rate, colorpicker 手势操作支持 #1446 @Sight-wcg
|
||||
- #### table
|
||||
- 修复 IE 下的报错问题 #1453 @Sight-wcg
|
||||
- #### form
|
||||
- 修复 `select` 在 IE10+ 中的兼容性问题 #1452 @Sight-wcg
|
||||
- #### dropdown
|
||||
- 增强 `delay` 选项，支持设置 显示/隐藏 的延迟时间 #1454 @Sight-wcg
|
||||
|
||||
### 下载： [layui-v2.9.2-rc.1.zip](https://gitee.com/layui/layui/attach_files/1615403/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="2.9.1" class="ws-anchor">
|
||||
2.9.1
|
||||
<!-- <span class="layui-badge-rim" style="color: #16b777;">稳定版</span> -->
|
||||
<span class="layui-badge-rim">2023-12-11</span>
|
||||
</h2>
|
||||
|
||||
|
||||
102
examples/introduce/test.html
Normal file
102
examples/introduce/test.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>测试 - Layui</title>
|
||||
<link rel="stylesheet" href="layui/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="layui-progress" style="margin: 15px 0 30px;">
|
||||
<div class="layui-progress-bar" lay-percent="100%"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn" test-active="test-form">一个按钮</button>
|
||||
<button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
|
||||
</div>
|
||||
|
||||
<blockquote class="layui-elem-quote" style="margin-top: 30px;">
|
||||
<div class="layui-text">
|
||||
<ul>
|
||||
<li>您当前预览的是：<span>Layui-v<span id="version"></span></span></li>
|
||||
<li>Layui 是一套开源免费的 Web UI（界面）组件库。这是一个极其简洁的演示页面</li>
|
||||
</ul>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- body 末尾处引入 layui -->
|
||||
<script src="layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var laydate = layui.laydate;
|
||||
var util = layui.util;
|
||||
|
||||
// 欢迎信息
|
||||
layer.msg('Hello World', {icon: 6});
|
||||
|
||||
// 输出版本号
|
||||
lay('#version').html(layui.v);
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: '#test2',
|
||||
value: new Date(),
|
||||
isInitValue: true
|
||||
});
|
||||
|
||||
// 触发事件
|
||||
util.on('test-active', {
|
||||
'test-form': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
resize: false,
|
||||
shadeClose: true,
|
||||
area: '350px',
|
||||
title: 'layer + form',
|
||||
content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">',
|
||||
'<li class="layui-form-item">',
|
||||
'<label class="layui-form-label">输入框</label>',
|
||||
'<div class="layui-input-block">',
|
||||
'<input class="layui-input" lay-verify="required" name="field1">',
|
||||
'</div>',
|
||||
'</li>',
|
||||
'<li class="layui-form-item">',
|
||||
'<label class="layui-form-label">选择框</label>',
|
||||
'<div class="layui-input-block">',
|
||||
'<select name="field2">',
|
||||
'<option value="A">A</option>',
|
||||
'<option value="B">B</option>',
|
||||
'<select>',
|
||||
'</div>',
|
||||
'</li>',
|
||||
'<li class="layui-form-item" style="text-align:center;">',
|
||||
'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>',
|
||||
'</li>',
|
||||
'</ul>'].join(''),
|
||||
success: function(layero, index){
|
||||
layero.find('.layui-layer-content').css('overflow', 'visible');
|
||||
|
||||
form.render().on('submit(*)', function(data){
|
||||
var field = data.field;
|
||||
|
||||
// 显示填写的表单
|
||||
layer.msg(util.escape(JSON.stringify(field)), {
|
||||
icon: 1
|
||||
});
|
||||
// layer.close(index); //关闭层
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
11
examples/introduce/免责声明.html
Normal file
11
examples/introduce/免责声明.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>免责声明</title>
|
||||
<script>location.href = 'https://gitee.com/layui/layui/blob/main/DISCLAIMER.md';</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
11
examples/introduce/官方文档.html
Normal file
11
examples/introduce/官方文档.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>官方文档</title>
|
||||
<script>location.href = 'https://layui.github.io';</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -116,7 +116,8 @@ exports.release = gulp.series(
|
||||
return gulp.src('./release/introduce/**/*')
|
||||
.pipe(replace(/[^'"]+(\/layui\.css)/, 'layui/css$1')) // 替换 css 引入路径中的本地 path
|
||||
.pipe(replace(/[^'"]+(\/layui\.js)/, 'layui$1')) // 替换 js 引入路径中的本地 path
|
||||
.pipe(gulp.dest(rlsDirname));
|
||||
.pipe(gulp.dest(rlsDirname)) // 用于本地
|
||||
.pipe(gulp.dest('./examples/introduce')); // 用于 Github actions
|
||||
},
|
||||
exports.cp, // 复制 dist 目录文件
|
||||
() => { // 生成 ZIP 压缩包
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"version": "2.9.1",
|
||||
"version": "2.9.2-rc.1",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"keywords": [
|
||||
"layui",
|
||||
|
||||
@ -1520,7 +1520,8 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
.layui-rate li{margin-top: 0 !important;}
|
||||
.layui-rate li i.layui-icon{ font-size: 20px; color: #ffb800;}
|
||||
.layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate li i:hover,
|
||||
.layui-rate-hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
|
||||
|
||||
/** 颜色选择器 **/
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
};
|
||||
|
||||
var Layui = function(){
|
||||
this.v = '2.9.1'; // Layui 版本号
|
||||
this.v = '2.9.2-rc.1'; // Layui 版本号
|
||||
};
|
||||
|
||||
// 识别预先可能定义的指定全局对象
|
||||
|
||||
@ -331,13 +331,27 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
if(options.elem.data('haveEvents')) return;
|
||||
|
||||
// 移入移出容器
|
||||
options.elem.on('mouseenter', function(){
|
||||
options.elem.on('mouseenter touchstart', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
clearInterval(that.timer);
|
||||
}).on('mouseleave', function(){
|
||||
}).on('mouseleave touchend', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
that.autoplay();
|
||||
});
|
||||
|
||||
var touchEl = options.elem;
|
||||
var isVertical = options.anim === 'updown';
|
||||
lay.touchSwipe(touchEl, {
|
||||
onTouchEnd: function(e, state){
|
||||
var duration = Date.now() - state.timeStart;
|
||||
var distance = isVertical ? state.distanceY : state.distanceX;
|
||||
var speed = distance / duration;
|
||||
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(distance) > touchEl[isVertical ? 'height' : 'width']() / 3;
|
||||
if(shouldSwipe){
|
||||
that.slide(distance > 0 ? '' : 'sub');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
options.elem.data('haveEvents', true);
|
||||
};
|
||||
|
||||
@ -567,6 +567,32 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
change(hsb.h, hsb.s, hsb.b, a);
|
||||
})
|
||||
});
|
||||
|
||||
if(!lay.touchEventsSupported()) return;
|
||||
// 触摸事件模拟
|
||||
layui.each([
|
||||
{elem: side, eventType: 'click'},
|
||||
{elem: alphacolor, eventType: 'click'},
|
||||
{elem: basis, eventType: 'mousedown'}
|
||||
], function(i, obj){
|
||||
lay.touchSwipe(obj.elem, {
|
||||
onTouchMove: function(e){
|
||||
touchHandler(e, obj.eventType)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function touchHandler(event, eventType) {
|
||||
var pointer = event.touches[0];
|
||||
var simulatedEvent = document.createEvent("MouseEvent");
|
||||
|
||||
simulatedEvent.initMouseEvent(eventType,
|
||||
true, true, window, 1,
|
||||
pointer.screenX, pointer.screenY,pointer.clientX, pointer.clientY,
|
||||
false, false, false, false, 0, null
|
||||
);
|
||||
pointer.target.dispatchEvent(simulatedEvent);
|
||||
}
|
||||
};
|
||||
|
||||
//颜色选择器hsb转换
|
||||
|
||||
@ -101,7 +101,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||
isAllowSpread: true, // 是否允许菜单组展开收缩
|
||||
isSpreadItem: true, // 是否初始展开子菜单
|
||||
data: [], // 菜单数据结构
|
||||
delay: 300, // 延迟关闭的毫秒数，若 trigger 为 hover 时才生效
|
||||
delay: [200, 300], // 延时显示或隐藏的毫秒数，若为 number 类型，则表示显示和隐藏的延迟时间相同，trigger 为 hover 时才生效
|
||||
shade: 0, // 遮罩
|
||||
accordion: false // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
|
||||
};
|
||||
@ -388,6 +388,17 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||
}
|
||||
lay('.' + STR_ELEM_SHADE).remove();
|
||||
};
|
||||
|
||||
Class.prototype.normalizedDelay = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var delay = [].concat(options.delay);
|
||||
|
||||
return {
|
||||
show: delay[0],
|
||||
hide: delay[1] !== undefined ? delay[1] : delay[0]
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟删除视图
|
||||
Class.prototype.delayRemove = function(){
|
||||
@ -397,7 +408,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||
|
||||
thisModule.timer = setTimeout(function(){
|
||||
that.remove();
|
||||
}, options.delay);
|
||||
}, that.normalizedDelay().hide);
|
||||
};
|
||||
|
||||
// 事件
|
||||
@ -410,13 +421,23 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||
|
||||
// 解除上一个事件
|
||||
if(that.prevElem) that.prevElem.off(options.trigger, that.prevElemCallback);
|
||||
|
||||
// 是否鼠标移入时触发
|
||||
var isMouseEnter = options.trigger === 'mouseenter';
|
||||
|
||||
// 记录被绑定的元素及回调
|
||||
that.prevElem = options.elem;
|
||||
that.prevElemCallback = function(e){
|
||||
clearTimeout(thisModule.timer);
|
||||
that.e = e;
|
||||
that.render();
|
||||
|
||||
// 若为鼠标移入事件，则延迟触发
|
||||
isMouseEnter ? (
|
||||
thisModule.timer = setTimeout(function(){
|
||||
that.render();
|
||||
}, that.normalizedDelay().show)
|
||||
) : that.render();
|
||||
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
@ -424,8 +445,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||
options.elem.on(options.trigger, that.prevElemCallback);
|
||||
|
||||
// 如果是鼠标移入事件
|
||||
if(options.trigger === 'mouseenter'){
|
||||
// 直行鼠标移出事件
|
||||
if (isMouseEnter) {
|
||||
// 执行鼠标移出事件
|
||||
options.elem.on('mouseleave', function(){
|
||||
that.delayRemove();
|
||||
});
|
||||
|
||||
@ -626,7 +626,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||
};
|
||||
|
||||
if(isSearch){
|
||||
input.on('input propertychange', search).on('blur', function(e){
|
||||
// #1449: IE10 和 11 中，带有占位符的 input 元素获得/失去焦点时，会触发 input 事件
|
||||
var eventsType = 'input propertychange';
|
||||
if(lay.ie && (lay.ie === '10' || lay.ie === '11') && input.attr('placeholder')){
|
||||
eventsType = 'keyup';
|
||||
}
|
||||
input.on(eventsType, search).on('blur', function(e){
|
||||
var selectedIndex = select[0].selectedIndex;
|
||||
|
||||
thatInput = input; // 当前的 select 中的 input 元素
|
||||
|
||||
@ -505,6 +505,115 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测是否支持 Passive Event Listeners
|
||||
* 引用自 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
* @type {boolean}
|
||||
*/
|
||||
lay.passiveSupported = function(){
|
||||
var passiveSupported = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function() {
|
||||
passiveSupported = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('test', null, opts);
|
||||
window.removeEventListener('test', null, opts);
|
||||
} catch (err) {}
|
||||
return passiveSupported;
|
||||
}();
|
||||
|
||||
/**
|
||||
* 是否支持 touch 事件
|
||||
*/
|
||||
lay.touchEventsSupported = function(){
|
||||
return 'ontouchstart' in window;
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef touchSwipeState
|
||||
* @prop {{x: number,y: number}} pointerStart - 初始坐标
|
||||
* @prop {{x: number,y: number}} pointerEnd - 结束坐标
|
||||
* @prop {number} distanceX - X 轴移动距离
|
||||
* @prop {number} distanceY - Y 轴移动距离
|
||||
* @prop {'none'|'right'|'left'|'up'|'down'} direction - 滑动方向
|
||||
* @prop {Date} timeStart 开始时间
|
||||
*/
|
||||
/**
|
||||
* @callback touchSwipeCallback
|
||||
* @param {TouchEvent} e 滑动事件
|
||||
* @param {touchSwipeState} state 滑动相关的状态
|
||||
*/
|
||||
/**
|
||||
* 基于 touch 事件的触摸滑动
|
||||
* @param {string | HTMLElement | JQuery} elem - HTML 元素
|
||||
* @param {{onTouchStart?: touchSwipeCallback, onTouchMove?: touchSwipeCallback, onTouchEnd?: touchSwipeCallback}} opts - 配置项
|
||||
*/
|
||||
lay.touchSwipe = function(elem, opts){
|
||||
var options = opts
|
||||
var targetElem = lay(elem)[0];
|
||||
|
||||
if(!targetElem || !lay.touchEventsSupported()) return;
|
||||
|
||||
var state = {
|
||||
pointerStart: {x:0, y:0},
|
||||
pointerEnd: {x:0, y:0},
|
||||
distanceX: 0,
|
||||
distanceY: 0,
|
||||
direction:'none', // 'up','down','left','right','none
|
||||
timeStart: null
|
||||
}
|
||||
|
||||
var onStart = function(e){
|
||||
if(e.touches.length !== 1) return;
|
||||
bindEvents();
|
||||
state.timeStart = Date.now();
|
||||
state.pointerStart.x = state.pointerEnd.x = e.touches[0].clientX;
|
||||
state.pointerStart.y = state.pointerEnd.y = e.touches[0].clientY;
|
||||
|
||||
options.onTouchStart && options.onTouchStart(e, state);
|
||||
}
|
||||
|
||||
var onMove = function(e){
|
||||
e.preventDefault();
|
||||
state.pointerEnd.x = e.touches[0].clientX;
|
||||
state.pointerEnd.y = e.touches[0].clientY;
|
||||
state.distanceX = state.pointerStart.x - state.pointerEnd.x;
|
||||
state.distanceY = state.pointerStart.y - state.pointerEnd.y;
|
||||
if(Math.abs(state.distanceX) > Math.abs(state.distanceY)){
|
||||
state.direction = state.distanceX > 0 ? 'left' : 'right';
|
||||
}else{
|
||||
state.direction = state.distanceY > 0 ? 'up' : 'down';
|
||||
}
|
||||
options.onTouchMove && options.onTouchMove(e, state);
|
||||
}
|
||||
|
||||
var onEnd = function(e){
|
||||
options.onTouchEnd && options.onTouchEnd(e, state);
|
||||
unbindEvents();
|
||||
}
|
||||
|
||||
var bindEvents = function(){
|
||||
targetElem.addEventListener('touchmove', onMove, lay.passiveSupported ? { passive: false} : false);
|
||||
targetElem.addEventListener('touchend', onEnd);
|
||||
targetElem.addEventListener('touchcancel', onEnd);
|
||||
}
|
||||
|
||||
var unbindEvents = function(){
|
||||
targetElem.removeEventListener('touchmove', onMove);
|
||||
targetElem.removeEventListener('touchend', onEnd, lay.passiveSupported ? { passive: false} : false);
|
||||
targetElem.removeEventListener('touchcancel', onEnd);
|
||||
}
|
||||
|
||||
// 防止事件重复绑定
|
||||
if(targetElem.__lay_touchswipe_cb_){
|
||||
targetElem.removeEventListener('touchstart', targetElem.__lay_touchswipe_cb_);
|
||||
}
|
||||
targetElem.__lay_touchswipe_cb_ = onStart;
|
||||
targetElem.addEventListener('touchstart', onStart);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* lay 元素操作
|
||||
|
||||
@ -1514,7 +1514,8 @@
|
||||
if(haveSpan[0]) haveSpan.remove();
|
||||
elemHeader[2].appendChild(span);
|
||||
|
||||
lay(ul).find('ol').each(function(i){
|
||||
var olElem = lay(ul).find('ol');
|
||||
olElem.each(function(i){
|
||||
var ol = this;
|
||||
//选择时分秒
|
||||
lay(ol).find('li').on('click', function(){
|
||||
@ -1537,6 +1538,12 @@
|
||||
that.setBtnStatus();
|
||||
});
|
||||
});
|
||||
|
||||
if(lay.touchEventsSupported()){
|
||||
olElem.on('touchstart', function(){
|
||||
this.style['overflow-y'] = 'auto';
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
@ -1604,6 +1604,28 @@ layer.photos = function(options, loop, key){
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 滑动切换图片事件，仅限 layui 中
|
||||
if(window.layui || window.lay){
|
||||
var lay = window.layui.lay || window.lay;
|
||||
var touchEndCallback = function(e, state){
|
||||
var duration = Date.now() - state.timeStart;
|
||||
var speed = state.distanceX / duration;
|
||||
var threshold = win.width() / 3;
|
||||
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(state.distanceX) > threshold;
|
||||
if(!shouldSwipe) return;
|
||||
if(state.direction === 'left'){
|
||||
dict.imgnext(true);
|
||||
}else if(state.direction === 'right'){
|
||||
dict.imgprev(true);
|
||||
}
|
||||
}
|
||||
|
||||
$.each([that.shadeo, dict.main], function(i, elem){
|
||||
lay.touchSwipe(elem, {
|
||||
onTouchEnd: touchEndCallback
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 图片预加载
|
||||
@ -1764,7 +1786,7 @@ ready.run = function(_$){
|
||||
// 加载方式
|
||||
window.layui && layui.define ? (
|
||||
layer.ready(),
|
||||
layui.define('jquery', function(exports){ // layui
|
||||
layui.define(['jquery','lay'], function(exports){ // layui
|
||||
layer.path = layui.cache.dir;
|
||||
ready.run(layui.$);
|
||||
|
||||
|
||||
@ -155,8 +155,9 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
var options = that.config;
|
||||
var _ul = that.elemTemp;
|
||||
var wide = _ul.find("i").width();
|
||||
var liElems = _ul.children("li");
|
||||
|
||||
_ul.children("li").each(function(index){
|
||||
liElems.each(function(index){
|
||||
var ind = index + 1;
|
||||
var othis = $(this);
|
||||
|
||||
@ -212,6 +213,55 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
lay.touchSwipe(_ul, {
|
||||
onTouchMove: function(e, state){
|
||||
if(Date.now() - state.timeStart <= 200) return;
|
||||
var pageX = e.touches[0].pageX;
|
||||
var rateElemWidth = _ul.width();
|
||||
var itemElemWidth = rateElemWidth / options.length; // 单颗星的宽度
|
||||
var offsetX = pageX - _ul.offset().left;
|
||||
var num = offsetX / itemElemWidth; // 原始值
|
||||
var remainder = num % 1;
|
||||
var integer = num - remainder;
|
||||
|
||||
// 最终值
|
||||
var score = remainder <= 0.5 && options.half ? integer + 0.5 : Math.ceil(num);
|
||||
if(score > options.length) score = options.length;
|
||||
if(score < 0) score = 0;
|
||||
|
||||
liElems.each(function(index){
|
||||
var iconElem = $(this).children('i');
|
||||
var isActiveIcon = (Math.ceil(score) - index === 1);
|
||||
var needSelect = Math.ceil(score) > index;
|
||||
var shouldHalfIcon = (score - index === 0.5);
|
||||
|
||||
if(needSelect){
|
||||
// 设置选中样式
|
||||
iconElem.addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE);
|
||||
if(options.half && shouldHalfIcon){
|
||||
iconElem.addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID);
|
||||
}
|
||||
}else{
|
||||
// 恢复初始样式
|
||||
iconElem.addClass(ICON_RATE).removeClass(ICON_SOLID_HALF);
|
||||
}
|
||||
|
||||
// 设置缩放样式
|
||||
iconElem.toggleClass('layui-rate-hover', isActiveIcon);
|
||||
});
|
||||
|
||||
// 更新最终值
|
||||
options.value = score;
|
||||
options.setText && options.setText(options.value);
|
||||
},
|
||||
onTouchEnd: function(e, state){
|
||||
if(Date.now() - state.timeStart <= 200) return;
|
||||
_ul.find('i').removeClass('layui-rate-hover');
|
||||
options.choose && options.choose(options.value);
|
||||
options.setText && options.setText(options.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//事件处理
|
||||
|
||||
@ -10,26 +10,26 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
// 外部接口
|
||||
var slider = {
|
||||
config: {}
|
||||
,index: layui.slider ? (layui.slider.index + 10000) : 0
|
||||
config: {},
|
||||
index: layui.slider ? (layui.slider.index + 10000) : 0,
|
||||
|
||||
// 设置全局项
|
||||
,set: function(options){
|
||||
set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
},
|
||||
|
||||
// 事件
|
||||
,on: function(events, callback){
|
||||
on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
};
|
||||
|
||||
// 操作当前实例
|
||||
var thisSlider = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
return {
|
||||
setValue: function(value, index){ // 设置值
|
||||
@ -37,8 +37,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
value = value < options.min ? options.min : value;
|
||||
options.value = value;
|
||||
return that.slide('set', value, index || 0);
|
||||
}
|
||||
,config: options
|
||||
},
|
||||
config: options
|
||||
}
|
||||
};
|
||||
|
||||
@ -65,18 +65,18 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
// 默认配置
|
||||
Class.prototype.config = {
|
||||
type: 'default' //滑块类型，垂直：vertical
|
||||
,min: 0 //最小值
|
||||
,max: 100 //最大值，默认100
|
||||
,value: 0 //初始值，默认为0
|
||||
,step: 1 //间隔值
|
||||
,showstep: false //间隔点开启
|
||||
,tips: true //文字提示，开启
|
||||
,input: false //输入框，关闭
|
||||
,range: false //范围选择，与输入框不能同时开启，默认关闭
|
||||
,height: 200 //配合 type:"vertical" 使用，默认200px
|
||||
,disabled: false //滑块禁用，默认关闭
|
||||
,theme: '#16baaa' //主题颜色
|
||||
type: 'default', //滑块类型，垂直：vertical
|
||||
min: 0, //最小值
|
||||
max: 100, //最大值，默认100
|
||||
value: 0, //初始值，默认为0
|
||||
step: 1, //间隔值
|
||||
showstep: false, //间隔点开启
|
||||
tips: true, //文字提示，开启
|
||||
input: false, //输入框，关闭
|
||||
range: false, //范围选择，与输入框不能同时开启，默认关闭
|
||||
height: 200, //配合 type:"vertical" 使用，默认200px
|
||||
disabled: false, //滑块禁用，默认关闭
|
||||
theme: '#16baaa' //主题颜色
|
||||
};
|
||||
|
||||
//滑块渲染
|
||||
@ -116,9 +116,9 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
options.value[0] = Math.min(options.value[0],options.max);
|
||||
options.value[1] = Math.min(options.value[1],options.max);
|
||||
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100)
|
||||
,scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100)
|
||||
,scale = scaleSec - scaleFir + '%';
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100);
|
||||
var scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100);
|
||||
var scale = scaleSec - scaleFir + '%';
|
||||
scaleFir = scaleFir + '%';
|
||||
scaleSec = scaleSec + '%';
|
||||
} else {
|
||||
@ -143,8 +143,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
'<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
|
||||
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
|
||||
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
var othis = $(options.elem);
|
||||
var hasRender = othis.next('.' + ELEM_VIEW);
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
that.elemTemp = $(temp);
|
||||
@ -204,12 +204,12 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
//划过滑块显示数值
|
||||
var timer;
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
|
||||
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
|
||||
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
|
||||
,tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
|
||||
,left = tipsLeft / sliderWidth * 100
|
||||
,value = $(this).parent().data('value')
|
||||
,tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
|
||||
var sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP);
|
||||
var tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft;
|
||||
var left = tipsLeft / sliderWidth * 100;
|
||||
var value = $(this).parent().data('value');
|
||||
var tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
|
||||
|
||||
clearTimeout(timer);
|
||||
@ -235,17 +235,17 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
//滑块滑动
|
||||
Class.prototype.slide = function(setValue, value, i){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,sliderAct = that.elemTemp
|
||||
,sliderWidth = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var sliderAct = that.elemTemp;
|
||||
var sliderWidth = function(){
|
||||
return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth
|
||||
}
|
||||
,sliderWrap = sliderAct.find('.' + SLIDER_WRAP)
|
||||
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
|
||||
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
|
||||
,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
|
||||
,change = function(offsetValue, index, from){
|
||||
};
|
||||
var sliderWrap = sliderAct.find('.' + SLIDER_WRAP);
|
||||
var sliderTxt = sliderAct.next('.' + SLIDER_INPUT);
|
||||
var inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();
|
||||
var step = 100 / ((options.max - options.min) / Math.ceil(options.step));
|
||||
var change = function(offsetValue, index, from){
|
||||
if(Math.ceil(offsetValue) * step > 100){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
@ -254,8 +254,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
offsetValue = offsetValue > 100 ? 100: offsetValue;
|
||||
offsetValue = offsetValue < 0 ? 0: offsetValue;
|
||||
sliderWrap.eq(index).css((options.type === 'vertical' ?'bottom':'left'), offsetValue + '%');
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft)
|
||||
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft);
|
||||
var secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
if(options.type === 'vertical'){
|
||||
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
|
||||
firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height());
|
||||
@ -281,8 +281,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
//如果开启范围选择，则返回数组值
|
||||
if(options.range){
|
||||
var arrValue = [
|
||||
sliderWrap.eq(0).data('value')
|
||||
,sliderWrap.eq(1).data('value')
|
||||
sliderWrap.eq(0).data('value'),
|
||||
sliderWrap.eq(1).data('value')
|
||||
];
|
||||
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序
|
||||
}
|
||||
@ -292,27 +292,40 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
// 值完成选中的事件
|
||||
if(from === 'done') options.done && options.done(that.value);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step
|
||||
,left = Math.round(oldLeft) * step;
|
||||
};
|
||||
var valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step;
|
||||
var left = Math.round(oldLeft) * step;
|
||||
if(value == sliderWidth()){
|
||||
left = Math.ceil(oldLeft) * step;
|
||||
}
|
||||
return left;
|
||||
}
|
||||
};
|
||||
|
||||
//拖拽元素
|
||||
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''))
|
||||
,createMoveElem = function(move, up){
|
||||
var elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''));
|
||||
var createMoveElem = function(sliderBtnElem, move, up){
|
||||
var upCall = function(){
|
||||
up && up();
|
||||
// 移动端延时一秒关闭
|
||||
up && up(lay.touchEventsSupported() ? 1000 : 0);
|
||||
elemMove.remove();
|
||||
options.done && options.done(that.value);
|
||||
// 移动端
|
||||
if (lay.touchEventsSupported()) {
|
||||
sliderBtnElem[0].removeEventListener('touchmove', move, lay.passiveSupported ? { passive: false } : false);
|
||||
sliderBtnElem[0].removeEventListener('touchend', upCall);
|
||||
sliderBtnElem[0].removeEventListener('touchcancel', upCall);
|
||||
}
|
||||
};
|
||||
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
|
||||
elemMove.on('mousemove', move);
|
||||
elemMove.on('mouseup', upCall).on('mouseleave', upCall);
|
||||
// 移动端
|
||||
if (lay.touchEventsSupported()) {
|
||||
sliderBtnElem[0].addEventListener('touchmove', move, lay.passiveSupported ? { passive: false } : false);
|
||||
sliderBtnElem[0].addEventListener('touchend', upCall);
|
||||
sliderBtnElem[0].addEventListener('touchcancel', upCall);
|
||||
}
|
||||
};
|
||||
|
||||
//动态赋值
|
||||
@ -321,11 +334,15 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
//滑块滑动
|
||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||
var othis = $(this);
|
||||
othis.on('mousedown', function(e){
|
||||
othis.on('mousedown touchstart', function(e){
|
||||
e = e || window.event;
|
||||
if(e.type === 'touchstart'){
|
||||
e.clientX = e.originalEvent.touches[0].clientX;
|
||||
e.clientY = e.originalEvent.touches[0].clientY;
|
||||
}
|
||||
|
||||
var oldleft = othis.parent()[0].offsetLeft
|
||||
,oldx = e.clientX;
|
||||
var oldleft = othis.parent()[0].offsetLeft;
|
||||
var oldx = e.clientX;
|
||||
if(options.type === 'vertical'){
|
||||
oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
|
||||
oldx = e.clientY;
|
||||
@ -333,6 +350,10 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
var move = function(e){
|
||||
e = e || window.event;
|
||||
if (e.type === 'touchmove') {
|
||||
e.clientX = e.touches[0].clientX;
|
||||
e.clientY = e.touches[0].clientY;
|
||||
}
|
||||
var left = oldleft + (options.type === 'vertical' ? (oldx - e.clientY) : (e.clientX - oldx));
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth())left = sliderWidth();
|
||||
@ -343,12 +364,14 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
var up = function(){
|
||||
var up = function(delay){
|
||||
othis.removeClass(ELEM_HOVER);
|
||||
sliderAct.find('.' + SLIDER_TIPS).hide();
|
||||
setTimeout(function(){
|
||||
sliderAct.find('.' + SLIDER_TIPS).hide();
|
||||
}, delay);
|
||||
};
|
||||
|
||||
createMoveElem(move, up)
|
||||
createMoveElem(othis, move, up)
|
||||
});
|
||||
});
|
||||
|
||||
@ -417,8 +440,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
|
||||
@ -82,7 +82,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var resolveTplStr = function(templet){
|
||||
try{
|
||||
return lay(templet).html();
|
||||
}catch{
|
||||
}catch(err){
|
||||
return templet;
|
||||
}
|
||||
}
|
||||
@ -558,7 +558,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
layui.each(options.cols, function(i1, item1) {
|
||||
layui.each(item1, function(i2, item2) {
|
||||
var key = [index, i1, i2].join('-');
|
||||
var val = item2.width ? ['width: ', item2.width, 'px'].join('') : '';
|
||||
var val = ['width: ', (item2.width || options.cellMinWidth), 'px'].join('');
|
||||
text.push('.laytable-cell-'+ key +'{'+ val +'}');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user