有關Js控件封裝方法

 直接看代碼,可以自己試試~!!

 這個控件主要是聲音播放,成功or失敗播放相應小型音頻資源~!

/**
 @author Bill
 調用:
 container : 容器信息, 通過dom->id綁定 <input id="xxxx">
 showControls : 是否顯示面板
 source : 資源路徑
  
 注意配置好聲音資源路徑
 
 var video1 = new Ring({container:"test",showControls:true});
 video1.ring(1); // 1 OR 2
 

*/

window.Ring = function (param) {
    this.container = param.container;
    this._controls = param.showControls ? 'controls' : false; //是否顯示播放器面板
    this._succSource = param.succSource ? param.succSource : "/Public/Common/ring/succ.wav";
    this._errSource = param.errSource ? param.errSource : "/Public/Common/ring/error.wav";
    this._ringPlay = null;
    this._video = null;
    this._init();
};
Ring.prototype = {
    constructor: Ring,
    _init: function () {
        var ring = this.createVideo();
        this.appendVideoToContainer(ring);
    },
    appendVideoToContainer:function (Ring) {
        if(!Ring){
            alert("鈴聲未成功初始化!");
            return false;
        }
        document.getElementById(this.container).appendChild(Ring);
    },
    createVideo:function(){
        var video = document.createElement("AUDIO");
        video.controls = this._controls;
        var _id = this.container + "_" + "video";
        video.setAttribute("id",_id);
        this._ringPlay = _id;
        this._video = video;
        return video;
    },
    ring:function(type){
        var _video = this.getVideoElement();
        if(type == 1){
            _video.src = this._succSource;
        }
        if(type == 2){
            _video.src = this._errSource;
        }
        var playVideo = document.getElementById(this._ringPlay);
        playVideo.play();
    },
    getVideoElement:function(){
        return this._video;
    }
};

注意仔細閱讀!!!