1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

PHP+jQuery,UI实现ajax许愿墙功能、贴便签、贴标签功能(案例)

小川 前端
查看演示  

PHP+jQueryUI实现许愿墙功能、贴便签、贴标签功能(案例):

01.jpg

当然首先要先导入sql.文件,加几条数据。

DROP TABLE IF EXISTS `notes`;
CREATE TABLE `notes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` varchar(200) NOT NULL,
  `color` enum('yellow','blue','green') NOT NULL DEFAULT 'yellow',
  `xyz` varchar(100) DEFAULT NULL,
  `name` varchar(30) DEFAULT NULL,
  `addtime` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

INSERT INTO `notes` VALUES 
('1','jQuery实现许愿墙功能','yellow','584|95|22','小川编程','2016-10-11 10:06:22');
INSERT INTO `notes` VALUES 
('2','效果不错!。','blue','374|192|24','yun','2016-10-11 10:09:25');
INSERT INTO `notes` VALUES 
('3','学习了!','green','372|40|25','顶级','2016-10-11 10:09:25');
INSERT INTO `notes` VALUES 
('4','测试,木奇才枯而非','blue','339|212|27','ECHO','2016-10-12 13:03:10');


1、引入jquery库文件(jquery.js)。

2、引入jquery-UI插件(jquery-ui.min.js)。

3、引入jquery.fancybox-1.3.1.pack.js插件。

4、定义显示便签容器的ID。

5、读出便签数据,用JS组装添加到前面的容器显示起来。

<!-- 演示区 start -->
<?php
include_once('db.php');       //引入数据库连接文件
include_once('function.php'); //用来处理便签时间的(可有可无)
$notes = '';  
$left='';  
$top='';  
$zindex='';  
$query = mysql_query("select * from notes order by id desc limit 0, 50");
while($row=mysql_fetch_array($query)){
	list($left,$top,$zindex) = explode('|',$row['xyz']); 
	$time = strtotime($row['addtime']);
	$notes.= '
	<div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:'.$zindex.'">
		<span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).'
		<p class="user">——'.htmlspecialchars($row['name']).'<br/>('.tranTime($time).')</p>
	</div>';
}
?>

<!-- 引入样式 引入相关JS文件 -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/global.js"></script>


<div id="main">
  <div id="add"><a href="add_note.html" id="fancy"><img src="images/btn.gif" alt="新增便签" /></a></div>
  <div class="demo">
       <?php echo $notes;?>
  </div>
</div>
<!-- 演示区 end -->

6、引入global.js文件。

    作用:添加便签、托动便签、修改便签等控制JS代码。


你可以查看在线演示,观看效果哦。 当然也可以免费下载源码!源码另有详细的使用说明!


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/79.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情