Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <!-- https://developer.telerik.com/products/kendo-ui/brief-history-kendo-ui/ -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  <link rel="stylesheet" href="https://jbristowe.github.io/kendo-ui-timeline/jquery/css/style.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web" type="text/css" />
  <script src="https://platform.twitter.com/widgets.js"></script>
  <title>A Brief History of Kendo UI</title>
</head>
<body>
  <div id="timeline"></div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
  <script src="https://jbristowe.github.io/kendo-ui-timeline/jquery/js/timeline.js"></script>
  <script src="https://jbristowe.github.io/kendo-ui-timeline/jquery/js/tweet.js"></script>
  <script>
    $(document).ready(function() {
      var dataSource = new kendo.data.DataSource({
        schema: {
          parse: function(response) {
            var items = [],
                entry = response.feed.entry;
            for (var i = 0; i < entry.length; i++) {
              var item = {
                date: kendo.parseDate(entry[i].gsx$date.$t),
                title: entry[i].gsx$title.$t,
                description: entry[i].gsx$description.$t,
                type: entry[i].gsx$type.$t,
                version: entry[i].gsx$version.$t,
                imageUrl: entry[i].gsx$imageurl.$t,
                notesUrl: entry[i].gsx$notesurl.$t,
                youTubeId: entry[i].gsx$youtubeid.$t,
                tweetUrl: entry[i].gsx$tweeturl.$t,
                tweetId: entry[i].gsx$tweetid.$t
              };
​
              items.push(item);
            }
            return items;
          }
        },
        transport: {
          read: {
            // 將此另存副本 https://docs.google.com/spreadsheets/d/1Z54-N6h0Dl-JSfr2o95f58g2omYz7DLw9CX-j7Th_VQ
            // 再將自己的 [檔案]>[發佈到網路]
            // 然後將下列的 1Z54-N6h0Dl-JSfr2o95f58g2omYz7DLw9CX-j7Th_VQ 更換成自己的檔案序號
            url: "https://spreadsheets.google.com/feeds/list/1Z54-N6h0Dl-JSfr2o95f58g2omYz7DLw9CX-j7Th_VQ/od6/public/values?alt=json"
          }
        }
      });
​
      $("#timeline").kendoTimeline({
        dataSource: dataSource
      });
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers