91uu浮云【javascript实现】
上一章节我们讲到，webos 桌面的 html代码是从后台直接打印出来，那么完整打印好那些html元素，接下来我们要用js 去初始化一些东西。 91uu浮云【javascript实现】 在这边我大概讲解我们要去实现的功能： 初始化界面【内容方位，分页，切换卡】 那么这个系统是webos，我们就定义一个这样的一个类，下面我是用闭包的写法，闭包主要是让变量不受外部影响...
·
上一章节我们讲到，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的做完了。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)