注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery互动历史时间轴插件timeliner

动画 fishcity 2128浏览

jQuery时间轴timeliner

timeliner是一个轻量的jquery时间轴插件,它使用HTML,CSS和jQuery构建一个简单的、互动的、历史时间轴。

特点:

  1. 完全兼容

  2. 简单

  3. 能够处理几乎任何形式的内容

  4. 支持打印。

  5. 自定义样式

jquery实例:timeliner的使用方法

引入文件

引入creen.css 和 timeliner.js ,当然jquery必须先引入,如果你想支持移动端设备,请引入基本的responsive.css

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/timeliner.min.js"></script>

构建html

包含你的时间轴到一个ID和CLASS为timelineContainer的元素中

<div id="timelineContainer" class="timelineContainer">
    ...
</div>

设置主内容区到一个class为timelineMajor的元素中,如:设置1年,10年,一个世纪等。

<div class="timelineMajor">
    ...
</div>

设置主内容区的标题(时间)到一个class 为'timelineMajorMarker'的元素中

<h2 class="timelineMajorMarker">1954</h2>

使用class为timelineMinor的DL元素列出单独的事件(如年度事件,10年事件等)

<dl class="timelineMinor">
    ...
</dl>

包含独立事件的标题到DT标签和A标签中,并给DT标签一个唯一的ID

<dt id="19540517"><a>Brown vs Board of Education</a></dt>

包含事件的内容到一个DL标签中,并设置DLclass为timeline,同时ID在标题ID的基础上加多'EX' ,如标题的DT ID为19540517,那么内容DL的id为19540517EX,再者把dl的display设置none。

<dd class="timelineEvent" id="19540517EX" style="display: none;">
    ...
</dd>

初始化

//基础初始化
$.timeliner();
//多个初始化
$.timeliner({timelineContainer: '#timelineContainer_1'});
$.timeliner({timelineContainer: '#timelineContainer_2'});

//带参数初始化
$.timeliner({
    timelineContainer: '#timelineContainer', // 值: 包含整个时间整的元素选择器, 默认值: #timelineContainer
    startState: 'closed', // 值: closed | open, 默认 closed; 确定时间确最初是展开还是收缩
    startOpen: [], // 值: 独立事件的ID数组, 默认为空; 独立事件在时间轴初始化时是否展开
    baseSpeed: 200, // value: 任何整数, 默认值: 200; 基础速度, 有些动画会是基础速度的4倍
    speed: 4, // value: 数字, 默认值: 4; 展开与收缩动画的速度算法,基于基础速度
    fontOpen: '1.2em', // 值: 任何 CSS font-size 值, 默认 1em; 设置事件在打开的字体大小
    fontClosed: '1em', // 值: 任何 CSS font-size 值, 默认 1em; 设置事件在隐藏后的字体大小
    expandAllText: '+ expand all', // 值: string; 默认值 '+ expand all',当然您可以使用中文“展开”
    collapseAllText: '- collapse all' // 值: string; 默认 '- collapse all'
});

以上包含了所有参数设置,这里要明确下startOpen的写法,单个['#event01EX'] 或者多个 ['#event01EX','#event02EX'].

最后要加上expand/collapse这个选项的话,需要主元素(#timelineContainer)下添加以下代码

<div class="timelineToggle"><p><a class="expandAll">+ expand all</a></p></div>

完整 的实例html代码

<div id="timelineContainer" class="timelineContainer">
    <div class="timelineMajor">
        <h2 class="timelineMajorMarker">时间段</h2>
        <dl class="timelineMinor">
            <dt id="event01"><a>事件标题</a></dt>
            <dd class="timelineEvent" id="event01EX" style="display: none; ">
                <p>事件内容.</p>
            </dd><!-- /.timelineEvent -->
        </dl><!-- /.timelineMinor -->
        <dl class="timelineMinor">
            <dt id="event02"><a>又一事件</a></dt>
            <dd class="timelineEvent" id="event02EX" style="display: none; ">
                <p>内容</p>
            </dd><!-- /.timelineEvent -->
        </dl><!-- /.timelineMinor -->
    </div><!-- /.timelineMajor -->
</div><!-- /#timelineContainer -->

转载请注明:jQ酷 » jQuery互动历史时间轴插件timeliner

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。