頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

jquery支持水平和垂直漂亮時間軸插件Albe Timeline

布局 日歷 HTML我幫您 1年前  次瀏覽

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' }
  }

相關鏈接

發表評論

经典黑杰克游戏