分类:前端技术

JQuery实现页面随滚动条滚动而动态加载内容的效果

分享一段网站找到的js特效代码,基于jquery

效果是类似cnbate.com,滚动条下拉到底部的时间,在下面自动加载新内容,就可以免分页了。不过cnbeta貌似不支持chrome

[codesyntax lang=”javascript”]

$(window).scroll(function(){
aa=parseInt($(document).height()); //获取文档的高度
oo=parseInt($(document).scrollTop()); //获取滚动条到顶部的垂直高度

if((aa-oo)<800){
if(!window.ia){
ia=1;
$.post("sys.php",{work:"hotels",s:('a=c+d 中国e+f&g>h')},function(msg){//用ajax即时获取伺服器上的资料
if(msg.length>0){
$("#index #tab5 #tab19").last().after(msg);
ia=null;
}else{
$("#index #div2").last().remove();
$("#index #tab5 #tab19").last().after('<span>Error:没有搜寻到任何结果,请尝试更换搜寻条件!</span>');
}
});
}
}
});

[/codesyntax]


jquery使用JSONP做跨域时,IE6的问题

今天一直在调一个bug,使用jquery的jsonp做跨域时,在ie6下面,每次点击按钮,$.getJSON提交都返回不到值。

后来用Fiddler分析后才发现$.getJSON提交后,http请求被中断了。

找了很久的问题,后来发现是因为按钮放置在<form>标签里面引起的,后把submit按钮放置在form标题外面,问题解决!

分析应该是form中断了$.getJSON发出的http请求,即使action=”javascript:void(0);” 也一样被中断

记录一下,方便以后的同行们碰到同样的问题““


jquery1.3+jquery ui 1.7.1

今天看了下jquery ui的更新情况,感觉还不错,挺漂亮的,

推荐有需要的朋友使用

http://jqueryui.com/download

 

a.jpg


用jquery打造仿开心网无刷新头像上传功能

代码修改于网络上一个asp.net的仿开心网头像

增加了php上传及生成头像功能,增加ajax无刷新上传

在ie7及firefox下通过测试

演示地址:http://www.ye55.com/thumb

妈的,困死我了。改了一个晚上。因为原来的js代码全部是在$(window).load(function())里执行的,但是我为了能方便ajax调用,把全部的js分成了三部分了。分三部分时老出问题,还好都改完了。现在还没优化代码,先不管了,以后要用的时候再优化一下。睡觉去了·····

未命名.jpg

代码下载

thumb.zip


上百个让你事半功倍的jquery插件

jQuery是一个了不起的javascript库,它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说,这使得javascript更加有趣。

File upload-文件上传

Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin

Form Validation-表单验证

jQuery Validation

Auto Help
Simple jQuery form validation
jQuery XAV – form validations
jQuery AlphaNumeric
Masked Input
TypeWatch Plugin
Text limiter for form fields
Ajax Username Check with jQuery

Form – Select Box stuff-表单-选取框

jQuery Combobox
jQuery controlled dependent (or Cascadign) Select List
Multiple Selects
Select box manipulation
Select Combo Plugin
jQuery – LinkedSelect
Auto-populate multiple select boxes
Choose Plugin (Select Replacement)

Form Basics, Input Fields, Checkboxes etc.-表单的基本输入框,选择框等

jQuery Form Plugin
jQuery-Form
jLook Nice Forms
jNice
Ping Plugin
Toggle Form Text
ToggleVal
jQuery Field Plugin
jQuery Form’n Field plugin
jQuery Checkbox manipulation
jTagging
jQuery labelcheck
Overlabel
3 state radio buttons
ShiftCheckbox jQuery Plugin
Watermark Input
jQuery Checkbox (checkboxes with imags)
jQuery SpinButton Control
jQuery Ajax Form Builder
jQuery Focus Fields
jQuery Time Entry

Time, Date and Color Picker-时间、日期和颜色选取

jQuery UI Datepicker
jQuery date picker plugin
jQuery Time Picker
Time Picker
ClickPick
TimePicker
Farbtastic jQuery Color Picker Plugin
Color Picker by intelliance.fr

Rating Plugins-投票插件

jQuery Star Rating Plugin
jQuery Star Rater
Content rater with asp.net, ajax and jQuery
Half-Star Rating Plugin

Search Plugins-搜索插件

jQuery Suggest
jQuery Autocomplete
jQuery Autocomplete Mod
jQuery Autocomplete by AjaxDaddy
jQuery Autocomplete Plugin with HTML formatting
jQuery Autocompleter
AutoCompleter (Tutorial with PHP&MySQL)
quick Search jQuery Plugin

Inline Edit & Editors-嵌入的编辑器,所见即所得的编辑器

jTagEditor
WYMeditor
jQuery jFrame
Jeditable – edit in place plugin for jQuery
jQuery editable
jQuery Disable Text Select Plugin
Edit in Place with Ajax using jQuery
jQuery Plugin – Another In-Place Editor
TableEditor
tEditable – in place table editing for jQuery

Audio, Video, Flash, SVG, etc-音频,视频,flash,svg等

jMedia – accessible multi-media embedding
JBEdit – Ajax online Video Editor
jQuery MP3 Plugin
jQuery Media Plugin
jQuery Flash Plugin
Embed QuickTime
SVG Integration
jQuery Multimedia Portfolio
jQuery YouTube Plugin

Photos/Images/Galleries-照片,图像,相册等

ThickBox
jQuery lightBox plugin
jQuery Multimedia Portfolio
jQuery Image Strip
jQuery slideViewer
jQuery jqGalScroll 2.0
jQuery – jqGalViewII
jQuery – jqGalViewIII
jQuery Photo Slider
jQuery Thumbs – easily create thumbnails
jQuery jQIR Image Replacement
jCarousel Lite
jQPanView
jCarousel
Interface Imagebox
Image Gallery using jQuery, Interface & Reflactions
simple jQuery Gallery
jQuery Gallery Module
EO Gallery
jQuery ScrollShow
jQuery Cycle Plugin
jQuery Flickr
jQuery Lazy Load Images Plugin
Zoomi – Zoomable Thumbnails
jQuery Crop – crop any image on the fly
Image Reflection

Google Map-google地图

jQuery Plugin googlemaps
jMaps jQuery Maps Framework
jQmaps
jQuery & Google Maps
jQuery Maps Interface forr Google and Yahoo maps
jQuery J Maps – by Tane Piper

Games-游戏

Tetris with jQuery
jQuery Chess
Mad Libs Word Game
jQuery Puzzle
jQuery Solar System (not a game but awesome jQuery Stuff)

Tables, Grids etc.-表格,格子等

UI/Tablesorter
jQuery ingrid
jQuery Grid Plugin
Table Filter – awesome!
TableEditor
jQuery Tree Tables
Expandable “Detail” Table Rows
Sortable Table ColdFusion Costum Tag with jQuery UI
jQuery Bubble
TableSorter
Scrollable HTML Table
jQuery column Manager Plugin
jQuery tableHover Plugin
jQuery columnHover Plugin
jQuery Grid
TableSorter plugin for jQuery
tEditable – in place table editing for jQuery
jQuery charToTable Plugin
jQuery Grid Column Sizing
jQuery Grid Row Sizing

Charts, Presentation etc.-图表

Flot
jQuery Wizard Plugin
jQuery Chart Plugin
Bar Chart

Border, Corners, Background-边,角,背景

jQuery Corner
jQuery Curvy Corner
Nifty jQuery Corner
Transparent Corners
jQuery Corner Gallery
Gradient Plugin

Text and Links-文本和链接

jQuery Spoiler plugin
Text Highlighting
Disable Text Select Plugin
jQuery Newsticker
Auto line-height Plugin
Textgrad – a text gradient plugin
LinkLook – a link thumbnail preview
pager jQuery Plugin
shortKeys jQuery Plugin
jQuery Biggerlink
jQuery Ajax Link Checker
Chili jQuery code highlighter plugin
jScroller

Tooltips-提示

jQuery Plugin – Tooltip
jTip – The jQuery Tool Tip
clueTip
BetterTip
Flash Tooltips using jQuery
ToolTip

Menus, Navigations-菜单,导航

jQuery Tabs Plugin – awesome! [demo nested tabs]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin)
jQuery idTabs
jdMenu – Hierarchical Menu Plugin for jQuery
jQuery SuckerFish Style
jQuery Plugin Treeview
treeView Basic
FastFind Menu
Sliding Menu
Lava Lamp jQuery Menu
jQuery iconDock
jVariations Control Panel
ContextMenu plugin
clickMenu
CSS Dock Menu
jQuery Pop-up Menu Tutorial
Sliding Menu

Accordions, Slide and Toggle stuff-幻灯、翻转

jQuery Plugin Accordion
jQuery Accordion Plugin Horizontal Way
haccordion – a simple horizontal accordion plugin for jQuery
Horizontal Accordion by portalzine.de
HoverAccordion
Accordion Example from fmarcia.info
jQuery Accordion Example
jQuery Demo – Expandable Sidebar Menu
Sliding Panels for jQuery
jQuery ToggleElements
Coda Slider
jCarousel
Accesible News Slider Plugin
Showing and Hiding code Examples
jQuery Easing Plugin
jQuery Portlets
AutoScroll
Innerfade

Drag and Drop-拖拽

UI/Draggables
EasyDrag jQuery Plugin
jQuery Portlets
jqDnR – drag, drop resize
Drag Demos

XML XSL JSON Feeds

XSLT Plugin
jQuery Ajax call and result XML parsing
xmlObjectifier – Converts XML DOM to JSON
jQuery XSL Transform
jQuery Taconite – multiple Dom updates
RSS/ATOM Feed Parser Plugin
jQuery Google Feed Plugin

Browserstuff-浏览器相关

Wresize – IE Resize event Fix Plugin
jQuery ifixpng
jQuery pngFix
Link Scrubber – removes the dotted line onfocus from links
jQuery Perciformes – the entire suckerfish familly under one roof
Background Iframe
QinIE – for proper display of Q tags in IE
jQuery Accessibility Plugin
jQuery MouseWheel Plugin

Alert, Prompt, Confirm Windows-警告,提示,确认框

jQuery Impromptu
jQuery Confirm Plugin
jqModal
SimpleModal

CSS-样式表单

jQuery Style Switcher
JSS – Javascript StyleSheets
jQuery Rule – creation/manipulation of CSS Rules
jPrintArea

DOM, Ajax and other jQuery plugins-DOm,ajax以及其他

FlyDOM
jQuery Dimenion Plugin
jQuery Loggin
Metadata – extract metadata from classes, attributes, elements
Super-tiny Client-Side Include Javascript jQuery Plugin
Undo Made Easy with Ajax
JHeartbeat – periodically poll the server
Lazy Load Plugin
Live Query
jQuery Timers
jQuery Share it – display social bookmarking icons
jQuery serverCookieJar
jQuery autoSave
jQuery Puffer
jQuery iFrame Plugin
Cookie Plugin for jQuery
jQuery Spy – awesome plugin
Effect Delay Trick
jQuick – a quick tag creator for jQuery
Metaobjects

elementReady


jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

一般网站上传头像部分会比较麻烦,如果完全程序控制的话,程序把上传的图片自动裁切成指定大小的头像的话,很有可能会破坏头像的整体美观。所以现在大多数web2.0网站都有用js或flash来实现头像的上传与选取!

现在用jquery加上jcrop插件的话,就可以非常简单的实现这些功能!如果再加上编写的一些ajax处理部分的话就基本上可以满足一般web2.0的使用要求了

PHP代码
  1. <?php  
  2. if($_GET[‘act’]==‘saveThumb’){  
  3.     $targ_w = $targ_h = 150;  
  4.     $jpeg_quality = 100;  
  5.   
  6.     $src = $_POST[‘bigImage’];  
  7.     $img_r = imagecreatefromjpeg($src);  
  8.     $dst_r = ImageCreateTrueColor( $targ_w$targ_h );  
  9.   
  10.     imagecopyresampled($dst_r,$img_r,0,0,$_POST[‘x’],$_POST[‘y’],$targ_w,$targ_h,$_POST[‘w’],$_POST[‘h’]);  
  11.   
  12.     header(‘Content-type: image/jpeg’);  
  13.     imagejpeg($dst_r,null,$jpeg_quality);  
  14.       
  15.     exit;  
  16. }  
  17. ?>  
  18. <html>  
  19.     <head>  
  20.   
  21.         <script src="jquery.pack.js"></script>  
  22.         <script src="jquery.Jcrop.pack.js"></script>  
  23.           
  24.         <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />  
  25.           
  26.         <script language="Javascript">  
  27.   
  28.             $(function(){  
  29.   
  30.                   
  31.             });  
  32.               
  33.             function goss(){  
  34.   
  35.                 jQuery(‘#cropbox’).Jcrop({  
  36.                     onChange: showPreview,  
  37.                     onSelect: showPreview,  
  38.                     onSelect: updateCoords,  
  39.                     aspectRatio: 1  
  40.                 });  
  41.   
  42.             }  
  43.   
  44.             function updateCoords(c)  
  45.             {  
  46.                 $(‘#x’).val(c.x);  
  47.                 $(‘#y’).val(c.y);  
  48.                 $(‘#w’).val(c.w);  
  49.                 $(‘#h’).val(c.h);  
  50.             };  
  51.   
  52.             function checkCoords()  
  53.             {  
  54.                 if ($(‘#x’).val()==){  
  55.                     alert(‘请先上传头像然后选择裁切头像最后进行保存!’);  
  56.                     return false;  
  57.                 }  
  58.             };  
  59.               
  60.             function showPreview(coords)  
  61.             {  
  62.                 var rx = 150 / coords.w;  
  63.                 var ry = 150 / coords.h;  
  64.                 var w2=$("#bigwidth").val();  
  65.                 var h2=$("#bigheight").val();  
  66.                 jQuery(‘#preview’).css({  
  67.                     width: Math.round(rx * w2) + ‘px’,  
  68.                     height: Math.round(ry * h2) + ‘px’,  
  69.                     marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,  
  70.                     marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’  
  71.                 });  
  72.             }  
  73.   
  74.         </script>  
  75.   
  76.     </head>  
  77.   
  78.     <body>  
  79. <?php  
  80. if($_GET[‘act’]==‘upload’){  
  81.     if($_POST[‘upload’]==‘upload’){  
  82.           
  83.         $uploaddir =‘upload/’;  
  84.         $uploadfile = $uploaddir . basename($_FILES[‘file’][‘name’]);  
  85.         //print_r($_FILES[‘file’]);  
  86.         //echo $uploadfile;  
  87.       
  88.         if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], $uploadfile)) {  
  89.             list($w$h$type$attr)=getimagesize($uploadfile);  
  90.             $str=;  
  91.             if($w>550){  
  92.                 $str="width:550px;";  
  93.             }  
  94.             if($h>550){  
  95.                 $str.="  height:550px;";  
  96.             }  
  97.             $str=emptyempty($str)?:"style=’ ".$str." ‘";  
  98.             $f1="<img src=’$uploadfile’ border=0 $str id=’cropbox’ >";  
  99.             $f2="<img src=’$uploadfile’ border=0  $str id=’preview’ >";  
  100.   
  101.               
  102.               
  103.             echo ‘<script language="javascript">parent.$("#showBig").html("’.$f1.‘");parent.$("#showThumb").html("’.$f2.‘");parent.goss();parent.$("#bigwidth").val("’.$w.‘");parent.$("#bigheight").val("’.$h.‘");parent.$("#bigImage").val("’.$uploadfile.‘");</script>’;  
  104.                   
  105.         }else {  
  106.             echo "<script>alert(‘文件上传失败!’);</script>";  
  107.         }  
  108.           
  109.     }  
  110. ?>  
  111.   
  112. <div style="margin:0px;font-size:12px;">  
  113. <FORM ACTION="?act=upload" METHOD=POST enctype="multipart/form-data">  
  114.   
  115.     <input type="file" name="file" id="file" />  
  116.   
  117.   <input type="submit" name="button" id="button" value="提交" />  
  118.   
  119.   <input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />  
  120. </FORM>  
  121. </div>  
  122.   
  123.   <?php  
  124.   exit;  
  125. }  
  126. ?>  
  127.   
  128.   
  129. <div id="showBig" style="width:500px;height:500px;border:2px solid #E6E0CE;padding:3px;"></div>  
  130. <iframe style="width:500px;height:60px;padding:0px;" src="?act=upload"></iframe>  
  131.   
  132.   
  133. <div id="showThumb" style="width:152px;height:152px;border:1px solid #cccccc;padding:1px; overflow: hidden;"></div>  
  134. <div style="margin-top:20px;">  
  135.     <form action="?act=saveThumb" method="post" onsubmit="return checkCoords();">  
  136.         <input type="hidden" id="bigImage" name="bigImage" />  
  137.         <input type="hidden" id="bigwidth" name="bigwidth" />  
  138.         <input type="hidden" id="bigheight" name="bigheight" />  
  139.         <input type="hidden" id="x" name="x" />  
  140.         <input type="hidden" id="y" name="y" />  
  141.         <input type="hidden" id="w" name="w" />  
  142.         <input type="hidden" id="h" name="h" />  
  143.         <input type="submit" value="保存用户头像" />  
  144.     </form>  
  145. </div>  
  146.     </body>  
  147.   
  148. </html>  

下载

 

jcrop.zip


自动从标题中提取关键词及ajax输入提示

公司网站正在新做的一个功能

考虑到最近blog里没写什么新的东西就把这段代码贴一下

test.html

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>自动从标题中提取关键词及ajax输入提示</title>  
  4. <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>  
  5.   <link href="css/global.css" rel="stylesheet" type="text/css" />  
  6. </head>  
  7. <body style="padding:20px;">  
  8. <form id="form1" name="form1" method="post" action="javascript:;">  
  9.    标题:<input type="text" name="title" id="title" />  
  10.   <label>  
  11.  <input type="submit" name="button" id="button" value="提交" onclick="sendTitle()"/>  
  12.   </label>  
  13. <input name="add" type="hidden" id="add" value="add" />  
  14. </form>  
  15. <br>  
  16.   企业:<input type="text" name="key" id="key" onkeyup="showKey()"/>  
  17. <input type="hidden" name="keys" id="keys" value="">  
  18. <style>  
  19. #showBox{overflow:auto;width:250px;border:1px solid #eee;height:100px;margin-top:10px;}   
  20. div{padding:3px;}   
  21. </style>  
  22. <div id="showBox"></div>  
  23.   
  24.   
  25. <script type="text/javascript">  
  26. function sendTitle(){   
  27.     if($("#title").val()==”){   
  28.         alert("标题不能为空");   
  29.     }else{   
  30.         $.post("?index/test/sendtitle",{title:$("#title").val()},function(data){   
  31.             var html="";   
  32.             for(var i = 0; i < data.length; i++){   
  33.                 html+="<div>"+data[i].companyid+" | "+data[i].c_name+"</div>"   
  34.             }   
  35.             $("#showBox").html(html);   
  36.             $("#key").val($("#title").val());   
  37.             $("#keys").val($("#title").val());   
  38.                
  39.         },"json");   
  40.     }   
  41. }   
  42.   
  43. function showKey(){   
  44.     var key=$("#key").val();   
  45.     var keys=$("#keys").val();   
  46.     if(key!=keys){   
  47.         $.post("?index/test/sendtitle",{title:key},function(data){   
  48.             var html="";   
  49.             for(var i = 0; i < data.length; i++){   
  50.                 var ii2=i+1;   
  51.                 html+="<div>"+i2+" | "+data[i].c_name+"</div>"   
  52.             }   
  53.             $("#showBox").html(html);   
  54.             $("#keys").val(key);   
  55.         },"json");   
  56.     }   
  57. }   
  58.   
  59. </script>  
  60.   
  61. </body>  
  62. </html>  

 

php处理部分:

 

PHP代码
  1. <?php   
  2. class box   
  3. {   
  4.     public function __construct($db)   
  5.     {   
  6.         $this->db=$db;   
  7.     }   
  8.   
  9.     //读出全部的企业关键词,用于处理标题,提取标题中对应有关的企业列表   
  10.     public function readCompanyKey($cachetime=3600*24) //关键词库的缓存时间默认为一天   
  11.     {   
  12.         global $ROOT_PATH;   
  13.         $file=$ROOT_PATH.‘/temp/CompanyKey.inc’;   
  14.         if(!file_exists($file)){   
  15.             $this->writeCompanyKey();   
  16.         }else{   
  17.             if(time()-filemtime($file)>$cachetime){   
  18.                 $this->writeCompanyKey();   
  19.             }   
  20.         }   
  21.         $row=unserialize(file_get_contents($file));   
  22.         return $row;   
  23.     }   
  24.        
  25.     //缓存全部的企业关键词库   
  26.     public function writeCompanyKey()   
  27.     {   
  28.         global $ROOT_PATH;   
  29.         $file=$ROOT_PATH.‘/temp/CompanyKey.inc’;   
  30.         $rs=$this->db->query("select * from `companykey`");   
  31.         $row = $rs->fetchall(PDO::FETCH_ASSOC);   
  32.            
  33.         $content=serialize($row);   
  34.         $fs=fopen($file,‘w’);   
  35.         if(fwrite($fs$content) === FALSE) {   
  36.             echo "不能写入到文件!请注意temp文件夹的读写权限";   
  37.             exit;   
  38.         }else{   
  39.             return true;   
  40.         }   
  41.         fclose($fs);   
  42.     }   
  43.        
  44.     //从标题中通过关键词库获取相关的企业列表   
  45.     public function getComapnyList($title)   
  46.     {   
  47.         $title=strtolower($title);   
  48.         $key=$this->readCompanyKey();   
  49.         //if(count($key)<=0){echo ‘出错,关键词不存在!’;exit;}   
  50.         foreach($key as $v){   
  51.             if(strpos($title,$v[‘key’])!==false){   
  52.                 $companyid[]=$v[‘companyid’];   
  53.                 //echo ‘1’;   
  54.             }   
  55.         }   
  56.            
  57.         //print_r($companyid);   
  58.         if(count($companyid)>0){   
  59.             $companyidArr=$this->listOrder($companyid);  //对获取的企业按权重进行排序,去除重复的企业   
  60.             foreach($companyidArr as $v){   
  61.                 $rs=$this->db->query("select `companyid`,`c_name` from `company` where `companyid`=’".$v."’ limit 1");   
  62.                 $row = $rs->fetchall(PDO::FETCH_ASSOC);   
  63.                 $list[]=$row[0];   
  64.             }   
  65.             return $list;   
  66.         }else{   
  67.             return false;   
  68.         }   
  69.     }   
  70.        
  71.   
  72.     //排序算法,按标题中同一个关键词的出现个数对其所对应的企业进行排序,并去除重复企业   
  73.     public function listOrder($arr){   
  74.         if(!is_array($arr)){   
  75.             return ;   
  76.         }   
  77.         $count=count($arr);   
  78.         $arr2=array_unique($arr);   
  79.         foreach($arr2 as $k=>$v){   
  80.             $i=0;   
  81.             $i2=0;   
  82.             for($l=$i2;$l<$count;$l++){   
  83.                 if($v==$arr[$l]){   
  84.                     $i++;   
  85.                     $s[$k]=$i;   
  86.                     //$s[$k][‘key’]=$i;   
  87.                     //$s[$k][‘var’]=$v;   
  88.                 }   
  89.                 $i2++;   
  90.             }   
  91.         }   
  92.         arsort($s);   
  93.         foreach($s as $k=>$v){   
  94.             $row[]=$arr[$k];   
  95.         }   
  96.         return $row;   
  97.     }   
  98. }   
  99.   
  100. $box=new box($db1);   
  101. if($uri[2]==‘sendtitle’){   
  102.     $title=$_POST[‘title’];   
  103.     $list=$box->getComapnyList($title);   
  104.     echo json_encode($list);   
  105.     exit;   
  106. }   
  107. $smarty->display("index/test.html");   
  108. exit();   
  109. ?>  

效果

qq截图未命名.jpg

 


jqeruy打造滑动方框效果。仿照mootools!

项目需要用到滑动方框效果,好不容易到网上找到了二个可用的代码,。一个是prototype写的,另一个是mootools写的。

经过考虑。最后选的是mootools.

但项目主体使用的是jquery。二个类库同时使用时会产生冲突。整了一段时间后。mootools与项目其它部分整合得差不多了,但前几天突然发现mootools的动画效果既然与jquery的load()还有$.post等起冲突。。晕死。。白弄了。

后来下决心自己用jquery写一个滑动效果。。写了个把小时。感觉做出的效果跟mootools的滑动效果非常类似了。到现在这个问题才大功告成。

现在把代码贴出来。。在需要的朋友们可以借鉴借鉴。。嘿嘿

演示地址:http://www.ye55.com/test.html

下载地址:http://www.ye55.com/js_test1.rar (包含jquery类库)

关键js代码如下:

 

JavaScript代码
  1. <SCRIPT LANGUAGE="JavaScript">   
  2. <!–   
  3.     function BoxLeft(content){   
  4.     var speed = 500;//滑动速度 0.1秒   
  5.     var left=jq("#"+content).offset().left;   
  6.   
  7.     jq("div .scrolling-content").each(function(){   
  8.         var thisleft=jq(this).offset().left-left;   
  9.       jq(this).animate({left:thisleft},speed);   
  10.     });   
  11. }   
  12. //–>   
  13. </SCRIPT>  

用jquery做了一个ajax聊天室

现要只是实现了聊天室的基本聊天,ajax无刷新显示功能,会员功能 等正在制作中。

演示地址:http://www.ye55.com/chat

下载地址:

chat.rar

数据库sql:

 

SQL代码
  1. CREATE TABLE `message` (   
  2.   `mid` int(20) NOT NULL auto_increment,   
  3.   `msg` varchar(255) NOT NULL,   
  4.   `uservarchar(50) NOT NULL,   
  5.   `timeint(10) NOT NULL,   
  6.   PRIMARY KEY  (`mid`),   
  7.   KEY `user` (`user`)   
  8. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=161 ;   
  9.   
  10.   
  11.   
  12. CREATE TABLE `session` (   
  13.   `id` varchar(32) NOT NULL,   
  14.   `timeint(10) NOT NULL,   
  15.   `timenow` int(10) NOT NULL,   
  16.   `data` text NOT NULL,   
  17.   `ip` varchar(15) NOT NULL,   
  18.   PRIMARY KEY  (`id`)   
  19. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;   
  20.   

现在程序开源,其它的像字体,字色,会员,在线列表等功能将陆续完成。

主要的三个页面的代码

1、 index.php

 

XML/HTML代码
  1. <?php  
  2. //程序设计:℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  3. require_once("config.php");   
  4. ?>  
  5. <!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7.  <HEAD>  
  8.   <TITLE> chat </TITLE>  
  9.   <META NAME="Generator" CONTENT="EditPlus">  
  10.   <META NAME="Author" CONTENT="">  
  11.   <META NAME="Keywords" CONTENT="">  
  12.   <META NAME="Description" CONTENT="">  
  13.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  14.   <link href="css/global.css" rel="stylesheet" type="text/css" />  
  15.   <SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>  
  16.  </HEAD>  
  17.  <BODY>  
  18.  <div id="main">  
  19.     <div id="main_left" style="float:none;margin:0px auto;">  
  20.         <div id="chat_m" style="width:500px;height:500px;border:#cccccc 1px solid;overflow:auto;">Loading…</div>  
  21.   
  22.          <div id="main_l_from">  
  23.          <FORM METHOD=POST ACTION="javascript:void(0)">  
  24.             昵称:<INPUT TYPE="text" NAME="user" id="user" size="8" value="<?=$_SESSION[‘user’]?>"> 内容:   
  25.             <INPUT TYPE="text" NAME="message" id="message" style="width:250px;"> <INPUT TYPE="submit" name="sub" value="发言" id="sub">  
  26.          </div></FORM>  
  27.     </div>  
  28.     <!–<div id="main_right">  
  29.     <h2>在线会员</h2>  
  30.     </div>>  
  31. <SCRIPT LANGUAGE="JavaScript">  
  32. <!–   
  33.     $("#chat_m").load("chat.php");   
  34.     $("#sub").click(function(){   
  35.         if($("#user").val()==”){   
  36.             alert("昵称不能为空!");   
  37.         }else if($("#message").val()==”){   
  38.             alert("聊天内容不能为空!");   
  39.         }else{   
  40.                 $.post("ajax.php?act=send",{user:$("#user").val(),msg:$("#message").val()},function(data){   
  41.                     if(data.msg===true){   
  42.                         showmsg();   
  43.                         $("#message").val("");   
  44.                     }else{   
  45.                         alert(data.msg);       
  46.                     }   
  47.                 },"json")   
  48.             }   
  49.     })   
  50. function sc()    
  51. {    
  52. var e=document.getElementById("chat_m")    
  53. ee.scrollTop=e.scrollHeight;    
  54. }    
  55. //var s=setInterval("sc()",200)    
  56. //–>  
  57. </SCRIPT>  
  58. <hr size=1>  
  59. <center>程序设计:℃冻番茄 QQ:7279915 E-mail:web@ye55.com <a href="http://www.phpd.cn">www.phpd.cn</a> </center>  

 

2、chat.php

 

 

XML/HTML代码
  1. <?php  
  2. require_once("config.php");   
  3. //程序设计:℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  4. $fist=$db->getfirst("select `mid` from `message` order by `mid` desc ");   
  5. $mid=$fist[‘mid’]-40; //初始化聊天记录条数   
  6. $mid=$mid<=0?0:$mid;   
  7. $mid=0;   
  8. ?>  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  10.     <div id="contents"></div>  
  11.     <INPUT TYPE="text" style="display:none" NAME="mid" id="hide_mid" value="<?=$mid?>">  
  12.      <div id="end" style="width:400px;display:none;clear:both;"></div>  
  13.   <SCRIPT LANGUAGE="JavaScript">  
  14.   <!–   
  15.   //alert($("#hide_mid").val());   
  16.         function showmsg(){   
  17.             mids=$("#hide_mid").val();   
  18.                
  19.             $.post("ajax.php?act=display",   
  20.                    {mid:mids},   
  21.                    function(data){   
  22.                 //alert(data.list[2].user);   
  23.                         $("#hide_mid").val(data.mid);   
  24.                         if(data.list!=0){   
  25.                             for(i=0;i<data.list.length;i++){   
  26.                                 $("#contents").append("<br />"+data.list[i].user+"说: "+data.list[i].msg+"    ["+data.list[i].time1+"]");   
  27.                                 sc();   
  28.                             }   
  29.                         }   
  30.                    },"json");   
  31.             }   
  32.         function scrollWindow() {scroll(0, 100000); }    
  33.             showmsg();   
  34.             setInterval("showmsg()", 4000);    
  35.   //–>  
  36.   </SCRIPT>  

 

3、ajax.php

 

PHP代码
  1. <?php   
  2. require_once("config.php");   
  3. ////程序设计:℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  4. //发信息   
  5. if($_GET[‘act’]==‘send’){   
  6.     $msg=$_POST[‘msg’];   
  7.     $user=$_POST[‘user’];   
  8.     if(emptyempty($msg) || emptyempty($user)){   
  9.         $return[‘msg’]=‘聊天内容或昵称不能为空’;   
  10.     }else{   
  11.         $time=time();   
  12.         if($db->insert("insert into `message` (`msg`,`user`,`time`) values (‘$msg’,’$user’,’$time’)")){   
  13.             $return[‘msg’]=true;   
  14.         }else{   
  15.             $return[‘msg’]="err";   
  16.         }   
  17.     }   
  18.     echo json_encode($return);   
  19. }elseif($_GET[‘act’]==‘display’){   
  20.     if(isset($_POST[‘mid’])){   
  21.         $s=" where `mid`>’".$_POST[‘mid‘]."’ ";   
  22.     }else{   
  23.         $s=;   
  24.     }   
  25.     $sql="select * from `message` $s order by `mid`";   
  26.     $total=$db->getcount($sql);   
  27.     if($total==0){   
  28.         $a=0;   
  29.     }else{   
  30.         $result=$db->query($sql);   
  31.         while($row=$db->getarray($result)){   
  32.             $row[‘time1’]=date(‘Y-m-d H:i:s’,$row[‘time’]);   
  33.             $a[]=$row;   
  34.             $b=$row[‘mid’];   
  35.         }   
  36.     }   
  37.     $ccc=array(‘list’=>$a,‘mid’=>$b);   
  38.     echo json_encode($ccc);   
  39. }   
  40. ?>  

第一次使用json,汗,以前都没注意到用这么个数据类型

一直都是直接用ajax返回html片段,复杂点的就用xml。以前一直知道有json这种类型,一直没有使用过,但没想到用它做返回是这么的简单,晕了。。。下面是一段ajax发表评论的程序。。

采用的是jquery类。

代码如下:

js代码

 

XML/HTML代码
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. <!–   
  3.     function send(){   
  4.         var msg="";   
  5.         if($("#s_content").val()==""){   
  6.             alert(" 评论内容不能为空! ");   
  7.             $("#s_content").focus();   
  8.             return false;   
  9.         }else if($("#s_secode").val()==”){   
  10.             alert(" 验证码不能为空! ");   
  11.             $("#s_secode").focus();   
  12.             return false;   
  13.         }   
  14.         $.post("?idea/send_commend",   
  15.                { content:$("#s_content").val(),iid:<%$idea.iid%>,secode:$("#s_secode").val() },   
  16.                function(data){   
  17.                     if(data.msg===true){   
  18.                         $("#s_content").val("");   
  19.                         $("#s_secode").val("");   
  20.                         alert("评论发布成功");   
  21.                     }else{   
  22.                         alert(data.msg);   
  23.                     }   
  24.                     $("#secode_box").html("<IMG SRC=‘includes/seccode.php’ onclick=\"javescript:recode()\" BORDER=‘0’ ALT=‘点击刷新’>");   
  25.                },"json");   
  26.     }   
  27.   
  28.     function recode(){   
  29.         $("#secode_box").html("<IMG SRC=‘includes/seccode.php’ onclick=\"javescript:recode()\" BORDER=‘0’ ALT=‘点击刷新’>");   
  30.     }   
  31. //–>  
  32. </SCRIPT>  

 

因采用的是框架,?idea/send_commend 页面代码如下:

 

PHP代码
  1. <?php   
  2. if(isset($_SESSION[‘member’])){   
  3.     if($_POST[‘secode’]!=$_SESSION[‘code’]){   
  4.         $msg[‘msg’]=‘验证码不正确!’;   
  5.     }else{   
  6.         if($idea->writeCommend($_POST[‘iid’],$_SESSION[‘member’][‘mid’],$_POST[‘content’],$_SESSION[‘member’][‘mid’])){   
  7.             $msg[‘msg’]=true;   
  8.         }else{   
  9.             $msg[‘msg’]=‘评论出错!’;   
  10.         }   
  11.            
  12.     }   
  13. }else{   
  14.     $msg[‘msg’]=‘您没有登陆,请登陆后再发布评论!’;   
  15. }   
  16. echo json_encode($msg);   
  17. exit;   
  18. ?>