在dwz系统框架下添加的简单网站便签

最进老板让我在网站的主页加一个便签功能，方便每个人记一些自己要做的事。

开始我上网查了一些相关插件，发现五花八门，而且下载后用起来也是很费劲，于是自己写了一个，我也不是很厉害，加上样式，大约做了一天的时间。

ok，接下来就说正题啦！

首先：先建一个表，用来放每个人的便签信息。（建个表应该很简单吧，这里就不浪费文字了）

接下来开始写页面的显示形式（代码如下）：

 <div style="width:auto; height:323px;">
              <font style="margin:10px; font-size:18px; font-style: normal;">工作便签:</font><br/>
                <div id="note_model" style=" margin:10px; width:auto; height:300px;">
                <div id="note_div" style="<{if $note.id eq ''}>display:none;<{/if}> width:271px; height:275px; border-color:#CCC; border-width:1px; border-style:solid; text-align:center; border-radius:5px 5px 5px 5px;">
                    <div id="note_info" style="width:271px; height:248px; border-radius:5px 5px 5px 5px;">
                        <div style="font-size:16px; background-color:#A4D1FF; height:30px; line-height:30px; border-radius:5px 5px 0px 0px;"><{$note.time}></div>
                            <div style=" background-color:#FFFF8E; height:218px;border-radius:0px 0px 5px 5px; "><div style="line-height:25px; font-size:20px; text-align:left; border-radius:0px 0px 5px 5px; height:218px; width:260px; margin-left:5px;"><{$note.note}></div></div>
                        </div>
                        <a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="get_info(<{$note.id}>);"><button type="button">修改</button></a>
                        <a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="del_note(<{$note.id}>);"><button type="button">删除</button></a>
                    </div>
                <div id="note_text" style="display:none; width:271px; height:275px; border-color:#CCC; border-width:1px; border-style:solid;  border-radius:5px 5px 5px 5px;text-align:center;">
                    <textarea name="note_textarea" id="note_textarea" style="width:255px; height:242px; line-height:25px; border-radius:5px 5px 5px 5px; resize:none; font-size:20px; background-color:#FFFF8E;" ></textarea>
                        <a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="add_info();"><button type="button">确定</button></a>
                        <a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="cancel();"><button type="button">取消</button></a>
                    </div>
                <a href="#" style="cursor:pointer; <{if $note.id neq ''}>display:none;<{/if}>"  id="add_button" οnclick="click_add();"><button type="button">添加新的便签</button></a>
                    
                </div>
              </div>

接下来是jQuery功能代码：

//便签**************************************************************************开始****************/
//添加便签框
function click_add(){
$("#note_textarea").val("");
$("#note_text").css("display",'block');
$("#note_text").html('<textarea name="note_textarea" id="note_textarea" style="width:255px; height:248px; line-height:25px; resize:none; font-size:20px; background-color:#FFFF8E; border-radius:5px 5px 5px 5px;"></textarea>'+
'<a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="up_info();"><button type="button">确定</button></a>'+
'<a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="up_cancel();"><button type="button">取消</button></a>'
);
$("#add_button").css("display","none");
}
//添加便签信息
function add_info(){
var val = $("#note_textarea").val();
if(val!=''){
$.ajax({
url:'<{$__ROOT__}>/index/add_info',
data:{'val':val},
type:"post",
dataType:'json',
success: function(data){
if(data.err==0){
alert(data.message);
$("#note_text").css("display",'none');
$("#note_div").css("display","block");
$("#note_div").html("");
$("#note_div").append('<div id="note_info" style="width:271px; height:248px; border-radius:5px 5px 5px 5px;">'+
'<div style="font-size:16px; background-color:#A4D1FF; height:30px;line-height:30px; border-radius:5px 5px 0px 0px;">'+data.time+
'</div>'+
'<div style=" background-color:#FFFF8E; height:218px;border-radius:0px 0px 5px 5px; "><div style="line-height:25px; font-size:20px; text-align:left; border-radius:0px 0px 5px 5px; height:218px; width:260px; margin-left:5px;">'+data.text+
'</div></div>'+
'</div>'+
'<a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="get_info('+data.id+');"><button type="button">修改</button></a>'+
'<a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="del_note('+data.id+');"><button type="button">删除</button></a>'
);
}else{
alert(data.message);
}
} 
});
}else{
alert("内容不能为空！");
}
}
//取消便签框架
function cancel(){
$("#note_text").css("display",'none');
$("#add_button").css("display","block");
}
//修改便签框架
function get_info(id){
if(id!=''){
$.ajax({
url:'<{$__ROOT__}>/index/get_info',
data:{'id':id},
type:"post",
dataType:'json',
success: function(data){
$("#note_div").css("display",'none');
$("#note_text").css("display","block");
$("#note_text").html("");
$("#note_text").html('<textarea name="note_textarea" id="note_textarea" style="width:255px; height:248px; line-height:25px; resize:none; font-size:20px; background-color:#FFFF8E; border-radius:5px 5px 5px 5px;">'+data.note+'</textarea>'+
'<a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="up_info('+data.id+');"><button type="button">确定</button></a>'+
'<a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="up_cancel();"><button type="button">取消</button></a>'
);
} 
});
}else{
alert("id不能为空！");
}
}
//修改便签内容
function up_info(id){
var val = $("#note_textarea").val();
if(val!=''){
$.ajax({
url:'<{$__ROOT__}>/index/add_info',
data:{'val':val,'id':id},
type:"post",
dataType:'json',
success: function(data){
if(data.err==0){
alert(data.message);
$("#note_text").css("display",'none');
$("#note_div").css("display","block");
$("#note_div").html("");
$("#note_div").append('<div id="note_info" style="width:271px; height:248px; border-radius:5px 5px 5px 5px;">'+
'<div style="font-size:16px; background-color:#A4D1FF; height:30px;line-height:30px; border-radius:5px 5px 0px 0px;">'+data.time+
'</div>'+
'<div style=" background-color:#FFFF8E; height:218px;border-radius:0px 0px 5px 5px; "><div style="line-height:25px; font-size:20px; text-align:left; border-radius:0px 0px 5px 5px; height:218px; width:260px; margin-left:5px;">'+data.text+
'</div></div>'+
'</div>'+
'<a href="#" style="cursor:pointer; float:left; margin-left:0px;" οnclick="get_info('+data.id+');"><button type="button">修改</button></a>'+
'<a href="#" style="cursor:pointer; float:right; margin-right:0px;" οnclick="del_note('+data.id+');"><button type="button">删除</button></a>'
);
}else{
alert(data.message);
}
} 
});
}else{
alert("内容不能为空！");
}
}


//修改中的取消关闭便签
function up_cancel(){
$("#note_text").css("display",'none');
$("#note_div").css("display","block");
}
//删除便签
function del_note(id){
if(id!=''){
$.ajax({
url:'<{$__ROOT__}>/index/del_note',
data:{'id':id},
type:"post",
dataType:'json',
success: function(data){
if(data.err==0){
alert(data.message);
$("#add_button").css("display","block");
$("#note_div").css("display",'none');
}else{
alert(data.message);
}
} 
});
}else{
alert("id不能为空！");
}
}


//便签*****************************************************************************************结束*******************/

当然还得有Action的内容：

//便签内容
$note_one = $this->model->table('note')->where("user_name='".$_SESSION['user_name']."'")->find();
$this->assign('note', $note_one);

//修改时获取便签信息
public function get_info(){
$id =$_POST['id'];
$note_info = $this->model->table('note')->where("id='".$id."'")->find();
$note_info['note']= str_replace("<br />","\n",$note_info['note']);
die(json_encode($note_info));

}
//删除便签
public function del_note(){
$id =$_POST['id'];
if($this->model->table('note')->where("id='".$id."'")->delete()){
$data = array(
 "err"=>"0", 
 "message"=>"删除成功！" 
);
die(json_encode($data));
}else{
$data = array(
 "err"=>"1", 
 "message"=>"删除失败！" 
);
die(json_encode($data));
}
}

嗯嗯，大概就这些了。第一次分享，也不知道怎么写，不求别的，只要能帮助大家就好.

接下来是显示的样子：