91uu浮云【javascript实现】

上一章节我们讲到，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){				
				$bm.filter(':not(.current)').css({'background-image':'url('+url+')'});
				$bm.toggleClass('current');
			}			
			var src = getRandBg();
			creatImage(src,function(){
				setBgImg(src);//成功加载背景后，设置背景
			})
			
		}

 

对背景的设置操作就结束了。那么真正要处理的东西就要来了。接下来我们关键的东西。就是动画体验效果的设置

请看这个方法：

 

this.tabScroll()

 

看下面的方法：

 

//tab滚动切换
		tabScroll : function() {
			var options = this.options,//初始化时的一些参数
				$content = $(options.content),//取桌面 【article】元素
				$navList = $(options.navList),//取导航 【header】元素
				$sections = $content.children(),//取桌面 【article】元素里的，平台应用程序块
				sl=$sections.length,//section length
				$navs=initNavs(sl,options.navClass),//navigations
				that = this;
			
			$content.css('overflow','hidden');
			$sections.css('position','absolute');
			resetCurrentCls(0);//传入初始0索引，即显示第一屏，应用。
			initTurn();//初始化 分页 事件【上一页，下一页】
			that.changeBg();//切换背景
			$(window).bind('resize',function(){
				$content.height($content.find('.current').height());//浏览器窗口大小改变时 重算当前屏的 应用区（3） 高
			});
			
			function initNavs(len,className) {//初始化切换导航事件
				for(var i=0;i<len;i++) {
					$navList.append($('<span/>',{'class':className}));
				}
				$navList.delegate('.'+className, "click", function(){//mouseenter change click
					var $this = $(this);
					if($this.hasClass('current')) {
						return;
					}
					resetCurrentCls($navs.index(this));
					that.changeBg();
				})
				
				return $navList.children();//返回导航按钮列表
			};
			
			function initTurn(){//初始化上下页，按钮事件
				var html = '<div class="section-turn-wrap">';
					html += '<div class="section-turn prev"></div>';
					html += '<div class="section-turn next"></div>';
					html += '</div>';
					
				var $turns = $(html).appendTo('body').find('.section-turn');//添加到页面的dom下body 主体中
				$turns.click(function(){//对上下页绑事件
					var $this = $(this),
						len = $navs.length,
						ci = $navs.index($navs.filter('.current')),
						ti = -1;
					if($this.hasClass('prev')){//上一页
						ti = (ci+len-1)%len;
					}
					else{//下一页
						ti = (ci+len+1)%len;
					}
					$navs.eq(ti).click();//触发导航事件
				})
			};
	
			function resetCurrentCls(index) {//通过索引设置当前要看的屏面应用信息
				 
				var cur_section = $sections.eq(index);//取桌面 【article】元素里的，指定索引 应用块		
				var oldSeld_section = $sections.filter('.current');	//取桌面 【article】元素里的，旧的 应用块	
				$content.height($sections.eq(index).height());//设置要显示的应用块高
				
				$navs.eq(oldSeld_section.index()).removeClass('current');
				$navs.eq(index).addClass('current'); 
				if(oldSeld_section.index()==index){ 
					return;
				}else{
					if($.browser.webkit){//判断浏览器 支持html5直接用 css3样式
						$sections.removeClass('current');
						$content.height($sections.eq(index).addClass('current').height());
						return;
					}
					oldSeld_section.removeClass('current');					
					cur_section.addClass('current').css({left:'100%'});//这里要注意，因为样式里头current 我没有设left 值，为了达到效果这里要初始值 下。
					//不支持 css3用jquery 动画效果
					cur_section.stop().animate({ 
						left:'0px',
						zIndex:'1'
					 },500,function(){});
					oldSeld_section.stop().animate({ 
						left:'100%',
						zIndex:'1'
					 },500,function(){});
				} 
			};			
		}

 

 

 

接下来我们在回头看一下，在第一屏里有一个 搜索。

 

this.searchInit();

 

 

 

searchInit:function(){
			var options = this.options,//取配参数
				$form = $(options.searchForm);//取表单 
				
				if($form.length>0){
					var $searchInput = $form.find('input[type=search]');//找输入框
				}
				else{
					return;
				}
			
			$form.submit(function(e) {//提交表单
				if(!$searchInput.val()) {//提交前验证输入框值 
					return false;
				}
			});			
			$form.find('input[type=submit]').click(function(){
				var $this = $(this);
				$form.attr('action',$this.attr('search-url'));//对应的按钮 取出 提交表单  地址
				$searchInput.attr('placeholder',$this.attr('placeholder'));//切换当前使用哪 种搜索 
				$searchInput.attr('name',$this.attr('search-name'));//取对应的 地址参数
			})
		}

 

 

 

最后我们在来讲一下，应用程序下的子程序：

this.subappsInit();//查找app的subapp  应用的子应用 并初始化其位置 。

 

subappsInit:function(){
			var subapp = $('.subapps').parent('li'),
				ww = $(window).width();
			for(var i = 0;i<subapp.length; i++){
				var $item = $(subapp[i]),
					$sa = $item.find('.subapps'),
					lw = $item.width(),
					ll = $item.offset().left + 120,
					saw = $sa.width();
					if(ww>lw+saw && ll + saw > ww){
						$sa.addClass('subapps-right');
					} else{
						$sa.removeClass('subapps-right');
					}
			} 
		}

 

这样子就可以ok的做完了。

上一章： 91uu浮云【桌面webapp块的实现方案】