实例
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8;>
<title>仿新浪微博发布页面</title>
<link rel="icon" type="image/x-icon" href="img/logo.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-fixed-top" role="navigation" style="background: #fff;height:45px;border-top: 2px solid #ff6500;">
<div class="container" >
<div class="navbar-left ">
<div class="navbar-header menu">
<a href=""> <img src="img/wb_logo.png"> </a>
<a href="#"><i class="glyphicon glyphicon-home"></i> 首页 </a>
<a href="#"><i class="glyphicon glyphicon-expand"></i> 视频 </a>
<a href="#"><i class="glyphicon glyphicon-eye-open"></i> 发现 </a>
</div>
</div>
<form class="form-inline navbar-right navbar-form" role="search">
<div class="form-group" style="position: relative;">
<input type="text" class="form-control" placeholder="#大家正在搜#" >
<i class="glyphicon glyphicon-search btn_search" ></i>
</div>
<a href="#"><i class="glyphicon glyphicon-user"></i> Feir.H </a>
<a href="#"><i class="glyphicon glyphicon-cog"></i> </a>
</form>
</div>
</nav>
<div class="container container_bg" >
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-6 col-xs-12 my_edit" >
<div class="row" id="edit_form" >
<span class="pull-left" style="margin:15px;font-size: 18px;">有什么新鲜事想告诉大家?</span>
<span class="tips pull-right" style="margin:15px;"></span>
<form role="form" style="margin-top: 50px;">
<div class="form-group">
<div class="col-sm-12">
<div contentEditable="true" id="content" class="form-control " ></div>
</div>
<div class="col-sm-12" style="margin-top: 12px;">
<span class="emoji" >表情</span>
<span class="pic" >图片 </span>
<!-- <span>
<input type="file" name="" class="select_Img" style="display: none" >
<img class="preview" src="">
</span> -->
<div class="myEmoji" >
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#set" data-toggle="tab">
预设
</a>
</li>
<li><a href="#hot" data-toggle="tab">热门</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="set">
<div class="emoji_1"></div>
</div>
<div class="tab-pane fade" id="hot">
<div class="emoji_2"></div>
</div>
</div>
</div>
<button type="button" id="send" class="btn btn-default pull-right disabled">发布</button>
</div>
</div>
</form>
</div>
<div class="row item_msg" >
<div class="col-sm-12 col-xs-12 message" >
<img src="img/8.jpg" class="col-sm-2 col-xs-2" style="border-radius: 50%">
<div class="col-sm-10 col-xs-10">
<span style="font-weight: bold;">Feir.H</span>
<br>
<small class="date" style="color:#999">1分钟前</small>
<div class="msg_content">happy day!
<img class="mypic" src="img/bg1.jpg" >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 part_right" >
<div class="row text-center inform">
<img src="img/8.jpg"style="border-radius: 50%">
<h4 style="font-weight: bold;">Feir.H</h4>
<div class="col-sm-12 my_inform" >
<div class="col-sm-4 col-xs-4">
<div>1</div>
<div class="sort">关注</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>520</div>
<div class="sort">粉丝</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>20</div>
<div class="sort">博客</div>
</div>
</div>
</div>
<div class="row part_hot" >
<div class="col-sm-12">
<span class="pull-left" style="padding: 10px;font-size:16px;font-weight: bold;">热门话题</span>
<span class="pull-right" style="padding: 10px;">换话题</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%;border-color:#6A213B; ">
<div class="col-sm-12 item_hot" >
<span class="pull-left">#php中文网#</span>
<span class="pull-right item_num">34.6亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#今天下雪啦#</span>
<span class="pull-right item_num">2.6亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#亚洲新歌榜#</span>
<span class="pull-right item_num">5.4亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#赶紧转发~锦鲤杨超越~#</span>
<span class="pull-right item_num">15亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#HTML中文网#</span>
<span class="pull-right item_num">10.8亿</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%;border-color:#6A213B;">
<div class="col-sm-12 text-center" style="padding: 10px"><a href="#">查看更多</a></div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").keyup(function(){
//判断输入的字符串长度
var content_len = $("#content").text().replace(/\s/g,"").length;
$(".tips").text("已经输入"+content_len+"个字");
if(content_len==0){
// alert(content);
$(".tips").text("因春节要参加各种聚会，女子租个2万的包回老家>> 热门微博");
$("#send").addClass("disabled");
return false;
}else{
$("#send").removeClass("disabled");
}
});
//点击按钮发送内容
$("#send").click(function(){
var content=$("#content").html();
var date=new Date()
var yy=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();//将日期以指定格式输出
$(".item_msg").after("<div class='col-sm-12 col-xs-12 message' > <img src='img/8.jpg' class='col-sm-2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold;''>Feir.H</span> <br><small class='date' style='color:#999'>"+yy+"</small><div class='msg_content'>"+content+"</div></div></div>");
$('.item_msg').html('')
});
//添加表情包1
for (var i = 1; i < 60; i++) {
$(".emoji_1").append("<img src='img/f"+i+".png' style='width:35px;height:35px' >");
}
//添加表情包2
for (var i = 1; i < 61; i++) {
$(".emoji_2").append("<img src='img/h"+i+".png' style='width:35px;height:35px' >");
}
$(".emoji").click(function(){
$(".myEmoji").show();
//点击空白处隐藏弹出层
$(document).click(function (e) {
if (!$("#edit_form").is(e.target) && $("#edit_form").has(e.target).length === 0) {
$(".myEmoji").hide();
}
});
});
//将表情添加到输入框
$(".myEmoji img").each(function(){
$(this).click(function(){
var url = $(this)[0].src;
console.log(url)
$('#content').append("<img src='"+url+"' style='width:25px;height:25px' >");
$("#send").removeClass("disabled");
})
})
// $('#content').keyup(function (){
// var len=$(this).text().length
//
// if($(this).val().length==0){
//
// $('.tips').text('因春节要参加各种聚会，女子租个2万的包回老家>> 热门微博')
// }
//
//
//
// })
//放大或缩小预览图片
$(".mypic").click(function(){
var oWidth=$(this).width(); //取得图片的实际宽度
var oHeight=$(this).height(); //取得图片的实际高度
if($(this).height()!=200){
$(this).height(200);
}else{
$(this).height(oHeight + 200/oWidth*oHeight);
}
})
})
</script>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
