1、插入HTML数据

插入html代码,一般的做法是通过document.getElementById("").innerHTML来实现。

然而在该控件中,它通过JS replace()来实现这个功能。

在HTML代码中{year}{list}都是用来替代相应HTML代码的,在JS中可以动态的给它替换成需要的内容。

    <div id="tpl_scrubber_year">
<a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
<!--此处有大量重复内容显示 -->
{list}
</a>
</div>

JS代码中通过replace()方法替换掉{year}类似的标记。

var tpl_scrubber_year = document.getElementById("tpl_scrubber_year").innerHTML.replace(/^\s*/,'').replace(/\s*$/,''); //去空
var year = "<div>.....</div>";
tpl_scrubber_year.replace(/\{year\}/g,year).replace(/\{year\}/g,year);

以前写JS都只是最基本的实现,很少能够将一个组件从头到尾完整的敲出来(虽然只是看着别人的代码重复敲一遍),但对我来说都是一种很新奇、难得的体验。

      像这种通过替换标记字符(表达式)的形式,在JSP中EL表达式就有实现,只是从来都没有往这方面想过,没能举一反三。

2、unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

scrubber_month.unshift(  tpl_scrubber_month.replace(/\{year\}/g,year).replace(/\{month\}/g,month) );

JS中关于数组元素操作的方法有不少,例如常用的push()、pop()、splice()等等。

3、字符串拼接

一般情况下,字符串拼接都是通过 “+” 来完成。即时,知道通过数组的join()方法可以达到同样的效果,也很少会使用。

html_scrubber.join('')

4、内容始终浮动在窗口上方

position:fixed    生成绝对定位的元素,相对于浏览器窗口进行定位。

        window.onscroll = function(){

            var top = document.body.scrollTop ;
if( top > 100){
g('scrubber').style.position = 'fixed';
g('scrubber').style.left = (getBodyW()-960)/2+ 'px';
g('scrubber').style.top = '60px';
}else{
g('scrubber').style.position = '';
g('scrubber').style.left = '';
g('scrubber').style.top = '';
}
}

QQ控件时光轴特效总结的更多相关文章

  1. devexpress控件layoutview特效之一旋转木马的实现

    1.devexpress有很多很好的特效,最近做了个旋转木马的特效,给大家分享下.效果图如下: 2.这里的控件为gridcontrol,里面的view为layoutview.数据绑定的代码与其他gri ...

  2. duilib修复ActiveXUI控件bug,以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  3. 高仿QQ顶部控件之IOS SegmentView

    经常会看到QQ上面有一个 消息和电话 的顶部面板,这个空间是IOS7的分段控制,android中没有这个控件,今天在威哥的微信公众号中成功gank到这个自定义控件的实现,下面跟着尝试一波. 首先是定义 ...

  4. [iOS基础控件 - 6.12.1] QQ菜单管理 UITabBarController 控制器管理

    A.需求 1.类似QQ.微信顶部或者底部的窗口转换导航条 2.给每个页面添加相应内容   B.UITabBarController 1.基本概念: (1)内容高度 iOS7之前内容高度为:屏幕高度 - ...

  5. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

  6. Android自定义View,高仿QQ音乐歌词滚动控件!

    最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...

  7. [iOS基础控件 - 3.1] QQ登陆界面

      A.storyboard 控件版 1.label 2.textfield      a.Keyboard Type           账号:Number Pad           密码:Num ...

  8. WPF 自定义TreeView控件样式,仿QQ联系人列表

    一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...

  9. 安卓自定义日期控件(仿QQ,IOS7)

    还记得上篇:高大上的安卓日期时间选择器,本篇是根据上篇修改而来,先看下qq中日期选择的效果: 鉴于目前还没有相似的开源日期控件,因此本人花费了一些时间修改了下之前的日期控件,效果如图: 虽说相似度不是 ...

随机推荐

  1. tcp三次握手过程

    TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确 ...

  2. NLP学习常用的网页链接

    [2016.7.5] 这是以前学习的时候整理的,放到博客里面,以后再有的话会更新~ 1.一个国外的学者维护的博客,介绍NLP [链接](http://nlpers.blogspot.jp/) 2.北京 ...

  3. EF Code-First 学习之旅 继承策略

    Code First中有三种不同的方法表示继承层次关系 1.Table per Hierarchy (TPH): 这种方法建议用一个表来表示整个类的继承层次关系,表中包含一个识别列来区分继承类,在En ...

  4. Tomcat学习之Wrapper

    Tomcat学习之Wrapper 分类: WEB服务器2012-08-30 22:16 1547人阅读 评论(0) 收藏 举报 tomcatservletwrapperservletslistexce ...

  5. VC SOCKET 压缩通信学习

    Server................// Server.cpp : Defines the entry point for the console application. // #inclu ...

  6. Centos Crontab查看状态和开启

    # service crond status crond is stopped # service crond start Starting crond # service crond status ...

  7. svg_鼠标手型

    1. 貌似是 属性 "cursor :pointer;",待测试. 2.

  8. jsp:tld标签

    z注意每个uri地址要保持统一 1.创建MytagPrinta.java文件 package cn.tag; import java.io.IOException; import javax.serv ...

  9. EF4 Model 代码生成EFPowerTools,Vs2015不支持,自己封装一个

    Vs2013上面有个插件EFPowerTools,用来生产entity实体代码的.目前官方只支持到Vs2013,虽然经过网上网友的方法,修改支持版本号,可以在Vs2015上安装.安装后连接远程数据库还 ...

  10. git 上传项目到分支

    步骤 git init git add . git commit -m'代码描述' git remote add origin 远程仓库地址 git branch xxx # 创建新分支 git ch ...