87,955
社区成员
发帖
与我相关
我的任务
分享JQ 动态循环添加内容，想写一个仿蜂窝网游记的编辑器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>达人</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
* {
font-family: Microsoft YaHei, Arial, simsun;
color: #666;
}
.mian_z {
width: 602px;
overflow: hidden;
padding: 5px 5px 5px 0;
}
.NewMian {
width: 600px;
height: 260px;
border: 1px #b5b5b5 solid;
-webkit-box-shadow: 1px 1px 3px rgba(0 ,0 ,0 ,.2);
-moz-box-shadow: 1px 1px 3px rgba(0 ,0 ,0 ,.2);
box-shadow: 1px 1px 3px rgba(0 ,0 ,0,.2);
margin-top: 20px;
}
.add {
width: 600px;
overflow: hidden;
margin-top: 10px;
}
.add_new {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.add_btn {
width: 28px;
height: 28px;
float: left;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
background-image: url(images/add.png);
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.add_btn:hover {
background-image: url(images/add_1.png);
}
.add_two {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.add > ul {
float: left;
padding: 0;
margin: 0;
line-height: 28px;
height: 28px;
overflow: hidden;
}
.add > ul > li {
float: left;
list-style: none;
margin-left: 30px;
}
.NewMian > .NewNav {
width: 600px;
height: 40px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
line-height: 40px;
outline: 0;
}
.NewMian > .NewNav > .NavLeft {
width: 65%;
overflow: hidden;
float: left;
}
.NewMian > .NewNav > .NavRight {
width: 35%;
overflow: hidden;
float: left;
}
.NewMian > .NewNav > .NavRight > button {
background-color: #e6c23b;
border: none;
margin: 6px 0 6px 30px;
padding: 0;
width: 60px;
height: 28px;
color: #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline: 0;
float: left;
font-size: 14px;
}
.NewMian > .NewNav > .NavRight > .cancel {
background-color: transparent;
color: #999;
moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.NewMian > .NewNav > .NavRight > .cancel:hover {
background-color: #dbdbdb;
color: #666;
}
.NewMian > .NewNav > .NavRight > .save {
moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.NewMian > .NewNav > .NavRight > .save:hover {
background-color: #d8a400;
}
.NewMian > .NewText {
margin: 20px;
width: 560px;
height: 180px;
border: none;
resize: none;
outline: 0;
font-size: 14px;
line-height: 1.8;
padding: 0;
}
.text_box{
width:600px;
overflow:hidden;
}
.revise,.delete{
margin-left:10px;
text-decoration:none;
}
.clear{
margin-bottom:10px;
width:600px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="add">
<div class="add_new add_btn"></div>
<ul>
<li class="add_text"><a href=""></a><span>添加正文</span></li>
<li class="add_title"><a href=""></a><span>添加标题</span></li>
</ul>
</div>
<div class='mian_z'></div>
<script type="text/javascript">
var addhide = $(".add > ul");
addhide.css('width','0');
var isShow = false;
var temporary="";
var editor = "<div class='NewMian'><div class='NewNav'><div class='NavLeft'>上传图片</div><div class='NavRight'><button class='cancel'>取消</button><button class='save'>保存</button></div></div><textarea class='NewText text_y'></textarea></div>";
var wenben = "<div class='clear'><span class='text_box'></span><a class='revise'>修改</a><a class='delete'>删除</a></div>";
var a = "<div class='add'><div class='add_new add_btn'></div><ul><li class='add_text'><a href=''></a><span>添加正文</span></li><li class='add_title'><a href=''></a><span>添加标题</span></li></ul></div>"
$(function (){
/*点击+滑动滚出菜单栏*/
/*$(".add_btn").click(function (){*/
$("div").delegate(".add_btn","click",function(){
if($(this).hasClass("add_new")){
$(this).removeClass("add_new").addClass("add_two");
$(this).next("ul").animate({width:'200px'});
}else{
$(this).removeClass("add_two").addClass("add_new");
$(this).next("ul").animate({width:'0px'});
};
});
/*点击正文弹出编辑框*/
$("div").delegate(".add_text","click",function(){
/*$(".add_text").click(function(){*/
if(!isShow){
$(".mian_z").append(editor);
isShow=true;
}
});
/*取消按钮*/
$("div").delegate(".cancel","click",function(){
isShow=false;
var test = $(".text_y").val();
$(this).parent().parent().parent().remove();
if(temporary != ""){
$(".mian_z").append(wenben);
$(".text_box").text(temporary);
}
});
/*保存按钮*/
$("div").delegate(".save","click",function(){
isShow=false;
var test = $(".text_y").val();
$(this).parent().parent().parent().remove();
if(test !== ""){
$(this).parent().parent().parent().remove();
$(".mian_z").append(wenben);
$(".text_box").text(test);
temporary = test;
$(".mian_z").append(a);
$("body").find(".add > ul").css({'width':'0px'});
$("body").find(".add_btn").removeClass("add_two").addClass("add_new");
};
});
/*修改按钮*/
$("div").delegate(".revise","click",function(){
var passText = $(".text_box").text();
$(".mian_z").append(editor);
$(".text_y").val(passText);
$(this).parent().remove();
isShow=true;
});
/*删除按钮*/
$("div").delegate(".delete","click",function(){
$(this).parent().remove();
$(this).parent().prev(".add").remove();
isShow=false;
temporary="";
});
});
</script>
</body>
</html>
怎么循环添加？让每个文本框互不干涉。求指点
...全文
请发表友善的回复…
发表回复
