yui3：widget 例子_widget-extend -

decentway
浏览: 159991 次
性别:
来自: 重庆
最近访客更多访客>>

yclbysf
grheat
julyflame
ChinaProduct
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

yui3：widget 例子_widget-extend

博客分类：
YUI 3 YUI YUI 3 yahoo UI
YUI UP UI CSS JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extending the Base Widget Class</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    .yui3-js-enabled .yui3-spinner-loading {
        display:none;
    }

    .yui3-spinner-hidden {
        display:none;
    }

    .yui3-spinner {
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        vertical-align:middle;
    }

    .yui3-spinner-content {
        padding:1px;
        position:relative;
    }

    .yui3-spinner-value {
        width:2em;
        height:1.5em;
        text-align:right;
        margin-right:22px;
        vertical-align:top;
        border:1px solid #000;
        padding:2px;
    }

    .yui3-spinner-increment, .yui3-spinner-decrement {
        position:absolute;
        height:1em;
        width:22px;
        overflow:hidden;
        text-indent:-10em;
        border:1px solid #999;
        margin:0;
        padding:0px;
    }

    .yui3-spinner-increment {
        top:1px;
        *top:2px;
        right:1px;
        background:#ddd url(assets/arrows.png) no-repeat 50% 0px;
    }

     .yui3-spinner-decrement {
        bottom:1px;
        *bottom:2px;
        right:1px;
        background:#ddd url(assets/arrows.png) no-repeat 50% -20px;
     }

    #widget-extend-example {
        padding:5px;
    }

    #widget-extend-example .hint {
        margin-top:10px;
        font-size:85%;
        color:#00a;
    }

</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Extending the Base Widget Class</h1>

<div class="exampleIntro">
	This example shows how to extend the base <code>Widget</code> class to create a simple, re-usable spinner control. The <code>Spinner</code> class created in the example is not intended to be a fully featured spinner. It is used here as a concrete example, to convey some of the key concepts to keep in mind when extending the <code>Widget</code> class.
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="widget-extend-example">
    A basic spinner widget: <input type="text" id="numberField" class="yui3-spinner-loading" value="20" />
</div>

<script type="text/javascript">
YUI({ filter: 'raw' }).use("event-key", "widget", function(Y) {

    var Lang = Y.Lang,
        Widget = Y.Widget,
        Node = Y.Node;

    /* Spinner class constructor Spinner类构造函数 */
    function Spinner(config) {
        Spinner.superclass.constructor.apply(this, arguments);
    }

    /* 
     * Required NAME static field, to identify the Widget class and 
     * used as an event prefix, to generate class names etc. (set to the 
     * class name in camel case). 
	 *需要NAME静态属性，来标识Widget类，用来作为event前缀
	 *产生类名字（驼峰格式）
     */
    Spinner.NAME = "spinner";

    /*
     * The attribute configuration for the Spinner widget. Attributes can be
     * defined with default values, get/set functions and validator functions
     * as with any other class extending Base.
	 * 属性配置，get/set函数，validator函数
	 *
     */
    Spinner.ATTRS = {
        // The minimum value for the spinner.
        min : {
            value:0
        },

        // The maximum value for the spinner.
        max : {
            value:100
        },

        // The current value of the spinner.
        value : {
            value:0,
            validator: function(val) {
                return this._validateValue(val);
            }
        },

        // Amount to increment/decrement the spinner when the buttons or arrow up/down keys are pressed.
        minorStep : {
            value:1
        },

        // Amount to increment/decrement the spinner when the page up/down keys are pressed.
        majorStep : {
            value:10
        },

        // override default ("null"), required for focus()
        tabIndex: {
            value: 0
        },

        // The strings for the spinner UI. This attribute is 
        // defined by the base Widget class but has an empty value. The
        // spinner is simply providing a default value for the attribute.
        strings: {
            value: {
                tooltip: "这里是提示信息：Press the arrow up/down keys for minor increments, page up/down for major increments...",
                increment: "Increment",
                decrement: "Decrement"
            }
        }
    };

    /* Static constant used to identify the classname applied to the spinners value field */
	/* 静态常量被用来标识应用于spinner值域的class */
	// 产生一个类名： "yui3-spinner-button"
	//Spinner.BUTTON_TEMPLATE = Y.ClassNameManager.getClassName(Spinner.NAME, "button");
	//那么这里就产生yui3-spinner-value
    Spinner.INPUT_CLASS = Y.ClassNameManager.getClassName(Spinner.NAME, "value");

    /* Static constants used to define the markup templates used to create Spinner DOM elements */
    Spinner.INPUT_TEMPLATE = '<input type="text" class="' + Spinner.INPUT_CLASS + '">';
    Spinner.BTN_TEMPLATE = '<button type="button"></button>';

    /* 
     * The HTML_PARSER static constant is used by the Widget base class to populate 
     * the configuration for the spinner instance from markup already on the page.
     *
     * The Spinner class attempts to set the value of the spinner widget if it
     * finds the appropriate input element on the page.
     */
    Spinner.HTML_PARSER = {
        value: function (srcNode) {
            var val = parseInt(srcNode.get("value")); 
            return Y.Lang.isNumber(val) ? val : null;
        }
    };

    /* Spinner extends the base Widget class 继承base Widget类 */
    Y.extend(Spinner, Widget, {

        /*
         * initializer is part of the lifecycle introduced by 
         * the Widget class. It is invoked during construction,
         * and can be used to setup instance specific state.
         * 
         * The Spinner class does not need to perform anything
         * specific in this method, but it is left in as an example.
         */
        initializer: function() {
            // Not doing anything special during initialization
        },

        /*
         * destructor is part of the lifecycle introduced by 
         * the Widget class. It is invoked during destruction,
         * and can be used to cleanup instance specific state.
         * 
         * The spinner cleans up any node references it's holding
         * onto. The Widget classes destructor will purge the 
         * widget's bounding box of event listeners, so spinner 
         * only needs to clean up listeners it attaches outside of 
         * the bounding box.
         */
        destructor : function() {
            this._documentMouseUpHandle.detach();

            this.inputNode = null;
            this.incrementNode = null;
            this.decrementNode = null;
        },

        /*
         * renderUI is part of the lifecycle introduced by the
         * Widget class. Widget's renderer method invokes:
         *
         *     renderUI()
         *     bindUI()
         *     syncUI()
         *
         * renderUI is intended to be used by the Widget subclass
         * to create or insert new elements into the DOM. 
         *
         * For spinner the method adds the input (if it's not already 
         * present in the markup), and creates the inc/dec buttons
		 *该方法的职责是往页面中创建增加widget需要的HTML节点（或者是改变页面中现有的HTML节点）
		 *通常这是widget对DOM的第一次修改。
         */
        renderUI : function() {
            this._renderInput();
            this._renderButtons();
        },

        /*
         * bindUI is intended to be used by the Widget subclass 
         * to bind any event listeners which will drive the Widget UI.
         * 
         * It will generally bind event listeners for attribute change
         * events, to update the state of the rendered UI in response 
         * to attribute value changes, and also attach any DOM events,
         * to activate the UI.
         * 
         * For spinner, the method:
         *
         * - Sets up the attribute change listener for the "value" attribute
		 * - 设置value属性改变监听器
         *
         * - Binds key listeners for the arrow/page keys
         * - Binds mouseup/down listeners on the boundingBox, document respectively.
         * - Binds a simple change listener on the input box.
		 *该方法的职责是添加事件监听器，将UI的状态和widget的状态关联起来。
		 *这些事件监听器一般监听属性的change 事件，响应属性值的变化，改变UI的状态。
		 *该方法还负责添加DOM事件监听器，把用户交互和widget的API关联起来。
         */
        bindUI : function() {
            this.after("valueChange", this._afterValueChange);

            var boundingBox = this.get("boundingBox");
			//测试boundingBox：alert(boundingBox);

            // Looking for a key event which will fire continously across browsers while the key is held down. 38, 40 = arrow up/down, 33, 34 = page up/down
            var keyEventSpec = (!Y.UA.opera) ? "down:" : "press:";
            keyEventSpec += "38, 40, 33, 34";

            // 绑定键盘事件
			Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec);
			// 绑定鼠标事件
            Y.on("mousedown", Y.bind(this._onMouseDown, this), boundingBox);
			// 设置鼠标按住上下箭头按钮时，加减数值的快慢。
            this._documentMouseUpHandle = Y.on("mouseup", Y.bind(this._onDocMouseUp, this), boundingBox.get("ownerDocument"));
			//输入节点的change事件绑定
            Y.on("change", Y.bind(this._onInputChange, this), this.inputNode);
        },

        /*
         * syncUI is intended to be used by the Widget subclass to
         * update the UI to reflect the current state of the widget.
         * 
         * For spinner, the method sets the value of the input field,
         * to match the current state of the value attribute.
		 *该方法的职责是在渲染的过程中，基于widget当前的状态设置UI的初始状态。
		 *设置一个值后，以此作为初始状态。比如滚到22，输入88，按enter，回到22
         */
        syncUI : function() {
            this._uiSetValue(this.get("value"));
        },

        /*
         * Creates the input control for the spinner and adds it to
         * the widget's content box, if not already in the markup.
		 *如果在构造函数中未提供这两个节点，widget会创建这两个节点，然后再render方法被调用的时候把这两个节点添加到页面中。如果render方法调用时，render方法的参数指向了某个节点，widget的boundingBox会被-插到这个节点中。
		 *在html里面有这样一段话：
		 *<input type="text" id="numberField" class="yui3-spinner-loading" value="20" />
		 *所以，spinner widget会以此作为boundingBox。
         */
        _renderInput : function() {
            var contentBox = this.get("contentBox"),
                input = contentBox.one("." + Spinner.INPUT_CLASS),
                strings = this.get("strings");

            if (!input) {
                input = Node.create(Spinner.INPUT_TEMPLATE);
                contentBox.appendChild(input);
            }

            input.set("title", strings.tooltip);
            this.inputNode = input;
        },

        /*
         * Creates the button controls for the spinner and add them to
         * the widget's content box, if not already in the markup.
         */
        _renderButtons : function() {
            var contentBox = this.get("contentBox"),
                strings = this.get("strings");

            var inc = this._createButton(strings.increment, this.getClassName("increment"));
            var dec = this._createButton(strings.decrement, this.getClassName("decrement"));

            this.incrementNode = contentBox.appendChild(inc);
            this.decrementNode = contentBox.appendChild(dec);
        },

        /*
         * Utility method, to create a spinner button
         */
        _createButton : function(text, className) {

            var btn = Y.Node.create(Spinner.BTN_TEMPLATE);
            btn.set("innerHTML", text);
            btn.set("title", text);
            btn.addClass(className);

            return btn;
        },

        /*
         * Bounding box mouse down handler. Will determine if the mouse down
         * is on one of the spinner buttons, and increment/decrement the value
         * accordingly.
         * 
         * The method also sets up a timer, to support the user holding the mouse
         * down on the spinner buttons. The timer is cleared when a mouse up event
         * is detected.
         */
        _onMouseDown : function(e) {
            var node = e.target,
                dir,
                handled = false,
                currVal = this.get("value"),
                minorStep = this.get("minorStep");

            if (node.hasClass(this.getClassName("increment"))) {
                this.set("value", currVal + minorStep);
                dir = 1;
                handled = true;
            } else if (node.hasClass(this.getClassName("decrement"))) {
                this.set("value", currVal - minorStep);
                dir = -1;
                handled = true;
            }

            if (handled) {
                this._setMouseDownTimers(dir, minorStep);
            }
        },

        /*
         * Override the default content box value, since we don't want the srcNode
         * to be the content box for spinner.
		 * 页面上的一个节点。在创建widget时，如果需要渐进增强地使用页面中的标签代码，开发者需要提供这个节点
         */
        _defaultCB : function() {
            return null;
        },

        /*
         * Document mouse up handler. Clears the timers supporting
         * the "mouse held down" behavior.
         */
        _onDocMouseUp : function(e) {
            this._clearMouseDownTimers();
        },

        /*
         * Bounding box Arrow up/down, Page up/down key listener.
         *
         * Increments/Decrement the spinner value, based on the key pressed.
         */
        _onDirectionKey : function(e) {

            e.preventDefault();

            var currVal = this.get("value"),
                newVal = currVal,
                minorStep = this.get("minorStep"),
                majorStep = this.get("majorStep");

            switch (e.charCode) {
                case 38:
                    newVal += minorStep;
                    break;
                case 40:
                    newVal -= minorStep;
                    break;
                case 33:
                    newVal += majorStep;
                    newVal = Math.min(newVal, this.get("max"));
                    break;
                case 34:
                    newVal -= majorStep;
                    newVal = Math.max(newVal, this.get("min"));
                    break;
            }

            if (newVal !== currVal) {
                this.set("value", newVal);
            }
        },

        /*
         * Simple change handler, to make sure user does not input an invalid value
         */
        _onInputChange : function(e) {
            if (!this._validateValue(this.inputNode.get("value"))) {
                this.syncUI();
            }
        },

        /*
         * Initiates mouse down timers, to increment slider, while mouse button
         * is held down
         */
        _setMouseDownTimers : function(dir, step) {
            this._mouseDownTimer = Y.later(500, this, function() {
                this._mousePressTimer = Y.later(100, this, function() {
                    this.set("value", this.get("value") + (dir * step));
                }, null, true)
            });
        },

        /*
         * Clears timers used to support the "mouse held down" behavior
         */
        _clearMouseDownTimers : function() {
            if (this._mouseDownTimer) {
                this._mouseDownTimer.cancel();
                this._mouseDownTimer = null;
            }
            if (this._mousePressTimer) {
                this._mousePressTimer.cancel();
                this._mousePressTimer = null;
            }
        },

        /*
         * value attribute change listener. Updates the 
         * value in the rendered input box, whenever the 
         * attribute value changes.
         */
        _afterValueChange : function(e) {
            this._uiSetValue(e.newVal);
        },

        /*
         * Updates the value of the input box to reflect 
         * the value passed in
         */
        _uiSetValue : function(val) {
            this.inputNode.set("value", val);
        },

        /*
         * value attribute default validator. Verifies that
         * the value being set lies between the min/max value
         */
        _validateValue: function(val) {
            var min = this.get("min"),
                max = this.get("max");

            return (Lang.isNumber(val) && val >= min && val <= max);
        }
    });

    // Create a new Spinner instance, drawing it's 
    // starting value from an input field already on the 
    // page (the #numberField text box)
    var spinner = new Spinner({
        srcNode: "#numberField",
        max:100,
        min:0
    });
    spinner.render();
    spinner.focus();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
分享到：
Linux目录解释(蛮全) | yui3：widget
2011-06-26 16:07
浏览 2592
评论(0)
分类:Web前端
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

yui3：widget 例子_widget-extend

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

yui3：widget 例子_widget-extend

评论

发表评论

相关推荐

yui3：widget

YUI3：node2

YUI3：plugin

YUI3:Base

YUI3：Attribute

YUI 3:Event

YUI3:Node

yui3 :Get 例子

YUI：globle object

YUI3：GET

YUI3：DataSource

YUI3:DataSchema

YUI3:Cooke

yui3 ：datatype

YUI3：cache

YUI 3 周边

YUI 3 ：IO

YUI 3 : json

最近访客更多访客>>
