编辑内容-蒲公英云

编辑内容

怼烎@ 2022-08-18 12:23 285阅读 0赞

点击编辑显示编辑框，确定则保存内容，取消则还原

效果图： 20151121111350758

使用bootstrap，font awesome ，alertfly 或者是 alertflyjs 两个版本。

使用alertfly目的是当输入内容为null时友情提示，其提示框不可拖拽，而alertflyjs是可拖拽。

使用font awesome目的是用图标代替文字，跟简洁

代码：

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <!--当前页面的三要素-->
        <title>内容修改</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="Description" content="">
        <!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0;}
            #box {width:300px;height:300px;margin:50px auto;border:2px solid #ccc;border-radius:4px;}
            #box .item{text-align:center;}
            #box .button , .edit{display:none;color:blue;}
        </style>
    <link type="text/css" rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" ></link>
    <link type="text/css" rel="stylesheet" href="font-awesome/4.3.0/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="alertify/0.3.12/css/alertify-bootstrap.css"/>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="alertify/0.3.12/js/alertify.js"></script> 
    </head>
    <body>
        <div id="box">
            <div class="item">
                <div class="name" title="ITDragon">ITDragon</div>
                <i class="edit fa fa-pencil fa-lg"></i>
                <i class="button save fa fa-check fa-lg"></i>
                <i class="button cancle fa fa-times fa-lg"></i>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $("#box").find(".edit").click(function(){
                    var $name = $(this).parent().find(".name");
                    $(this).hide();
                    $(this).parent().find(".button").show();
                    var text = $name.text();
                    $name.html("<input type='text' class='newText' value='"+text+"'/>");
                });    
                $("#box").find(".cancle").click(function(){
                    var $name = $(this).parent().find(".name");
                    $name.html($name.attr("title"));
                    $(this).parent().find(".button").hide();
                    $(this).parent().find(".edit").show();
                });
                $("#box").find(".save").click(function(){
                    var $name = $(this).parent().find(".name");
                    var $input = $(this).parent().find(".newText");
                    var inputValue = $input.val();
                    if(inputValue != ""){
                        $name.attr("title" ,inputValue).html(inputValue);
                        $(this).parent().find(".button").hide();
                        $(this).parent().find(".edit").show();
                    }else {
                        alertify.alert("请输入内容");
                    }
                });
            });
        </script>
    </body>
</html>