上一章节我们讲到，webos 桌面的 html代码是从后台直接打印出来，那么完整打印好那些html元素，接下来我们要用js 去初始化一些东西。

?

91uu浮云【javascript实现】

?

在这边我大概讲解我们要去实现的功能：

?

初始化界面【内容方位，分页，切换卡】

?

那么这个系统是webos，我们就定义一个这样的一个类，下面我是用闭包的写法，闭包主要是让变量不受外部影响。

?

还有一点是这里用的是闭包静态类的写法。用户不用实例。

?

(function() {?

var WebOS = {

?

};

window.WebOS = WebOS;

})();

?

以上就简的把webos类写了一下，接下来我们来实现一些功能。

?

之前说过 后台代码已经把我们要的东西打印到 页面上了。

?

那么我们就进行前期工作，那就是初始化它。让页面成为我们想要看到的东西。

?

好，对类添加一个方法init,并带有参数备后用

?

?

var  WebOS = {
	init:function(options){
             var defaults = {
				navList: 'header',//头部
				content: 'article',//桌面 
				navClass:"section-nav",//导航样式
				currentClass:"current",//当前操作 
				bgImg:[],//背景图列表
				searchForm:'.search-form-mod',//第一个桌面的搜索表单
				bgIndex:0//默认第一张背景
			};
			this.options = $.extend([],defaults,options);//合并扩展 参数
			this.$bm = this.getBgMask();//返回背景容器 
			this.changeBg();//切换背景 
			this.tabScroll();//滚动效果
			this.searchInit();//搜索初始化
			this.subappsInit();//初始化应用程序块的子程序弹出
	}
}

在初始化中用到的第一个方法：

?

this.getBgMask();//创建网页背景容器，主要用于切换背景实用。返回值 为 ?dom元素

?

这个方法的原型如下：

?

getBgMask: function(){
			var html = '<div class="bg-wrap">';
				html += '<div class="bg-mask current"></div>';
				html += '<div class="bg-mask"></div>';
				html += '</div>';
			var $bm = $(html).appendTo('body').find('.bg-mask');
			return $bm;
		}

?

上面，我们把背景容器创建好了，接下来我们向里头添加背景图：

?

this.changeBg();

?

下面我直接在代码后加注释：

?changeBg :function(){ ??

			var options = this.options,//初始化参数列表
				$bm = this.$bm,//背景对象
				ls = window.localStorage || {};//本地存储
			function getRand(len) {//返回图片列表里的索引
				if(len==1||len==0) return 0;
				return Math.floor(Math.random()*len);
			}
			function getBgNum(){
				var len = options.bgImg.length,
					randNum = getRand(len); 
				if(len==1||len==0){//when bgImg only one , Infinite loop 
					return 0;
				}				
				if(ls.bgNum) {
					while(ls.bgNum==randNum) {
						randNum = getRand(len);
					}
				}
				ls.bgNum = randNum;				
				return ls.bgNum;//返回要显示的背景索引号
			}
			function getRandBg(){
				var bgNum = getBgNum();
				return options.bgImg[bgNum];//返回显示前景
			}			
			function creatImage(src,success,error){//加载图片
				var $img = $('<img />');
				//img.onerror = error;
				$img.load(function(){
					success();//成功加载后回调
				});
				$img.attr('src',src);
			}			
			function setBgImg(url){