Browse Source

新增留言板,主题色设置

master
FE_Daizhen 4 years ago
parent
commit
118c07cf48
  1. 40
      index.html
  2. 73
      plugins/css/conponent.css
  3. BIN
      plugins/img/icon-close.png
  4. BIN
      plugins/img/icon-msg_1.png
  5. 229
      plugins/js/conponents.js
  6. 5
      plugins/js/jquery-1.11.3.js
  7. 2
      plugins/layer/layer.js
  8. 2
      plugins/layer/mobile/layer.js
  9. 1
      plugins/layer/mobile/need/layer.css
  10. BIN
      plugins/layer/theme/default/icon-ext.png
  11. BIN
      plugins/layer/theme/default/icon.png
  12. 1
      plugins/layer/theme/default/layer.css
  13. BIN
      plugins/layer/theme/default/loading-0.gif
  14. BIN
      plugins/layer/theme/default/loading-1.gif
  15. BIN
      plugins/layer/theme/default/loading-2.gif

40
index.html

@ -5,18 +5,14 @@
<title>组件库</title>
<link rel="stylesheet" type="text/css" href="plugins/css/animate.min.css"/>
<style type="text/css">
div.wow{
margin: 10px auto;
padding: 150px 0;
width: 800px;
color: #FFF;
font-size: 40px;
text-align: center;
}
div.wow{margin: 10px auto;padding: 150px 0;width: 800px;color: #FFF;font-size: 40px;text-align: center;}
</style>
<script src="plugins/js/wow.min.js"></script>
<script src="plugins/js/conponents.js"></script>
</head>
<body style="padding-top: 1000px;">
<!-- 生产环境--start --><div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div>
<!-- 生产环境--start -->
<div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div>
<div class="wow animate__backInRight" style="background:#A70">animate__backInRight</div>
<div class="wow animate__bounceInLeft" style="background:#950">animate__bounceInLeft</div>
<div class="wow animate__bounceInRight" style="background:#C9C">animate__bounceInRight</div>
@ -29,20 +25,15 @@
<div class="wow animate__zoomIn" style="background:#029">animate__zoomIn</div>
<div class="wow animate__slideInLeft" style="background:#4AF">animate__slideInLeft</div>
<div class="wow animate__slideInRight" style="background:#26A">animate__slideInRight</div>
<script src="plugins/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/js/conponents.js"></script>
<script type="text/javascript">
/**
* 页面滚动动画
* class="wow animate__zoomIn" => wow必须,animate__zoomIn动画名称,可参考animate.css(https://animate.style/)
*
**/
new WOW({
animateClass: 'animate__animated'
}).init();
/**
* 悬浮组件
* fixedStyle: 组件类型;可选值 'circle'
@ -50,26 +41,33 @@
**/
var fixed = new Fixed();
fixed.init({
fixedStyle: '',
themeColor: '#4BE', // 主题色
fixedStyle: ['circle'], // 样式,形状:'circle' ;风格: ''
dataValue: {
feedback: '',
phone: '0551-6668388',
vxQrcode: 'plugins/img/icon-vx_1.1.png'
vxQrcode: 'plugins/img/icon-vx_1.1.png',
message: ''
},
// 留言提交
submitFn: function(opt) {
console.log(opt);
}
});
</script>
<!-- 生产环境--end -->
<!-- 演示内容--start -->
<input onclick="newFixed()" style="position: fixed;top:20px;background-color: #3AF;color:#FFF" type="button" value="默认" />
<input onclick="newFixed('circle')" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" />
<input onclick="newFixed(['circle'])" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" />
<script type="text/javascript">
function newFixed(style) {
fixed = null
document.getElementsByClassName('conponent_fixed')[0].remove();
fixed = new Fixed();
fixed.init({
fixedStyle: style ? style : 'default'
fixedStyle: style ? style : ['default']
});
}
</script>

73
plugins/css/conponent.css

@ -151,6 +151,9 @@
background-image: url('../img/icon-vx_1.1.png');
/* background-image: url('../img/icon-qrcode_1.png'); */
}
.conponent_fixed_item.message .icon{
background-image: url('../img/icon-msg_1.png');
}
.conponent_fixed_item.phone .icon{
background-image: url('../img/icon-phone_1.png');
}
@ -198,3 +201,73 @@
margin-top: 8px;
border-radius: 50%;
}
/* 留言板 */
.conponent_dialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(3, 3, 2, .8);
z-index: 99999;
}
.conponent_dialog_box{
position: relative;
margin: 30vh auto 0;
padding: 10px 30px;
width: 40%;
border-radius: 8px;
background-color: #FFF;
}
.conponent_dialog_box .title{
padding: 15px 0;
display: block;
text-align: left;
font-size: 20px;
color: #333;
}
.conponent_dialog_box .context{
padding-bottom: 20px;
text-align: left;
color: #333;
}
.conponent_dialog_box .input{
margin-bottom: 12px;
padding: 8px 12px;
display: block;
width: 100%;
border: 1px solid #E5E5E5;
border-radius: 4px;
box-sizing: border-box;
}
.conponent_dialog_box .textarea{
padding: 12px;
display: block;
resize: none;
width: 100%;
height: 100px;
border: 1px solid #E5E5E5;
border-radius: 4px;
box-sizing: border-box;
}
.conponent_dialog_box .btn{
display: inline-block;
margin-top: 15px;
padding: 10px 40px;
background: #3454BE;
color: #FFF;
border-radius: 6px;
font-size: 16px;
line-height: 1;
}
.conponent_dialog_box .close{
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
background: url('../img/icon-close.png') no-repeat center center;
background-size: 80%;
}

BIN
plugins/img/icon-close.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
plugins/img/icon-msg_1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

229
plugins/js/conponents.js

@ -1,7 +1,7 @@
/**
* 常用组件库
*
**/
**/
var linkCss_1 = document.createElement('link')
linkCss_1.setAttribute('rel', 'stylesheet')
@ -12,10 +12,20 @@ linkCss_2.setAttribute('rel', 'stylesheet')
linkCss_2.setAttribute('href', 'plugins/css/conponent.css')
document.head.appendChild(linkCss_2)
var linkJS_1 = document.createElement('script')
linkJS_1.setAttribute('src', 'plugins/js/jquery-1.11.3.js')
linkJS_1.setAttribute('type', 'text/javascript')
linkJS_1.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_1)
var linkJS_2 = document.createElement('script')
linkJS_2.setAttribute('src', 'plugins/layer/layer.js')
linkJS_2.setAttribute('type', 'text/javascript')
linkJS_2.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_2)
/* 对象继承 */
function extend(defaultVal, newVal) {
for(var e in newVal) {
for (var e in newVal) {
defaultVal[e] = newVal[e]
}
}
@ -25,65 +35,143 @@ function extend(defaultVal, newVal) {
function Fixed() {
this.fixed = null
this.setting = {
fixedStyle: 'default',
hover: 'text', // 悬浮显示文字或者高亮图标
themeColor: '#3454BE', // 主题色
fixedStyle: ['default'], // 样式,形状:'circle' ;风格: ''
dataValue: {
phone: '0551-6668888',
vxQrcode: 'plugins/img/icon-qrcode_1.png'
}
// 置顶默认显示,其他可选填,
feedback: '', // 反馈
phone: '0551-6668888', // 电话号码
vxQrcode: 'plugins/img/icon-qrcode_1.png', // 二维码
message: '' // 留言
},
submitFn: function() {}
}
}
// 初始化
Fixed.prototype.init = function(opt){
Fixed.prototype.init = function(opt) {
extend(this.setting, opt)
this.create()
this.addEvent()
}
// 创建元素
Fixed.prototype.create = function() {
var FixedArray = {
// 反馈
feedback: {
hoverText: `
<div class="conponent_fixed_item feedback">
<div class="item">
<span class="icon"></span>
<span class="text">意见<br />反馈</span>
</div>
</div>
`,
hoverIcon: ``
},
// 二维码 // <span class="icon_hover"></span>
vxQrcode: {
hoverText: `
<div class="conponent_fixed_item qrcode">
<div class="item">
<span class="icon"></span>
<span class="text word_2">公众号</span>
</div>
<div class="pop">
<div class="img">
<p>微信公众号</p>
<img src="${this.setting.dataValue.vxQrcode}" alt="">
</div>
</div>
</div>
`,
hoverIcon: ``
},
// 电话
phone: {
hoverText: `
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
</div>
<div class="pop">
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
</div>
</div>
`,
hoverIcon: ``
},
// 留言板
message: {
hoverText: `
<div class="conponent_fixed_item message">
<div class="item" id="showDialog">
<span class="icon"></span>
<span class="text word_2">留言</span>
</div>
<div id="conponentDialog" class="conponent_dialog" style="display:none;">
<div class="conponent_dialog_box">
<span id="dialogClose" class="close"></span>
<div class="title">留言板</div>
<div class="context">
<input class="input" id="msgName" placeholder="请输入姓名" />
<input class="input" id="msgTel" placeholder="请输入手机号码" />
<textarea class="textarea" id="msgText" row="4" placeholder="请输入留言内容"></textarea>
<button class="btn" id="ahbmzSubmit" style="background-color: ${this.setting.themeColor}">提交</button>
</div>
</div>
</div>
</div>
`,
hoverIcon: ``
},
// 置顶
totop: {
hoverText: `
<div class="conponent_fixed_item totop">
<div class="item">
<span class="icon"></span>
<span class="text word_2">置顶</span>
</div>
</div>
<style>
.conponent_fixed_item:hover {
color: #FFF;
background-color: ${this.setting.themeColor};
}
</style>
`,
hoverIcon: ``
}
}
var that = this
this.fixed = document.createElement('div')
this.fixed.className = 'conponent_fixed'
this.fixed.innerHTML = `
<div class="conponent_fixed_item feedback">
<div class="item">
<span class="icon"></span>
<span class="text">意见<br />反馈</span>
</div>
</div>
<div class="conponent_fixed_item qrcode">
<div class="item">
<span class="icon"></span>
<span class="icon_hover"></span>
</div>
<div class="pop">
<div class="img">
<p>微信公众号</p>
<img src="${this.setting.dataValue.vxQrcode}" alt="">
</div>
</div>
</div>
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
</div>
<div class="pop">
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
</div>
</div>
<div class="conponent_fixed_item totop">
<div class="item">
<span class="icon"></span>
<span class="text word_2">置顶</span>
</div>
</div>
`
if (this.setting.fixedStyle !== '') {
this.fixed.classList.add(this.setting.fixedStyle)
var htmlText = ''
for (let item in this.setting.dataValue) {
if (this.setting.hover === 'text') {
htmlText += FixedArray[item].hoverText
} else {
htmlText += FixedArray[item].hoverIcon
}
}
htmlText += this.setting.hover === 'text' ? FixedArray['totop'].hoverText : FixedArray['totop'].hoverIcon
this.fixed.innerHTML = htmlText
var styleArr = this.setting.fixedStyle
if (styleArr.length >= 1 || styleArr[0] !== 'default') {
styleArr.forEach(function(item) {
that.fixed.classList.add(item)
})
}
document.body.appendChild(this.fixed)
}
// 事件绑定
Fixed.prototype.addEvent = function() {
var that = this
var totop = document.getElementsByClassName('totop')[0];
var scrollTop = document.documentElement.scrollTop
setToTop();
@ -98,12 +186,12 @@ Fixed.prototype.addEvent = function() {
}
}, 8)
}
window.onscroll = function() {
scrollTop = document.documentElement.scrollTop;
setToTop();
}
/* 置顶*/
function setToTop() {
if (scrollTop > 400) {
totop.classList.add('_show');
@ -113,4 +201,53 @@ Fixed.prototype.addEvent = function() {
totop.classList.remove('_show');
}
}
var conponentDialog = document.getElementById('conponentDialog');
/* 显示留言板 */
var showDialog = document.getElementById('showDialog');
showDialog.onclick = function() {
conponentDialog.style.display = 'block'
}
/* 关闭留言板 */
var dialogClose = document.getElementById('dialogClose');
dialogClose.onclick = function() {
conponentDialog.style.display = 'none'
}
/* 字符串为空*/
function isEmpty(str, msg) {
if (str === '' || str === undefined) {
layer.msg(msg);
return false
} else {
return true
}
}
// 手机号正则
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
/* 留言板提交 */
var ahbmzSubmit = document.getElementById('ahbmzSubmit');
ahbmzSubmit.onclick = function() {
var msgName = document.getElementById('msgName').value.trim();
if (!isEmpty(msgName, '请输入姓名')) {
return false
}
var msgTel = document.getElementById('msgTel').value.trim();
if (!isEmpty(msgTel, '请输入手机号码')) {
return false
}
if (!reg_tel.test(msgTel)) {
return layer.msg('请输入正确的手机格式');
}
var msgText = document.getElementById('msgText').value.trim();
if (!isEmpty(msgText, '请输入留言')) {
return false
}
var msgOpt = {
msgName: msgName,
msgTel: msgTel,
msgText: msgText
}
that.setting.submitFn(msgOpt)
conponentDialog.style.display = 'none'
}
}

5
plugins/js/jquery-1.11.3.js

File diff suppressed because one or more lines are too long

2
plugins/layer/layer.js

File diff suppressed because one or more lines are too long

2
plugins/layer/mobile/layer.js

@ -0,0 +1,2 @@
/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);

1
plugins/layer/mobile/need/layer.css

File diff suppressed because one or more lines are too long

BIN
plugins/layer/theme/default/icon-ext.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
plugins/layer/theme/default/icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

1
plugins/layer/theme/default/layer.css

File diff suppressed because one or more lines are too long

BIN
plugins/layer/theme/default/loading-0.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
plugins/layer/theme/default/loading-1.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

BIN
plugins/layer/theme/default/loading-2.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Loading…
Cancel
Save