`
caibinghong
  • 浏览: 150816 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

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块的实现方案】

分享到:
评论

相关推荐

    UU手游浏览器 v1.1.0.zip

    UU手游浏览器软件是专门针对手机游戏玩家而开发的浏览器,由91uu手游网(www.91uu.com)开发。集成了手机游戏攻略、手机游戏资讯、手机游戏下载等丰富的内容,让玩家一打开浏览器就能轻松方便的获取手机游戏相关内容。...

    UU地图最新版 UU地图

    UU地图是一款专业的地图导航软件,其最新版通常会包含一系列的更新和优化,旨在提供更加准确、便捷的地理信息服务。以下是对UU地图及其最新版的一些关键知识点的详细说明: 1. **地图数据更新**:UU地图最新版通常...

    aodv-uu-0.9.6.zip_AODV协议代码_aodv_aodv-uu-0.9.6_www.9uu.com大二

    AODV-uu-0.9.6是一个开源实现AODV协议的项目,它由Uppsala大学的研究团队开发,因此被称为"uu"。这个版本的代码提供了对AODV协议的详细实现,对于理解AODV的工作原理、进行网络模拟以及研究路由协议优化非常有帮助。...

    UU人框架与EXT比较

    其次,EXTJS的开发效率并不高,因为开发者需要通过编写大量的JavaScript代码来实现布局和功能,这给一些不熟悉JavaScript的开发者带来了一定的难度。再次,EXTJS的数据传输机制主要依赖于AJAX+JSON,这对于仍然采用...

    利用uu云打码平台的lib实现的c#打码平台可扩展

    综上所述,"利用uu云打码平台的lib实现的c#打码平台可扩展"项目旨在提供一个高效、可靠的验证码处理解决方案,通过C#编程语言结合UU云打码平台的库,实现了验证码识别的自动化,并具备良好的扩展性,以适应不断变化...

    UU 加速插件 docker 版本(docker)

    UU 加速插件 docker 版本(docker) uuplugin docker 版本 UU 加速提供了 OpenWrt 版本的插件,见 https://router.uu.163.com/app/baike/public/5f963c9304c215e129ca40e8.html。 该项目基于 OpenWrt 的 openwrtorg/...

    binaryTree_二叉树mfc_policeman4uu_mfc实现二叉树_

    在本文中,我们将深入探讨MFC(Microsoft Foundation Classes)如何被用来实现二叉树及其遍历方法,包括中序遍历和先序遍历。 二叉树是一种每个节点最多有两个子节点的树形数据结构,通常分为左子节点和右子节点。...

    济南铃木UU125T-2使用说明书.pdf

    从提供的文件信息中,我们可以提取到关于济南铃木UU125T-2摩托车的相关知识点。这些信息主要涉及到该型号摩托车的使用说明、保养以及安全方面的内容。以下为详细的知识点梳理: 首先,标题"济南铃木UU125T-2使用...

    UU格式编码 ISP下载使用编码

    2. **UUENCODE.C**:与UUDECODE.C相对,这是UU编码的源代码实现,负责将二进制文件编码成ASCII文本,以便于在网络上传输。 3. **Uuencode.txt**:这可能是关于UU编码的说明文档或者示例,可能包含编码规范、使用方法...

    UU特效换肤v10.13防封版_lol换肤_LOL防封_

    UU特效换肤工具能够无缝地与LOL游戏客户端交互,实现皮肤的即时替换,这背后离不开C++的底层优化和内存管理。对于想要深入理解游戏机制或提升编程技能的用户来说,通过研究这样的工具,可以学习到如何利用C++进行...

    灵图UU免费软件使用

    灵图UU是绿色软件,无需安装,直接运行“uu.exe”即可; 软件根目录的uu.ini文件是用于记录您对UU所作的个性化设置; 软件根目录的points.xml文件用于记录您自己标注的标点信息; 软件根目录的uu_update.exe...

    电子地图--灵图UU

    电子地图的发展离不开GIS技术的支持,GIS通过整合地理空间数据和非空间数据,实现了对现实世界的数字化模拟。灵图UU在GIS基础上,通过智能化算法优化,提供了高效的地图检索和分析能力,使用户能够快速获取所需信息...

    buff uu自动发货5.3

    buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3buff uu自动发货5.3...

    Uu接口技术规范

    **Uu接口技术规范**是大唐移动通信设备有限公司发布的一份技术文档,主要描述了Uu接口的技术规范及其相关功能实现细节。此文档适用于无线通信领域内的技术人员,旨在提供一个标准化的Uu接口设计方案,确保不同厂家的...

    UU云 计算

    总的来说,UU云计算提供了一个全面的云服务生态系统,涵盖了从基础架构到应用的各个层面,旨在通过便捷、高效的云计算服务,帮助企业及个人用户实现数字化转型,提升工作效率,同时保证数据安全。而“优优云打码助手...

    Suzuki 济南铃木uu125J使用说明书.pdf

    1. 铃木UU125J摩托车概述 铃木UU125J是一款踏板摩托车,由济南铃木制造。这款摩托车的使用说明书提供了详尽的操作指南,以确保用户能够安全、正确地使用和维护摩托车。手册中特别提到了为了发动机的保养,需要在磨合...

    易语言UU聊天室源码

    本篇将深入探讨“易语言UU聊天室源码”,分析其设计思想、功能实现及技术要点。 首先,该源码的核心在于构建了一个实时的聊天平台,用户可以通过它进行文字交流、发送图片、表情互动以及窗口抖动等多样的沟通方式。...

    UU地图(我要地图)

    《UU地图:小巧而强大的导航助手》 UU地图,又被称为“我要地图”,是中国首款免费的地图应用,以其轻量级的体积和高效便捷的操作体验,赢得了广大用户的一致好评。这款软件不仅小巧,而且功能全面,是居家出行的...

    aodv-uu-master_路由协议_路由_planefxi_aodv_

    《AODV-UU路由协议实现详解》 路由协议在无线网络中扮演着至关重要的角色,其中AODV(Ad hoc On-demand Distance Vector)是一种广泛应用的自组织按需距离矢量路由协议。本文将深入探讨AODV-UU,这是一种针对AODV...

Global site tag (gtag.js) - Google Analytics