Page Kanban Musume js Edition (Forum Mother. Blog tan. In short a dream tan V (-1) code

/**
 * ukagaka.js
 * @author Star
 */
 if(typeof(Kangbang) == 'undefined')
     var Kangbang = {};
     var Ukagaka = null;
         Kangbang.ukagaka = function(){
                this.msgList = []; // The available message list
                this.shellList = [];// The available list of shell
                this.msgIndex = 0; // The current message index
                this.shellIndex = 0;// The index of the current shell
                this.ghostName = "";// The name of the current personality
                this.msgBox = ""; //  Language output location, the default is  div
                this.shell = "";  //  The default location of the ukagaka image display  , The default for the IMG element
                this.config = ""; // ukagaka Configuration information, use the   HashTable Initialization
                this.somagicShell = "";
                this.somagicMsg = "";
                this.somagicMsgBox = "";
                this.timer = null;
                this.timerFlag = false;
         };

         Kangbang.ukagaka.prototype = {

                setGhostName : function( name){this.ghostName = name; },
                getGhostName : function(){ return this.ghostName; },
                setMsgList : function(msgs){ this.msgList = msgs; },
                setShellList : function(shells){ this.shellList = shells; },
        setShell : function(img){this.shell = img; },
                setMsgBox : function(div){this.msgBox = div; },
                setSomagicShell : function(div){ this.somagicShell = div; },
                setSomagicMsgBox : function(div){ this.somagicMsgBox = div;     }, //  The entire dialog box
                setSomagicMsg : function(div){ this.somagicMsg = div; },    // Show some of the dialogue
                getConfig : function(){ return this.config;     },

                hiddenSomagicMsgBox : function(){ Kit.hidden(this.somagicMsgBox);},
                showSomagicMsgBox : function(){Kit.show(this.somagicMsgBox); this.showSomagic();},
                hiddenSomagic : function(){ Kit.hidden(this.somagicShell);  /*this.hiddenSomagicMsgBox()*/},
                showSomagic  : function(){Kit.show(this.somagicShell);},
                stopTimer : function(){ if(this.timer ==null) return ;this.timerFlag = false;clearTimeout(this.timer)},

                setConfig : function(cfg){  //  Background get called after the server configuration file
                        this.config = cfg;
                        this.shellList = cfg.get("#shell").split(",");
                        this.msgList = cfg.get("#msg").split("\\w");
                        this.ghostName = cfg.get("#ghost");
                        this.createCode();
                },
                createCode : function(){  //  Dynamically created js property or method
                        var codes = this.config.get("#jsCode").split("\[code\]");
                        for (var i = 0; i < codes.length; i++) {
                                //alert(codes[i]);
                                eval(codes[i]);
                        }

                },
                init : function(){    // The front page is completely loaded, sonotori, after calling the front desk very according to their own situation manual control
                        //this.showMenu();
//                      this.hello = function(){
//                      alert("Hello!");
//               };
                },
                showMenu : function(){  //  Display the system menu, showing location dialog box
                    //alert(this.config.get("#menu"));
                        this.stopTimer();
                        this.msgBox.innerHTML = this.config.get("#menu");
                },
                sayNext  : function(){ //  Simple in order to display the next dialogue. Self tucao
                        if(this.msgIndex >= this.msgList.length) this.msgIndex = 0;
                        this.msgBox.innerHTML = this.msgList[this.msgIndex ++].split("\\c")[0];
                        Kit.element("outPutDialog").innerHTML = this.msgBox.innerHTML + "<br/>";
                },
                sayToIndex : function(index){ //  Control the order tucao
                        if(index > this.msgList.length) index = this.msgList.length;
                        if(index < 0) index = 0;
                        this.msgBox.innerHTML = this.msgList[index].split("\\s")[0];
                },

                shellNext : function(){ //  According to switch between external shell
                        if(this.shellIndex >= this.shellList.length) this.shellIndex = 0;
                        this.shell.src = this.shellList[this.shellIndex ++];
                },
                shellToIndex : function(index){ // Control the order in which to display the shell
                        if(index > this.shellList.length) index = this.shellList.length;
                        if(index < 0) index = 0;
                        this.shell.src = this.shellList[index];
                },
                shellOnce : function(index /* */ , time /* */){ // Control the order in which they are displayed and in time after the restore default
                        this.shellToIndex(index);
                        setTimeout(function(){Ukagaka.shellToIndex(0);} , time);
                },
                tsukkomi : function(){    // My own spit
                        if(this.msgList.length <= 0) return;
                        this.sayNext();
                        this.timer = setTimeout(function(){Ukagaka.tsukkomi();} , 10 * 1000);
                },
                tsukkomiSomagic : function(){   //  With spit
                        if(this.msgList.length <= 0) return;
                        if(this.msgIndex >= this.msgList.length) this.msgIndex = 0;
                        this.timer = setTimeout(function(){Ukagaka.tsukkomiSomagic();} , 10 * 1000);
                        var arr = this.msgList[this.msgIndex ++ ].split("\\c");
                        this.msgBox.innerHTML = arr[0];
                        this.somagicMsg.innerHTML = arr[1];
                }
         };
(function(){
        Ukagaka = new Kangbang.ukagaka();
        var ajax = new Ajax();
        var hashMap = new Kit.HashTable();  //  From the server reads the configuration file, this should be cattle  13 Now, completely separate out
        var response = ajax.getServerRequest("http://127.0.0.1:8000/ukagaka/cfg/ukagak.cfg").split("[end]");
        for(var line in response){ // This design I said nothing, the loop is subscript
                var arr = response[line].split("=");
//              if(arr.length <= 0) continue;
                var value = "";
                for(var i = 1 ; i < arr.length ; i ++){
                        value += arr[i] + (i < arr.length - 1 ? "=" : "");
                }
                hashMap.put(arr[0].replace("\r\n" , "") , value);
        }
        Ukagaka.setConfig(hashMap);
})();

/**
 * Toolkit.js
 * three object canuse
 * @author Star
 */

if(typeof(Kit) == 'undefined')
    var Kit = {};
        Kit.element = function(elementId){
                return document.getElementById(elementId);
        };
        Kit.isElement = function(elementId){
                return typeof(elementId) == "object";
        }
        Kit.hidden = function(elementId){
                if (Kit.isElement(elementId)) {
                        elementId.style.display = "none";
                }else {
                        Kit.element(elementId).style.display = "none";
                }
        };
        Kit.show = function(elementId){
                if (Kit.isElement(elementId)) {
                        elementId.style.display = "";
                }else {
                        Kit.element(elementId).style.display = "";
                }
        };
        Kit.isShow = function(elementId){
                return Kit.isElement(elementId) ? elementId.style.display.toLowerCase()!= "none" :
                                                     Kit.element(elementId).style.display.toLowerCase() != "none" ;
        };
        Kit.HashTable = function(){
                        this.keys = [];
                        this.values = [];
        };
        Kit.HashTable.prototype = /*(function()*/{
//              return {
                getLength : function(){  return this.keys.length; },

                clear    :  function(){ this.keys = [];this.values = []; },

                keys    : function(){ return this.keys; },

                values  : function(){ return this.values; },
                /**
                 *
                 * @param {Object} key
                 * @param {Object} value
                 */
            put      : function(key , value){
                            if(this.containsKey(key)) return false;
                                this.keys.push(key);
                                this.values.push(value);
                                return true;
                            },
                /**
                 *
                 * @param {Object} key
                 * @param {Object} value
                 */
                set     : function(key , value){
                       for(var i = 0 ; i < this.getLength() ; i ++){
                                        if (this.keys[i] == key) {
                                                this.values[i] = value;
                                                return true;
                                        }
                                }
                                return false;
                  },
            /**
             *
             * @param {Object} key
             */
            get    : function(key){
                                for(var i = 0 ; i < this.getLength() ; i ++){
                                        if(this.keys[i] == key) return this.values[i];
                                }
                                return null;
                           },
                /**
                 *
                 * @param {Object} key
                 */
                remove   :  function(key){
                          for(var i = 0 ; i < this.getLength() ; i ++){
                                        if(this.keys[i] == key){
                                                this.keys.removeIndex(i);
                                                this.values.removeIndex(i);
                                                return;
                                        }
                                  }
                 },
                /**
                 *
                 * @param {Object} key
                 *
                 */
            containsKey : function(key){
                              for(var i = 0 ; i < this.getLength() ; i ++){
                                        if(this.keys[i] == key) return true;
                                  } return false;
                    },
                /**
                 *
                 * @param {Object} value
                 */
                containsValue  : function(value){
                                for(var i = 0 ; i < this.getLength() ; i ++){
                                                if(this.values[i] == value) return true;
                                          } return false;
                }
                // }
        };//)();
        Kit.Time = {
                onTime : function(fn ,time){
                        setTimeout(fn , time);
                }
        };
 if(typeof(Browser) == 'undefined')
    var Browser = {};

        Browser.Layout = {};

        Browser.Type = {
                 /**
                  * borwer type main type like ie or firefox and so on
                  */
                borwerType : " ",
                /**
                 * quick know the borwer type
                 */
                isIE : function(){
                            return Browser.Type.borwerType.toLowerCase() == "ie" ? true : false;
                      } ,
                /**
                 * borwer version list
                 */
                borwerVersion : "",

                agentString : ""
    };

        /**
         * Oh my god , the method is great but I think It`s error .
         * If the brow is not 'IE 6' the method id bad so the method only to
         * use 'IE 6' to support position fixd attribute but FireFox or Op.....
         * so you can use css file ? js file can use to load css file but please
         * not use js to create css , It`s so hard to read.
         */
        Browser.Layout.FixedPosition = {
                inited     : false,
                /**
                 *
                 * @param {Object} element
                 * @param {Object} top
                 * @param {Object} left
                 */
                setPosition : function(element, top, left){
                        element.style.display = "block";
                                            if (Browser.Type.isIE()) {
                                                element.style.position = "absolute";
                                                Browser.Layout.FixedPosition.setGlobal();
                                            }else {
                                                element.style.position = "fixed";
                                            }
                                            element.style.top = top + "px";
                                            element.style.left = left + "px";
                                        },
                /**
                 * add css attribute key and value to document
                 * @param {Object} key
                 * @param {Object} value
                 */
                addCSSRule : function(key, value){
                                            var css = document.styleSheets[document.styleSheets.length - 1];
                                            css.cssRules ? (css.insertRule(key + "{" + value + "}", css.cssRules.length)) : (css.addRule(key, value));
                                            },
                /**
                 *
                 */
                setGlobal  :  function(){
                                            if (!Browser.Layout.FixedPosition.inited) {
                                                document.body.style.height = "100%";
                                                document.body.style.overflow = "auto";
                                                Browser.Layout.FixedPosition.addCSSRule("*html", "overflow-x:auto;overflow-y:hidden;");
                                                Browser.Layout.FixedPosition.inited = true;
                                            }
                      }
        };
        /**
         * init var on page load
         */
        (function(){
                Browser.Type.agentString = navigator.userAgent;
                var bowerStr = Browser.Type.agentString.toLowerCase();
                if(bowerStr.indexOf("msie") > -1){
                        Browser.Type.borwerType = "ie";
                        if(bowerStr.indexOf("msie 6") > -1){
                                Browser.Type.borwerVersion = "IE 6";
                        }else if(bowerStr.indexOf("msie 7") > -1){
                                Browser.Type.borwerVersion = "IE 7";
                        }else{
                                Browser.Type.borwerVersion = "nani";
                        }
                }else{
                        Browser.Type.borwerType = "FireFox";
                }
        })();

if(typeof(Ajax) == 'undefined')
    var Ajax = function(){
                this.request = null;
        };
        Ajax.prototype = {

                createRequest : function(){
                        var request = false;
                                var ms = ['Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
                                if(window.XMLHttpRequest){
                                        return new XMLHttpRequest();
                                }else if(window.ActiveXObject){
                                        for(var i = 0 ; i < ms.length ; i ++ ){
                                                try{
                                                        request = new ActiveXObject(ms[i]);
                                                        return request;
                                                }catch(e){
                                                        continue;
                                                }
                                        }
                                }
                                return false;
                },

                getServerRequest : function(url){
                        this.request = this.createRequest();
                        this.request.open("get" , url ,false);
//                              if(this.request.overrideMimeType)
//                                 this.request.overrideMimeType('text/json; charset=utf-8');
                                this.request.setRequestHeader("cache-control","no-cache");
                                this.request.setRequestHeader('Accept-Charset','utf-8');
                this.request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                                this.request.send();
                                if(this.request.readyState==4&&this.request.status==200) return this.request.responseText;
                else return "";
                }
        };
body{
        font-family:"Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
        font-size:12px;
        line-height:150%;
}
 /**
  *  The whole project of the outermost
  */
#mp_kobato{
        margin:0;
    padding:0;
}
/**
 *  The inner layer, contains the kanban board and overall control options
 */
#kanggang_shell{
        bottom:0;
        display:block;
        float:right;
        font-size:12px;
        margin:0 20px 0 0;
        padding:0;
        position:fixed;
        right:0;
        z-index:501;
}
/**
 *  Kanban Musume entity, which contains the kanban Musume and dialog boxes
 */
#kobato{

        float:right;
        padding-right:10px;
        position:relative;
}
#somagic{
        top : 140px;
        float:right;
        padding-right:250px;
        position:relative;
}
/**
 * padding top right buttom left
 */
#somagic_msgBox{
        position:absolute;
        float:left;
        padding:5px 5px 10px 0;
        top : -10px;
        left :80px;
        width : 230px;
        height : 60px;
        background-color:#808080;
        background : transparent url("/imgs/somagciballoon.png" ) no-repeat scroll right top;
}
#somagic_msg{
        margin : 0 10px 10px 20px ;
        color : #FFFFFF;
}
/**
 *  Kanban control options
 */
#kobato_dock{
        background-color:#FFFFFF;
        float:right;
        padding:5px 10px;
        text-align:center;
        -moz-border-radius-topleft:8px;
        -moz-border-radius-topright:8px;

}
/**
 *      color:#FFFFFF;
 */
#kobato_msgBox{

    margin:0;
    padding:10px 20px;
        left:-320px;
        height : 100px;
        position:absolute;
        top:5px;
        height : 90px;
        width:295px;
        background : transparent url("/imgs/balloon.png" ) no-repeat scroll right top;

}
#kobato_msgBox #menu{
        margin:0;
        top : -5px;
        right : 20px;
        position:absolute;
        cursor : pointer;
}
/**
 * background-color:#808080;
 *      border-style:solid solid none;
 *      -moz-border-radius:5px 5px 5px 5px;
 * cursor : pointer;
 */
#kobato_msg{

    color:#FFFFFF;
    margin:0;
        padding:0;

}
#kobato_msg ul{
        margin:0;
        padding:0;
        list-style:none outside none;
}
#kobato_msg li{
        float:left;
    width:33%;
}
#kobato_msg a{
        cursor : pointer;
}
<div>
                                <div>
                                        <div>
                                                <div>
                                                        <div><img src="imgs/menu.gif"/></div>
                                                        <div > Welcome to  </div>
                                                </div>
                                             <div  >
                                                      <img src="imgs/1.gif" title="kobato" width="200px" height="242px"/>
                                             </div>
                                        </div>
                                        <div >
                                                <div>
                                                        <div>tobato</div>
                                                </div><!--style="display:none;"-->
                                                <div   >
                                                        <img src="imgs/7.gif" width="90px" height="100px"/>
                                                </div>
                    </div>
                                 <div></div>
                                </div>
                        </div>
                          <script language="JavaScript" type="text/javascript" >
                            (function(){
                                        Ukagaka.setShell(Kit.element("kobato_shell"));
                                        Ukagaka.setMsgBox(Kit.element("kobato_msg"));
                                        Ukagaka.setSomagicShell(Kit.element("somagic"));
                                        Ukagaka.setSomagicMsgBox(Kit.element("somagic_msgBox"));
                                        Ukagaka.setSomagicMsg(Kit.element("somagic_msg"));
                                        Ukagaka.init();

                                        Ukagaka.tsukkomiSomagic();
                                })();
                </script>

Did not expect that here, too inconvenient, let hi the first word to explain the circumstances, write a complete explanation.
http://hi.baidu.com/starsecond/blog/item/c3c63bf5d16399e37709d724.html
Simple explanation to be placed here.

分类:Web 时间:2010-04-12 人气:431
分享到:
blog comments powered by Disqus

相关文章

  • NVL (a, b) function if a = null, return b 2010-10-14

    NVL (a, b) function if a = null, return b

  • Interpretation of prototype source 2009-10-24

    http://prototype.conio.net/ I like Javascript, keen on Ajax applications. I read the prototype source code of their own experience to write it down, I hope all of you to help understand Javascript. I believe that the prototype of the developers will

  • JavaScript Timer to achieve (original) 2009-07-28

    Introduction: Recently came into contact with flex, compared with javascript, feel as3 the Timer class is very powerful. The javascript only naked setTimeout, setInternval. To achieve a slightly more complex functions, slightly without bottoms of the

  • prototype 源码中文说明之 prototype.js 2013-10-03

    /** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '@@VERSION@@' } /** * 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数. * 一般使用如下 * var X = Class.create(); 返回一个类型,类似于 java 的一个Class实例. * 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 Class.newInstan

  • JavaScript Timer实现代码 2014-05-06

    最近开始接触flex,比起javascript,感觉as3的Timer类甚是强大.而javascript只有裸体的setTimeout,setInternval.要实现稍微复杂一点的功能,稍微没有底子的程序员就会把代码写的很乱. ok,不废话了,实现一个javascript的Timer吧 比起as3的Timer类,功能上略有改动 timer2.src.js /** * Timer 模型 * * @author rainsilence * @version 2.0 */ (function() {

  • Prototype.js sent using ajax get request parameters garbled Chinese solution 2009-11-01

    Version: prototype 1.6.0.3, struts1.2. Front (page introduction prototype.js): 1, prototype-ajax.jsp <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getSchem

  • frequently used commands linux shell programming and Notes - 1 2010-04-13

    Much thanks to Classic Shell Scripting # Chapter 2 shell basic 1. Access the script from the command line argument received: $ n Used in the script to access the first parameter $ 1, $ 2 to access the second, when more than 9, use braces to cause, su

  • Introduction to basic shell 2010-06-11

    Code :------------------------------------------------ -------------------------------- 1. To establish and run the shell program What is the shell process? Short, is a shell program that contains a number of lines linux shell or command files. Proce

  • Introduction to basic shell necessary 2010-09-11

    Introduction to basic shell necessary Study: KornLee 2005-02-03 15:32:57 from: Linux, Mr. <! - The body begin -> 1. To establish and run the shell program What is the shell process? Short, is a shell program that contains a number of lines linux she

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.107 (s). 12 q(s)