页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery支持水平和垂直漂亮时间轴插件Albe Timeline

布局 日历 HTML我帮您 2月前  次浏览

jquery支持水平和垂直漂亮时间轴插件,水平时间轴插件,垂直时间轴插件.Albe Timeline是一款效果非常炫酷的jQuery时间轴插件。Albe Timeline可以制作水平和垂直时间轴效果。你可以通过参数来控制每次时间轴切换的动画效果。

jquery支持水平和垂直漂亮时间轴插件Albe Timeline

Carregue o plugin e dependências

<link rel="stylesheet" href="style-albe-timeline.css" />

<script src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-albe-timeline-2.0.1.min.js"></script>

Crie a lista de dados

<script type="text/javascript"> //Objeto Json var data = [{
         time: '2015-03-29',
         header: 'Sample of header',
         body: [{
               tag: 'h1',
               content: 'Lorem ipsum' },
            {
               tag: 'p',
               content: 'Lorem ipsum dolor sit amet, nisl lorem.' }],
         footer: 'Sample of footer' },
      {
         time: '2016-01-20',
         body: [{
               tag: 'h2',
               content: 'Sample with link' },
            {
               tag: 'a',
               content: 'MY LINK',
               attr: {
                  href: 'http://albertino.eti.br',
                  target: '_blank',
                  title: 'Albertino Júnior' }
         }]
      }
   ]; </script>

Realize a chamada

<div id="myTimeline"></div>
<script type="text/javascript"> //Objeto Json var data = [{...}]; $(document).ready(function () { $('#myTimeline').albeTimeline(data);
  }); </script>
  • Instancie com opções:
  //**myTimeline**, define o identificador do elemento que irá receber toda a linha de tempo (por exemplo, uma DIV) e deve ser único para cada timeline na página. //**data**, define o objeto Json contendo a lista de dados a serem exibidos. $("#myTimeline").albeTimeline(data, { //Efeito de apresentação dos itens //"fadeInUp", "bounceIn", "fadeInUp", etc effect: "fadeInUp", //Define a exibição de um menu com ancora para os agrupamentos de anos showMenu: true, //Especifica a linguagem de exibição dos textos (i18n) language: "pt-BR", //Define o formato de exibição da data //1:"dd MMMM" //2:"dd/MM/aaaaa" //3:"dd de MMMM de aaaaa" //4:"DD, dd de MMMM de aaaaa" formatDate : 1, //Especifica se os dados serão ordenados pela data ou exibidos exatamente como estão sortDesc: true,
  });
  • Especifique a cultura:
$(document).ready(function () { //Sobrescreve a CutureInfo padrão do plugin $.fn.albeTimeline.languages = { "en-US": {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            msgEmptyContent: "No information to display." }, "es-ES": {
            days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
            shortMonths: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            msgEmptyContent: "No hay información para mostrar." }, "fr-FR": {
            days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
            months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
            shortMonths: ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sep", "Oct", "Nov", "Déc"],
            msgEmptyContent: "Aucune information à afficher." }
    }; //Internationalization $("#myTimeline").albeTimeline(data, {
        language: "fr-FR", //default: pt-BR formatDate: 4 //default: 1 });

});

Estrutura Html

Usando os padrões do plugin, teremos um resultado parecido com isso:

  <div id="myTimeline">
    <section id="timeline">
      <div id="year2016" class="group2016">2016</div>
      <article class="animated fadeInUp">
        <div class="panel">
          <div class="badge">20 Jan</div>
          <div class="panel-body">
            <img src="../img/qrcode.png" width="150px" class="img-responsive">
            <h2>Sample with image</h2>
            <p>Lorem ipsum dolor sit amet, nisl lorem.</p>
          </div>
        </div>
      </article>
      <div id="year2015" class="group2015">2015</div>
      <article class="animated fadeInUp inverted">
        <div class="panel">
          <div class="badge">29 Mar</div>
          <div class="panel-heading">
            <h4 class="panel-title">Sample of header</h4>
          </div>
          <div class="panel-body">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, nisl lorem.</p>
          </div>
          <div class="panel-footer">Sample of footer</div>
        </div>
      </article>
      <article class="animated fadeInUp">
        <div class="panel">
          <div class="badge">&nbsp;</div>
        </div>
      </article>
      <div class="clearfix" style="float: none;"></div>
    </section>
  </div>

Notas

  • O objeto Json também é aceito no formato de string. Por exemplo:
$('#myTimeline').albeTimeline('[{"time": "2016-01-20", "body": [{ "tag": "h1", "content": "Lorem ipsum" }, { "tag": "p", "content": "massa, cursus quisque leo quisque dui." }]}]');
  • O elemento time deve atender ao padrão ISO 8601 sempre no formato ano-mês-dia

    "yyyy-mm-dd"

  • Caso haja a necessidade de passar uma classe CSS como atributo do elemento, utilize o nome da prorpiedade cssclass. Por exemplo:

  body: [{
    tag: 'img',
    attr: {
      src: '../img/qrcode.png',
      width: '150px',
      cssclass: 'img-responsive' }
  }

相关链接

发表评论