div上下切换（新增、删除、上下div切换）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div上下切换</title> <link rel="stylesheet" href="css/cssreset-min.css" /> <link rel="stylesheet" href="css/storemanage.css" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/tips.js"></script> <script type="text/javascript" src="js/storemanage.js"></script> </head> <body> <div class="fwge"> <div class="fwge_lanmu clearfix"> <div class="fwge_lanmu_left">名称</div> <div class="fwge_lanmu_right">操作</div> </div> <div class="fwge_main"> <div class="fuge_content"> <div class="banner_bottom"> <div class="fuge_content_input"> <div class="fuge_block"> <input class="fuge_item" maxlength="30"> <div class="fuge_count"> <span class="textareaInput">0</span>/<span class="textareaTotal">30</span> </div> </div> </div> <div class="fuge_content_cz clearfix"> <div class="fuge_top"></div> <div class="fuge_down"></div> <div class="fuge_sc picflag"></div> </div> </div> </div> </div> <div class="fuge_add">+添加规格</div> </div> </body> </html>
jQuery代码：
$(function() {
//规格文本框字数提示代码
var lenInput = $(".fuge_content").find('.fuge_item').val().length;
$(".fuge_item").keyup(function() {
lenInput = $(this).val().length;
var str = $(this).siblings().find(".textareaInput");
if(lenInput >= 0 && lenInput <= 30) {
$(str).html(lenInput);
}
});
//添加服务规格追加代码
var lifwge='<div class="banner_bottom">'+
'<div class="fuge_content_input">'+
'<div class="fuge_block">'+
'<input class="fuge_item" maxlength="30">'+
'<div class="fuge_count">'+
'<span class="textareaInput">0</span>/<span class="textareaTotal">30</span>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="fuge_content_cz clearfix">'+
'<div class="fuge_top"></div>'+
'<div class="fuge_down"></div>'+
'<div class="fuge_sc picflag"></div>'+
'</div>'+
'</div>';
//添加服务规格（最多添加4条规格）
$(".fwge").on("click", ".fuge_add", function() {
var bannerSize = $(".banner_bottom").size();
if(bannerSize >= 4) {
$.tips.tip("最多添加服务规格4条", function() {
$.tips.close();
});
} else {
$(".fuge_content").append(lifwge);
var lenInput = $(".fuge_content").find('.fuge_item').val().length;
$(".fuge_item").keyup(function() {
lenInput = $(this).val().length;
var str = $(this).siblings().find(".textareaInput");
if(lenInput >= 0 && lenInput <= 30) {
$(str).html(lenInput);
}
});
}
});
//删除服务规格（至少存在2条规格）
$(".fwge").on("click", ".fuge_sc", function() {
var bannerSize = $(".banner_bottom").size();
if(bannerSize <= 1) {
$.tips.tip("服务规格不能小于一条",function(){
$.tips.close();
});
} else {
$(this).parent().parent(".banner_bottom").remove();
}
});
//规格向下移动
$(".fwge").on("click",".fuge_down",function(){
var box = $(this).parent().parent(); //获取按钮的父元素
var box_next = box.next(); //父元素的下一个同胞元素
var box_next_left = parseInt(box_next.css('top')); //父元素下一个同胞元素的top值
var box_left = parseInt(box.css('top')); //父元素的top值
if(box_next_left) {
box.animate({
top: box_next_left.toString()
});
box_next.animate({
top: box_left.toString()
});
box.insertAfter(box_next);
}
});
//规格向上移动
$(".fwge").on("click",".fuge_top",function(){
var box = $(this).parent().parent(); //获取按钮的父元素
var box_left = parseInt(box.css('top')); //父元素的top值
var box_prev = box.prev(); //父元素的上一个同胞元素
var box_prev_left = parseInt(box_prev.css('top')); //父元素下一个同胞元素的top值
if(box_left) {
box.animate({
top: box_prev_left.toString()
});
box_prev.animate({
top: box_left.toString()
});
box.insertBefore(box_prev);
}
});
});
css代码：
.fwge{
width: 500px;
height: 300px;
margin-left: 10px;
border: 1px solid #e4e4e4;
}
.fwge_lanmu{
width: 500px;
height: 25px;
}
.fwge_lanmu_left{
width: 350px;
height: 25px;
float: left;
}
.fwge_lanmu_right{
width: 150px;
height: 25px;
float: left;
text-align: center;
}
.fuge_content{
width: 500px;
height: auto;
display: table;
}
.banner_bottom{
width: 500px;
height: 30px;
top:30px;
margin-bottom: 10px;
}
.fuge_content_input{
width: 350px;
height: 30px;
float: left;
}
.input_text{
width: 300px;
height: auto;
outline: none;
}
.fuge_content_cz{
width: 150px;
height: 30px;
float: left;
}
.fuge_top{
width: 25px;
height: 30px;
float: left;
margin-left: 20px;
background: url(../images/tongke_service_icon.png) no-repeat 6px -96px;
}
.fuge_down{
width: 25px;
height: 30px;
float: left;
margin-left: 20px;
background: url(../images/tongke_service_icon.png) no-repeat -19px -96px;
}
.fuge_sc{
width: 25px;
height: 30px;
float: left;
margin-left: 20px;
background: url(../images/tongke_service_icon.png) no-repeat -44px -96px;
}
.fuge_block {
position: relative;
}
.fuge_item {
width: 290px;
height: 15px;
border: 1px solid #ccc;
padding: 6px;
resize: none;
outline: none;
}
.fuge_items {
width: 290px;
height: 15px;
border: 1px solid #ccc;
padding: 6px;
resize: none;
outline: none;
}
.fuge_count {
position: absolute;
bottom: 5px;
right: 60px;
color: #999;
}
.fuge_add{
width: 70px;
height: 20px;
color: #00b1bb;
line-height: 20px;
cursor: pointer;
}
公共样式css：
html {
color: #333;
background: #FFF;
min-height: 100%;
margin: 0;
padding: 0;
position: relative;
min-width: 1200px;
}
input, textarea, keygen, select, button{
font-family:"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
Helvetica, Arial, sans-serif;
}
body{
overflow-y: scroll;
font-size: 14px;
font-family:"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
Helvetica, Arial, sans-serif;
min-width:1200px;
position:relative\9;
min-height: 100%;
}
.tk_footermain { /*公共代码： 当内容不满一屏时，底部footer内容始终位于显示屏的底部；当内容超过一屏时，则位于内容底部。 */
height: auto;
min-height: 100%;
_height: 100%;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
button
{
margin: 0;
padding: 0;
}
textarea{
resize:none;
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
ol,
ul {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input,
textarea,
select,
button
{
font-family: inherit;
font-size: inherit;
font-weight: inherit
}
input,
textarea,
select {
*font-size: 100%
}
legend {
color: #000
}
/*html5*/
article, aside, dialog, footer, header, section, footer, nav, figure, menu {
display: block;
}
/*清浮动*/
.clearfix:after,.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/*锚链接初始化*/
a {
text-decoration: none;
outline: none;
color:#5d5d5d;
}
a:hover {
text-decoration: none;
}
a:focus {
outline: none;
-moz-outline: none;
}
/*布局样式*/
.tc{
text-align:center;
}
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.pr {
position: relative;
}
.pa {
position: absolute;
}
.hide{
display:none;
}
.show{
display:block;
}
tips弹框js：
/**
* javascript-tips
* @author zyq
* @version 1.0.1
*/
(function($) {
$.tips = {
tip : function(text, callback) {
var me = this, layer = '<div id="J_mengban" style="z-index:5000;top:0;-webkit-transform: translateZ(0);opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);width:100%;height:100%;position:fixed;background-color:#000000;"></div>', options = '<div id="J_conform" style="width:360px;height:190px;position:fixed;z-index:200001; border: 1px solid #00b1bb; background-color:#ffffff;margin:auto;left:0;right:0;top:200px; border-radius: 5px;"><div style="height: 14px ;background-color: #00b1bb;margin-bottom: 30px;"></div><div style="color:#2b2e30;width: 300px;height: 50px;margin:80px auto;text-align: center;font-size:16px;padding-bottom: 10px;">'
.concat(text, "</div></div>");
me.cancel();
$("body").append(layer);
$("body").append(options);
if (callback) {
window.setTimeout(function() {
callback(true);
}, 1000);
}
},
alert : function(text, callback) {
var me = this, layer = '<div id="J_mengban" style="top:0;z-index: 5000;-webkit-transform: translateZ(0);opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);width: 100%;height: 100%;position: fixed;background-color: #000000;"></div>', options = '<div id="J_alert" style="width:360px;height: 190px;position: fixed;z-index: 200001; border: 1px solid #00b1bb;background-color: #ffffff;margin: auto;left:48%;top:45%;margin-top:-100px;margin-left:-150px;border-radius: 5px;"><div style="height: 14px ;background-color: #00b1bb;margin-bottom:35px;border-top-left-radius: 5px; border-top-right-radius: 5px;"></div><div style="width:300px;color:#2b2e30;height: auto;min-height:50px;margin:0 auto;text-align: center;line-height:25px;font-size:16px;padding-bottom:10px;">'
.concat(
text,
'</div><div id="J_alert_ok" style="border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px; cursor: pointer; color:#ffffff;margin-top:10px;bottom: 10px;margin: auto;left:0;right: 0; width: 55%;height: 40px;background-color: #00b1bb;text-align: center;line-height: 40px;font-size:16px;">确定</div></div>');
me.cancel();
$("body").append(layer);
$("body").append(options);
$("#J_alert_ok").on("click", function() {
me.cancel();
if (callback) {
callback();
}
});
},
conform : function(text, callback) {
var me = this, layer = '<div id="J_mengban" style="z-index: 5000;-webkit-transform: translateZ(0);top:0;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);width: 100%;height: 100%;position: fixed;background-color: #000000;"></div>', options = '<div id="J_conform" style="width:360px;height: 190px;position: fixed;z-index: 200001; border: 1px solid #00b1bb;background-color: #ffffff;margin: auto;left:0;right: 0;top:40%;margin-top:-100px;border-radius: 5px;"><div style="height: 14px ;background-color: #00b1bb;margin-bottom: 30px;-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;"></div><div style="width:300px;color:#2b2e30;height: 50px;margin: auto;text-align: center;font-size:16px;padding-bottom: 10px;">'
.concat(
text,
'</div><div id="J_alert_cancel" style="border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px; cursor: pointer; color:#ffffff; position: absolute;bottom: 10px;left:20px; width: 40%;height: 40px;background-color: #aaaaaa;text-align: center;line-height: 40px;font-size:16px;">取消</div><div id="J_alert_sure" style="border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px; cursor: pointer; color:#ffffff; position: absolute;bottom: 10px;right:20px; width: 40%;height: 40px;background-color: #00b1bb;text-align: center;line-height: 40px; font-size:16px;">确定</div></div>');
me.cancel();
$("body").append(layer);
$("body").append(options);
$("#J_alert_sure").on("click", function() {
me.cancel();
if (callback) {
callback(true);
}
});
$("#J_alert_cancel").on("click", function() {
me.cancel();
if (callback) {
callback(false);
}
});
},
confirm : function(text, callback) {
this.conform(text, callback);
},
toast : function(text, callback) {
var me = this, content = '<div id="J_toast" style="position: fixed;z-index:5000;-webkit-transform: translateZ(0); text-align:center; left:0;right:0; bottom:100px; margin:auto; text-align: center;"><span style="padding: 5px 10px;background-color:#000000;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;color:#ffffff; ">'
.concat(text, "</span></div>");
me.cancel();
$("body").append(content);
window.setTimeout(hideToast, 2000);
function hideToast() {
me.cancel();
if (callback) {
callback(true);
}
}
},
prompt : function(callback) {
var me = this, layer = '<div id="J_mengban" style="top:0;z-index: 5000;-webkit-transform: translateZ(0);opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);width: 100%;height: 100%;position: fixed;background-color: #000000;"> </div>', content = '<div id="J_alert" style="width:300px;height: 200px;position: fixed;z-index: 200001;background-color: #ffffff;margin: auto;left:0;right: 0;top:34%;"><div style="height: 14px ;background-color: #58cbc3;margin-bottom: 30px;"></div><textarea class="btn_textarea" id="J_prompt_content" style="width: 265px; margin-left: 15px; height: 90px; border-color:1px solid #e4e4e4;"></textarea><div style="color:#2b2e30;width: 300px;height: 50px;margin: auto;text-align: center;"></div><div id="J_alert_sure" style="border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px; cursor: pointer; color:#ffffff; position: absolute;bottom: 10px;margin: auto;left:-100px;right: 0; float:left; width: 30%;height: 35px;background-color: #58cbc3;text-align: center;line-height: 35px;">确定</div><div id="J_alert_cancel" style="border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px; cursor: pointer; color:#ffffff; position: absolute;bottom: 10px;margin: auto;left:110px;right: 0; float:left; width: 30%;height: 35px;background-color: #58cbc3;text-align: center;line-height: 35px;">取消</div></div>';
me.cancel();
$("body").append(layer);
$("body").append(content);
$("#J_alert_sure").on("click", function() {
var txt = $("#J_prompt_content").val();
if ($.trim(txt).length > 0) {
me.cancel();
if (callback) {
callback(true, txt);
}
}
});
$("#J_alert_cancel").on("click", function() {
me.cancel();
if (callback) {
callback(false, $("#J_prompt_content").val());
}
});
},
cancel : function() {
$("#J_mengban,#J_conform,#J_alert,#J_toast").remove();
return this;
},
close : function() {
return this.cancel();
}
};
})($);
代码所需图片：
实现效果：
