文件
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.entire {
overflow-y: visible !important;
}
.toolbar-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 99;
width:0;
height: 100%;
}
.toolbar-right {
position: absolute;
right:0;
top: 0;
width: 0px;
height: 100%;
z-index: 9999;
border-left: 6px solid #FFC33D;
-webkit-transition: width .3s ease-in-out 0s;
-moz-transition: width .3s ease-in-out 0s;
transition: width .3s ease-in-out 0s;
box-sizing: content-box;
}
.toolbar-tabs {
position: absolute;
top: 70%;
left: -42px;
width: 36px;
-webkit-transition: right .3s ease-in-out 0s;
-moz-transition: right .3s ease-in-out 0s;
transition: right .3s ease-in-out 0s;
}
.slidebox {
height: 34px;
line-height: 35px;
position: relative;
}
.icon {
z-index: 60;
display: block;
width: 36px;
height: 34px;
background: #FFC33D;
border-radius: 4px 0 0 4px;
position: absolute;
right: -6px;
top:0px;
}
.icon:hover {
background: #FDA600;
}
.icon .imgbox {
z-index: 60;
display: block;
width: 36px;
height: 34px;
background: transparent;
border-radius: 4px 0 0 4px;
}
.icon .imgbox:hover {
background: #FDA600;
}
.tip {
width: 70px;
height: 34px;
position: absolute;
right: -66px;
top:0px;
border-radius: 4px 0 0 4px;
background-color: #FDA600;
font-size: 14px;
padding-left: 10px;
box-sizing: border-box;
color: #fff;
line-height: 34px;
-webkit-transition: right .3s ease-in-out 0s;
-moz-transition: right .3s ease-in-out 0s;
transition: right .3s ease-in-out 0s;
}
.slidebox:hover {
cursor: pointer;
}
.slidebox:hover .icon{
cursor: pointer;
}
.toolbar-panels {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index:50;
}
.panels-idea{
position: absolute;
right: -265px;
height: 100%;
-webkit-transition: right .4s ease-out 0s;
-moz-transition: right .4s ease-out 0s;
transition: right .4s ease-out 0s;
}
ul {
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
h3 {
margin: 0;
}
.panel-header {
width:266px;
height:39px;
line-height: 39px;
background:rgba(236,234,234,1);
padding: 0 10px 0 13px;
box-sizing: border-box;
font-size:18px;
position: relative;
}
.panel-header .title {
float: left;
width: 22px;
height: 39px;
position: relative;
}
.panel-header em {
font-style: normal;
margin-left: 9px;
box-sizing: border-box;
}
.panel-header .title img {
height: 22px;
width: 22px;
position: absolute;
left: 0px;
top: 8px;
}
.panel-header .close-panel img {
width: 16px;
}
.close-panel {
float: right;
width: 39px;
width: 39px;
padding-left: 11px;
box-sizing: border-box;
cursor: pointer;
}
.close-panel:hover img {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: transform .2s ease-out 0s;
-moz-transition: transform .2s ease-out 0s;
transition: transform .2s ease-out 0s;
}
.panel-main {
padding: 17px 18px 0 18px;
}
.panel-main span {
display: block;
color: #535353;
font-size:14px;
margin: 5px 0;
}
/* 下拉 */
.rank_top_1_ul {
display: block;
width: 100%;
height: 40px;
background-color: #fff;
position: relative;
}
.rank_top_1_ul .img-arrow {
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
.img-arrow img {
width: 12px;
height: 8px;
margin-left:14px;
transform: rotate(0deg);
}
.rank_top_1_ul li {
position: relative
display: block;
line-height: 40px;
height: 40px;
width: 230px;
background-color: #fff;
font-size: 14px;
color: #222;
padding-left: 10px;
box-sizing: border-box;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.rank_top_1_ul li:first-child {
border: 1px solid #ddd;
}
.rank_top_1_ul li:first-child i {
font-style: normal;
}
.rank_top_1_ul li:last-child {
border-bottom: 1px solid #ddd;
}
.rank_top_1_ul li:not(:first-child){
display: none;
}
.rank_top_1_ul li:not(:first-child):hover{
background-color: #ddd;
}
.rank_top_1_ul li span {
margin:0;
line-height:40px;
}
.panel-main textarea {
width: 100%;
height: 90px;
line-height: 18px;
outline: none;
padding: 8px;
border: 1px solid #DDDDDD;
text-indent: 5px;
color: #222222;
font-size: 12px;
resize: none;
box-sizing: border-box;
}
.panel-main input {
outline: none;
width: 100%;
height: 40px;
border: 1px solid #DDDDDD;
padding-left: 10px;
color: #222222;
font-size:14px;
box-sizing: border-box;
}
input::-webkit-input-placeholder {
color: #222222;
font-size:14px;
}
input::-moz-placeholder {
color: #222222;
font-size:14px;
}
input::-ms-input-placeholder {
color: #222222;
font-size:14px;
}
input:focus {
border: 1px solid #FFA73D;
box-shadow:0px 0px 6px rgba(255,167,61,0.5);
}
.warn {
font-size:14px;
color:rgba(255,68,68,1);
margin-top: 8px;
}
.idea-footer button {
margin: 0;
padding: 0;
outline: none;
width: 100%;
height:40px;
line-height: 40px;
text-align: center;
color: #fff;
border: 1px solid #FFA73D;
background-color: #FFA73D;
opacity:0.8;
margin-top: 40px;
cursor: pointer;
}
.idea-footer button:hover {
background-color: #FFA73D;
opacity:1;
}
</style>
</head>
<body>
<div class="toolbar-wrap">
<div class="toolbar-right">
<div class="toolbar-panels">
<div class="panels-idea">
<h3 class="panel-header">
<div class="title">
<img src="black.png" alt="">
</div>
<em>投诉建议</em>
<div class="close-panel">
<img src="close.png" alt="">
</div>
</h3>
<div class="panel-main">
<form action="" id="idea_form" method="post">
<ul>
<li>
<span>咨询类别</span>
<ul class="rank_top_1_ul">
<li class="first-li Highlight"><span>请选择</span><div class="img-arrow"><img src="arror.png"></div></li>
<li>投诉</li>
<li>建议</li>
<li>产品</li>
<li>其他</li>
</ul>
</li>
<li>
<span>问题描述</span>
<textarea class="Highlight" id="content" rows="" cols="" name="content" maxlength="2000"></textarea>
</li>
<li>
<span>联系人电话</span>
<input class="txt Highlight" type="text" id="phone" name="phone" placeholder="请输入手机号" maxlength="20">
</li>
<li>
<span>联系人</span>
<input class="txt Highlight" type="text" id="name" name="username" placeholder="请输入联系人" maxlength="20">
</li>
<li class="warn"></li>
<li class="idea-footer">
<button type="button" class="submit-btn" id="suggest_submit">立即提交</button>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="toolbar-tabs">
<div class="slidebox">
<i class="icon"><img class="imgbox" src="bai.png" alt=""></i>
<div class="tip">投诉建议</div>
</div>
</div>
</div>
</div>
</body>
<script src="jquery-1.12.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidebox").mouseenter(function () {
$(".tip").fadeIn(1000).css('right','26px');
});
$(".slidebox").mouseleave(function () {
$(".tip").css('right','-66px');
$(".imgbox").css('border-radius','4px 0 0 4px');
});
$(".slidebox").click(function () {
$(".toolbar-right").addClass("fadeInRight ");
$(".toolbar-right").css('width','266px');
$(".icon").css('background-color','#FDA600');
$(".imgbox").css('border-radius','4px 0 0 4px');
$(".panels-idea").css('right','0px');
$(".panels-idea").css('transition','right .4s ease-out 0s');
});
$(".close-panel").click(function () {
$(".toolbar-right").css('width','0px');
$(".icon").css('background-color','#FFC33D');
$(".panels-idea").css('right','-265px');
$(".panels-idea").css('transition','right .3s ease-out 0s');
});
$(".tip").mouseenter(function () {
$(".icon").css('background','#FDA600');
});
var select_li = document.querySelectorAll(".rank_top_1_ul li");
select_li[0].onclick = function () {
var imgLabel = document.querySelector(".img-arrow");
var tempFlag = select_li[1].style.display;
if (tempFlag === "block") {
imgLabel.style.transform = 'rotate(0deg)';
for (var i = 1; i < select_li.length; i++) {
select_li[i].style.display = "none";
}
} else {
imgLabel.style.transform = 'rotate(-180deg)';
for (var i = 1; i < select_li.length; i++) {
select_li[i].style.display = "block";
}
}
for (var i = 1; i < select_li.length; i++) {
select_li[i].onclick = function () {
select_li[0].firstChild.innerText = this.innerText;
for (var i = 1; i < select_li.length; i++) {
select_li[i].style.display = "none";
}
imgLabel.style.transform = 'rotate(0deg)';
}
}
}
$("#suggest_submit").click(function(e){
$(".warn").html("");
if( $("#name").val() == null || $("#name").val() == undefined || $("#name").val() == ''){
$(".warn").html("请输入姓名！");
return;
}
if($("#phone").val() == null || $("#phone").val() == undefined || $("#phone").val() == ''){
$(".warn").html("请输入手机号！");
return;
}
if($("#content").val() == null || $("#content").val() == undefined || $("#content").val() == ''){
$(".warn").html("问题描述不能为空！");
return;
}
if(!checkPhone($("#phone").val())){
$(".warn").html("手机号格式不正确！");
return;
}
$.ajax({
type: "POST",
url: "",
data:"consultName="+ $("#name").val()+"&consultPhone="+ $("#phone").val()+"&consultContent="+$("#content").val()+"&consultFile="+type,
async:false,
success: function(msg){
if(msg=="success"){
alert("提交成功");
window.location.reload();
}else{
alert("提交失败");
window.location.reload();
}
}
});
});
function checkPhone(phone){
if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
return false;
}else
{
return true;
}
}
});
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
