xcolumns.js

一个免费的php的blog程序,很好用

  

  

  // Liefere aktuelle H鰄e vom Hilfslayer
  this.recalcHeight = function()
  {
    var height;

    // only display in the moment to calculate dimensions
    // otherwise hide
    this.help.css.display = "block";
    height = this.help.getVisHeight();
    this.help.css.display = "none";
  
    return height;
  }
  
  
  
  
  // **********************************************
  //  HELPLAYER - FUNCTIONS
  // **********************************************  
  

  // Initialisiert den Hilfslayer
  this.createHelpLayer = function()
  {
    // create and map helplayer
    this.help = new xLayer();
    this.help.map();
  }
  
  
  this.renderHelpLayer = function()
  {
    // style it like a column...
    this.setupColumnStyle(this.help);    
    
    // ...but reset height to "auto" 
    // to support dynamic sizing...
    this.help.css.height = "auto";
    
    // and finally hide it
    this.help.css.display = "none";
    this.help.css.visibility = "hidden";
  }
  

  
  
  
  
  // **********************************************
  //  COLUMN - FUNCTIONS
  // **********************************************  
  
  this.setupColumnStyle = function(obj, pos)
  {
    with(obj)
    {
      setClass(this.config.get("columnclass"));
      setWidth(this.config.get("realwidth"));
      setHeight(this.config.get("realheight"));
      setY(0);
      
      if (typeof(pos) != "undefined")       
        setX((this.config.get("colWidth") + this.config.get("margin")) * pos);
    } 
  }
  
  
  // Erstellt eine neue Spalte
  this.createColumn = function()
  {
    var pos = this.columns.length;
    
    _debug.msg("Erstelle Spalte: " + pos);

    this.columns[pos] = new xLayer();

    if (pos > 0)
      this.columns[pos].addDepend(this.columns[pos-1], "setX");
    
    this.mover.append(this.columns[pos]);    
    this.setupColumnStyle(this.columns[pos], pos);
  }
  
  

  
  
  
  
  
  // **********************************************
  //  NAVIGATION - FUNCTIONS
  // **********************************************
  
  this.jumpto = function(value)
  {
    if (value == this.pos || value < 0 || value >= this.columns.length) return;

    var x = (this.config.get("colWidth") + this.config.get("margin")) * value * -1;
    var dotx = (this.config.get("dotWidth") + this.config.get("dotMargin")) * value;
   
    if (this.config.get("useSliding"))
    {
      var path = new xHash();
      path.set("x", x);
      path.set("duration", 2000);
      path.set("acc", -0.999);
      path.set("cancel", true);
  
      this.mover.transform(path);
      
      path.set("x", dotx);
      
      this.dotmarker.transform(path);      
    }  
    else  
    {
      this.mover.setX(x);   
      this.dotmarker.setX(dotx);  
    }

    this.pos = value;
  }
  
  this.prev = function()
  {
    this.jumpto(this.pos - 1);
  }

  this.next = function()
  {
    this.jumpto(this.pos + 1);
  }
 
  this.end = function()
  {
    this.jumpto(this.columns.length - this.config.get("columns"));  
  }
  
  this.start = function()
  {
    this.jumpto(0); 
  }
  
  
  
  // **********************************************
  //  NAVIGATION - COLUMN-DOT'S
  // **********************************************
 
  this.renderNavigation = function()
  {
    this.navi.placeToY(this.frame, "under");
    this.navi.placeToX(this.frame, "same");
    
    this.navi.scaleToWidth(this.frame);
    this.navi.setHeight(this.config.get("dotHeight") + (2 * this.config.get("dotMargin")));
    
    this.navi.removeChilds();

    var copy = this;

    // creating a dot for each column
    this.dots = new Array();
    for (var i=0; i<this.columns.length; i++)
    {
      this.dots[i] = new xLayer();

      this.dots[i].setSize(10,10);

      this.dots[i].displayInline();

      this.dots[i].css.margin = this.config.get("dotMargin") + "px";
      this.dots[i].css.left = (i * (this.config.get("dotWidth") + this.config.get("dotMargin"))) + "px";
      this.dots[i].setClass(this.config.get("dotClass"));

      // store position in object
      this.dots[i].obj.pos = i;

      this.navi.append(this.dots[i]);

      // make it clickable
      this.dots[i].obj.onclick = function() { copy.jumpto(this.pos) }
    }



    this.dotmarker = new xLayer();
    this.dotmarker.map();
    this.dotmarker.placeAbsolute();
    this.dotmarker.setSize(this.config.get("dotWidth"), this.config.get("dotHeight"));
    this.dotmarker.css.margin = this.config.get("dotMargin") + "px";
    this.dotmarker.css.zIndex = "1000";
    this.dotmarker.setClass(this.config.get("dotMarkerClass"));
    this.navi.append(this.dotmarker);

    this.btnnext = new xObject(new xHash("tagname", "span"));
    this.navi.append(this.btnnext);
    this.btnnext.setClass(this.config.get("tabClassRight"));
    this.btnnext.obj.innerHTML = "&#187;"
    this.btnnext.obj.onclick = function(e) { copy.next(); }

    this.printlink = new xObject(new xHash("tagname", "span"));
    this.navi.append(this.printlink);
    this.printlink.setClass(this.config.get("tabClassRight"));
    this.printlink.obj.innerHTML = this.config.get("printTitle");
    this.printlink.obj.onclick = function(e)
    {
      var p;

      p = window.open(window.location.href + '?print', 'printpreview','height=400,width=600,menubar=no,scrollbars=yes,status=no,statusbar=no,locationbar=no');
      p.focus();
      p.print();
    }

    this.btnback = new xObject(new xHash("tagname", "span"));
    this.navi.append(this.btnback);
    this.btnback.setClass(this.config.get("tabClassRight"));
    this.btnback.obj.innerHTML = "&#171;"
    this.btnback.obj.onclick = function(e) { copy.prev(); }



    var links = document.getElementsByTagName("link");
    this.btncss = new Array();
    var j=0;

    for (var i=0; i<links.length; i++)
    {
      if (links[i].getAttribute("rel").contains("stylesheet") && !links[i].getAttribute("media").contains("print"))
      {
        this.btncss[j] = new xObject(new xHash("tagname", "span"));
        this.navi.append(this.btncss[j]);

        if (j==0) this.btncss[j].css.marginRight = "25px";

        this.btncss[j].setClass(this.config.get("tabClassRight"));
        this.btncss[j].obj.innerHTML = links[i].getAttribute("title");
        this.btncss[j].obj.onclick = function(e) { document.setActiveStyleSheet(this.innerHTML); }

        j++;
      }
    }


  }


  this.createNavigation = function()
  {
    this.navi = new xLayer();
    this.navi.setClass(this.config.get("naviclass"));
    this.navi.placeAbsolute();
    this.navi.map();
  }

  


  // **********************************************
  //  UTIL - FUNCTIONS
  // **********************************************
  
  // mainrender funtion, mainly to easily call this
  this.renderColumns = function()
  {
    _debug.msg("RenderColumns");
    
    this.sub([this.obj]);
  }

  this.wheel = function()
  {
    if (event.wheelDelta < 0) this.prev();
    else this.next();
  }  

  


  
  // **********************************************
  //  LAYOUT - FUNCTIONS
  // **********************************************
  
  // create a dummy column and measure the real size needed to create
  // the real ones afterwards 
  this.recalcCache = function()
  {
    _debug.msg("RecalcCache");
    
    var dummy = new xLayer();
    dummy.map()
    dummy.setClass(this.config.get("columnclass"));

    var acolumns = this.config.get("columns");
    var emargin = this.config.get("margin");
    var amargin = emargin * (acolumns - 1);  
    var ewidth = Math.round((this.config.get("width") - amargin) / acolumns);    
    var eheight = this.config.get("height");  
  
    this.config.set("colHeight", eheight);
    this.config.set("colWidth", ewidth);

    this.config.set("realheight", dummy.setVisHeight(eheight));
    this.config.set("realwidth", dummy.setVisWidth(ewidth));
    
    _debug.msg("calculated height: " + this.config.get("realheight") + "; width: " + this.config.get("realwidth"));
  
    // remove created dummy... 
    document.body.removeChild(document.body.lastChild);
  }
  
  this.createLayout = function()
  {
    _debug.msg("CreateLayout");
  
    // create main content frame  
    this.frame = new xLayer();
    this.frame.map();
    this.frame.placeAbsolute();
    this.frame.css.overflow = "hidden";  
    this.frame.setClass(this.config.get("frameclass"));

    // create moveable inner layer
    this.mover = new xLayer();
    this.mover.placeRelative();
    this.mover.moveTo(0, 0);
    this.frame.append(this.mover)
  }

  this.renderLayout = function()
  {
    _debug.msg("RenderLayout");
  
    with(this)
    {
      frame.moveTo(config.get("offsetX"), config.get("offsetY"));
      frame.setSize(config.get("width"), config.get("height"));
    }  
  }
  
  this.renderMover = function()
  {
    _debug.msg("RenderMover");
  
    this.columns = new Array();
    this.mover.removeChilds();
    this.createColumn();
  }  
  
  
  this.create = function()
  {
    this.createLayout();
    this.createHelpLayer();  
    this.createNavigation();
  }
  
  this.render = function()
  {
    this.recalcCache(); 
    
    this.renderLayout();
    this.renderHelpLayer();
    this.renderMover();
    this.renderColumns();  
    this.renderNavigation();
  }
  
  
  // ************************
  // INIT XCOLUMNS
  // ************************

  this.type = "xColumns";

  this.__initcore(config);
  this.__initobj();
  this.__initcss();
  this.__initproperties();
  this.__initfunc();
  this.__initx();
  this.__inity();
  this.__initalpha();
  
  // Create Layers
  this.create();
  
  // Render all
  this.render();
}

xColumns.prototype = new xLayer();