一款带搜索框可拖动的聊天消息盒子,可以点击搜索图标来打开搜索框,也可以直接拖拽标题栏将消息盒子放在任意的位置,消息列表的内容可以随意增加或删除。
页面的head部分,需远程调用font-awesome图标字体库,代码如下:
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,需设置好消息盒子的标题栏、消息列表和底部的各自内容,代码如下:
<div class='info'>
<h1>带搜索框可拖动的聊天消息盒子</h1>
<span>
素材火
<i class='fa fa-heart animated infinite pulse'></i>
<a href='http://www.sucaihuo.com'>Richer</a>
<div class='spoilers'>顶部标题栏可拖拽</div>
</span>
</div>
<div class='chat'>
<header>
<h2 class='title'>
<a href='http://www.sucaihuo.com/'>素材火</a>
</h2>
<ul class='tools'>
<li>
<a class='fa fa-gear' href='#'></a>
</li>
<li>
<a class='fa fa-search' href='#'></a>
</li>
</ul>
</header>
<div class='body'>
<div class='search'>
<input placeholder='Search...' type='text'>
</div>
<ul>
<li>
<a class='thumbnail' href='#'>鹰眼</a>
<div class='content'>
<h3>杰瑞米·雷纳</h3>
<span class='preview'>嗯嗯,中餐不错哦!</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>寡姐</a>
<div class='content'>
<h3>斯嘉丽·约翰逊</h3>
<span class='preview'>我倒是想吃中餐呢!</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>浩克</a>
<div class='content'>
<h3>马克·鲁法洛</h3>
<span class='preview'>上次不是才吃过的嘛!</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>雷神</a>
<div class='content'>
<h3>克里斯·海姆斯沃斯</h3>
<span class='preview'>去吃阿拉伯烤肉怎么样?</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>美队</a>
<div class='content'>
<h3>克里斯·埃文斯</h3>
<span class='preview'>有啊,不如下周聚餐吧!</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>托尼</a>
<div class='content'>
<h3>小罗伯特·唐尼</h3>
<span class='preview'>队长,你请客的事还有戏吗?</span>
<span class='meta'>
2天前·<a href='#'>朋友</a>·<a href='#'>回复</a>
</span>
</div>
</li>
</ul>
</div>
<footer>
<a href='#'>查看全部消息</a>
</footer>
</div>
页面的底部,需引入jQuery和UI库,并引入必要的JS文件,代码如下:
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791