Anymoore

博客

  • “学工在线”正式服役

    学工在线上线ed，从前期的用户调研，到最后设计、实现，一段漫长略带艰辛的过程，大家都投入了大量时间精力，熬到今天大家都挺不容易（尤其美工、前端组）。

    student-affairs

    后面不可避免会存在一些问题，继续努力，一起攻克吧。

    一个好的服务网站，主要还是靠内容来吸引用户的，学工的同学们加油，仅此挂篇小志留作纪念……

    PS：学工在线分三专区：学生工作、新闻资讯、学习服务，除此外，相关平台包括：校园活动查询、电子地图(ing)、二手市场(ing)、学生资助、心理咨询etc…

  • JSON跨域调用与动态脚本加载

    下面是在anyjs中JSON跨域的实现（JSONP），原理很简单，动态生成script标签，没有使用到callback（可支持），需要与后台协调保持对象一致，anyjs默认采用JSONP。

    01 anyjs.gjsonp=function(url,callbackfn){
    02     var h=document.getElementsByTagName(‘head’)[0];
    03     var s=anyjs.create(‘script’);
    04     anyjs(s).set(‘type’, ‘text/javascript’).set(‘src’, url);
    05     anyjs(h).apd(s);
    06     if(anyjs.ie){ //IE6+
    07             s.onreadystatechange = function () {
    08             if (s.readyState == ‘loaded’ || s.readyState == ‘complete’) {
    09                 (callbackfn)(JSONP);
    10                 JSONP=null;
    11                anyjs(s).rmv();
    12             }
    13         }
    14     } else {//GECKOS、WEBKIT、ETC..
    15             s.onload = function() {
    16             (callbackfn)(JSONP);
    17             JSONP=null;
    18             anyjs(s).rmv();
    19         }
    20     }
    21     return false;
    22 };//end

    使用anyjs跨域调用示例：

    01 //JSONP跨域测试开始
    02 $(“#jsonp”).click(function(){
    03 y=$.create(“div”);
    04 $(y).set(“id”,“bglay”).set(“class”,“bglay”);
    05 $(“body”).ist(y);
    06 x=$.create(“div”);
    07 $(x).set(“id”,“ajax”);
    08 $(x).set(“class”,“ajax”);
    09 $(“body”).ist(x);
    10 $(“#ajax”).show();
    11 $.gjsonp(“http://www.focusstudio.org/data.php?type=jsonp”,function(data){
    12 var arr=[],str=“”;
    13 for(var i=0;i<data.length;i++){
    14
    15 arr.push(data[i].a);
    16 str+=data[i].b+“|”;
    17 }
    18 $(“#ajax”).h(arr.join(“‘”)+str);
    19 });
    20
    21 $(“#ajax”).click(function(){$(“div.bglay”,“#ajax”).fout();$(“div.bglay”,“#ajax”).rmv();});
    22 });
    23 //跨域jsonp测试结束

    后台相关代码：

    1 <?php
    2 header(“Content-Type:application/x-javascript; charset=utf-8”);
    3 $callback = isset($_GET[‘callback’]) ? $_GET[‘callback’] : ‘JSONP’;
    4 $json=array(array(‘a’=>‘enimo1jsonp’,‘b’=>‘test1jsonp’),array(‘a’=>‘enimo2’,‘b’=>‘test2jsonp’));
    5 echo ‘var ‘.$callback.‘=’.json_encode($json);
    6 ?>

    到这里，要实现动态加载js脚本，我想大家应该不言自明了吧。

  • 用anyjs实现简单的LightBox效果

    anyjs是自己正在筹备的一个轻量级js库，主要为了提高平时开发效率，目前只封装了一些开发过程中常用到的事件方法以及DOM操作，当然bug还很多，希望高手指教，不胜感激，SVN地址：http://anyjs.googlecode.com/svn/trunk/
    下面是在校毕业生专题中实现lightbox效果的代码，兼容目前主流的FF/Chrome/IE6+，效果简单基础，如果看起来比较乱，希望见谅。
    01 <script>
    02 window.onload=function(){
    03 $(“img”).each(function(i){
    04 $(i).click(function(){
    05
    06 /* y=$.create(“div”);
    07 $(y).set(“id”,”bglay”).set(“class”,”bglay”);
    08 $(“body”).ist(y);
    09 x=$.create(“div”);
    10 $(x).set(“id”,”ajax”);
    11 $(x).set(“class”,”ajax”); */
    12
    13 $(“#bglay”).show();
    14 $(“#ajax”).show().h(“<img src=’images/load.gif’ /> 正在加载….”);
    15 var anyimg=new Image();
    16 anyimg.src=$(i).get(“src”);
    17 anyimg.onload=function(){$(“#ajax”).h(“<img src=’”+anyimg.src+“‘ alt=’点击关闭’ width=’500′  border=’0’/>”);}
    18
    19 return false;
    20 });
    21 });
    22
    23 $(“#ajax”).click(function(){$(“#bglay”,“#ajax”).hide();});
    24 }
    25 </script>
    26 <style>
    27 *{margin:0;padding:0;}
    28 #ajax{
    29 position:fixed;
    30 _position:absolute;
    31 left:50%;
    32 top:100px;
    33 _top:expression(document.documentElement.scrollTop+100+“px”);
    34 width:500px;
    35 margin-left:-250px;
    36 border:2px solid #ccc;
    37 color:#696969;
    38 z-index:99;
    39 background-color:#fff;
    40 display:none;
    41 }
    42 #bglay{
    43 position:fixed;
    44 _position:absolute;/*ie6*/
    45 z-index:2;
    46 overflow:hidden;
    47 top:0px;
    48 left:0px;
    49 width:100%;
    50 height:100%;
    51 background:#000;
    52 opacity:0.7;
    53 filter: Alpha(opacity=70);
    54 display:none;
    55 }
    56 </style>
     
    有时间再陆续将几个常用web2.0效果实现，放在这当做学习笔记吧。