这个东西爱也是恨也是……
Aug 14
当门户网站频道过多的时候,并且绑定的是不同的二级子域。
这个时候就会发现,JS在整站中跨域的问题很让人恼火。
到处都是无权限。
我们会想到用iframe的方式来调用页面来实现跨域,但是那很麻烦很麻烦,而且还不好控制。
JQ中不是有跨域的解决方案吗?
NO!那个也麻烦。
flash本身就有跨域的方案,本身加入System.security.allowDomain("*");
然后写一个跨域规则的crossdomain.xml即可。

flash跨域类这么写:

package {
  
  import flash.display.*;
  import flash.events.*;
  import flash.net.*;
  import flash.external.ExternalInterface;
  import flash.system.Security;  

  public class FlashProxy extends Sprite{  
    
    private var _params:Object;
    private var _loader:URLLoader;
    private var _method:String;
    private var _id:String;
    private var _parse:Boolean;
    private var _inited:Boolean;
    private var _data:String;
    private var _xml:XML;
    
    public function FlashProxy(){
      Security.allowDomain('*');
      _inited = false;
      _data = "";
      _parse = true;
      _method = URLRequestMethod.POST;
      _loader = new URLLoader();
      configureListeners(_loader);
    }
    
    public function load(page:String,params:Object=null):void{
      if(!_inited){
        showError("FlashProxy还没有初始化!");
      }
      if(page == null || page == undefined){
        showError("page参数为必须的!");
        return;
      }
      var vars:URLVariables = new URLVariables();
      vars.tmp = Math.random();
      if(params != null){        
        for(var key in params){
          if(key == "tmp"){
            continue;
          }
          vars[key] = params[key];
        }
      }      
      _loader.dataFormat = URLLoaderDataFormat.TEXT;
      var request:URLRequest = new URLRequest(page);
      request.method = _method;
      request.data = vars;
      _loader.load(request);
    }
    
    public function setParse(value:Boolean):void{
      _parse = value;
    }
    
    public function setMethod(value:String):void{
      if(value == null || value == undefined){
        return;
      }
      value = StringUtil.trim(value);
      if(value.toLocaleUpperCase() == URLRequestMethod.POST || value.toLocaleUpperCase() == URLRequestMethod.GET){
        _method = value.toLocaleUpperCase();
      }      
    }
    
    public function getData():String{
      return _data;
    }
    
    private function configureListeners(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener(Event.COMPLETE, completeHandler);
            dispatcher.addEventListener(Event.OPEN, openHandler);
            dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
            dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
            dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
        }
    
    private function completeHandler(event:Event):void {
      _data = _loader.data;
      if(_parse){
        try{
          _xml = new XML(_data);          
        }catch(error:Error){
          _parse = false;
          _xml = null;
          Tracer.debug("xml解析错误!");
        }
      }
            ExternalInterface.call(_id+".onComplete");
        }

        private function openHandler(event:Event):void {
            ExternalInterface.call(_id+".onOpen");
        }

        private function progressHandler(event:ProgressEvent):void {       
      ExternalInterface.call(_id+".onProgress",event.bytesLoaded,event.bytesTotal);
        }

        private function securityErrorHandler(event:SecurityErrorEvent):void {
            showError("读取失败!\n  不能跨域访问,可能是你在web服务端根目录下没有放置crossdomain.xml文件!");
        }

        private function httpStatusHandler(event:HTTPStatusEvent):void {
            showError("读取失败!\n  HTTP错误代码为:"+event.status);
        }

        private function ioErrorHandler(event:IOErrorEvent):void {
            showError("读取失败!\n  可能是因为下列原因:\n    1.网络忙,请稍候重试!\n    2.访问的web服务端没有开启!");
        }
    
    public function alert(msg:String):void{
      navigateToURL(new URLRequest(msg));
    }
    
    public function showError(msg:String):void{      
      ExternalInterface.call(_id+".onError",msg);
    }
  }
  
}


当然,这个是较简单的一个跨域类。
APMServ的作者在其博客上也发了一个JS通过FLASH来跨域的方案,很全面。
参考地址是:
引用
http://blog.s135.com/ajaxcdr/
Aug 10
今天彪哥一时兴起,在BBS上转来转去。
结果用他那过时的IE6在首页发现,首页半天都加载不下来。
首页只有一个阿里妈妈的远程动画和些图片以及JS。
根据以往经验来看,就是这个flash的问题。
因为在IE6这个单线程的浏览器中,来进行多线程的操作,那简直是痛苦。
最后不得不把那动画换成了图片。
IE6快死掉吧。
Tags: ,
Jul 21
最近在研究怎样使blog中充斥更多一点的SNS元素。
无意中发现了JQ的这个自定义类。
这些效果都是比较流行的,集合这么全的尚属少见。
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。

jQuery.Switchable能实现什么样的效果?看图:

Tabs
点击在新窗口中浏览此图片

Slide
点击在新窗口中浏览此图片

Scrollable
点击在新窗口中浏览此图片

Horizontal Accordion
点击在新窗口中浏览此图片

Taobao.com
点击在新窗口中浏览此图片

下载地址:http://www.blueidea.com/articleimg/2010/03/7434/switchable/demos/
Jul 12
xheditor是建立在JQ上的一个富文本编辑器。
今天就拿它来做了一个网站,但是却需要一个内容分页的功能。
最后决定在xheditor中加入一个分页符按钮来实现这个功能。

在xheditor中,我不用封装好的版本,而选用源代码版的xheditor-zh-cn.js
在xheditor-zh-cn.js中加入
var customList=[{s:'分页标签',v:'$show_page$',t:'分页标签'},{s:'Flv 视频',v:'[Flv width="400" height="300"]视频地址[/Flv]',t:'Flv视频'},{s:'插入引用',v:'[Quote title="引用"]引用代码[/Quote]',t:'运行代码'},{s:'插入代码',v:'[Code]运行代码
',t:'运行代码'}];[/code]
在 var toolsThemes={ 中的 full: 中加入 Custom 一项
在 switch(cmd)中加入
case 'custom':
          _this.showMenu(customList,function(v){_this.pasteText(v);});
          break;
这一项。

当然,样式也自然是要改的
我们打开我选择的样式xheditor_skin/vista中的ui.css文件。
加入:
.xhe_vista span.xhEdtSeparator {display:block;height:20px;width:4px;background:url(img/icons.gif) no-repeat -692px 0;margin:0 2px}
.xhe_vista span.xhEdtBtnCustom {background-position:-640px 0}

我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。

最后打开编辑器,就可以看到一个下拉框了,点击里面的分页,即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层,通过JS来操作显示,其实是一种伪分页。当然,也可以用语句来操作。
那都是看各自的手段了。
Jun 29
一个拥有许多图片以及较多用户的网站,面临的压力会较大,并发连接数我们且略过。就拿下载图片时产生的带宽影响来说,就是一个很需要解决的问题。
所以,我们得做一个图片缓加载的功能。

用户打开网站的瞬间,浏览器显示区以外的图片,我们都暂时不去加载和显示,这个对SEO无害吧(我们肯定会选择一个小图片进行替换,不会空着的)。

这效果用JQ即可完美解决,虽然别的网站是自己写的类。

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
      var hasShow = false;
      $(window).bind("scroll",function(){
          if(hasShow==true){
              $(window).unbind("scroll");
              return;
          }
          var t = $(document).scrollTop();
          if(t>100){
              // 滚动高度超过100时,加载图片
              hasShow = true;
              $("#lazyBox .lazyImg").each(function(){
                  $(this).attr("src",$(this).attr("alt"));
              });
          }
      });
  </script>
</body>
</html>


当然,我没去获取分辨率大小,这个以后实际用到再去做
分页: 1/3 第一页 1 2 3 下页 最后页 [ 显示模式: 摘要 | 列表 ]