2014
Mar
11

Y.TVList

Tags:

Overview

  • Render TV list data, set the cursor focus on the item, and go on the next when pressing the Enter key.
  • Y.TVList doesn't deal with any style with CSS. Users have to handle on their own.

Getting Started

Step 1: git clone from github

git clone 
  1. git clone git://github.com/lingihuang/tvlist.git

Step 2: Include YUI CSS and Javascript

Include YUI 
  1. <link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
  2. <link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssfonts/fonts-min.css">
  3. <script type="text/javascript" src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>

Step 3: Include tvlist.js

Include tvlist.js 
  1. <script type="text/javascript" src="tvlist.js"></script>

Samples

Render HTML With JavaScript

Step 1: Place a div in your html

HTML Markup 
  1. <div id="list" class="list"></div>

Step 2: Write some CSS

CSS 
  1. html, body {
  2.     background: #000;
  3.     font-family: "Hei W5", "DFHeiStd-W5", "DFYuanStd-W7", "微軟正黑體";
  4. }
  5. .clearfix {
  6.     zoom: 1;
  7. }
  8. .clearfix:after {
  9.     clear: both;
  10.     content: "";
  11.     display: block;
  12. }
  13. .list {
  14.     height: 360px;
  15.     overflow: hidden;
  16.     width: 1280px;
  17. }
  18. .list .item {
  19.     background: #cceeff;
  20.     border: 4px solid #33ccff;
  21.     color: #333;
  22.     float: left;
  23.     font-size: 197%;
  24.     height: 82px;
  25.     letter-spacing: 5px;
  26.     line-height: 3.5;
  27.     overflow: hidden;
  28.     position: relative;
  29.     text-align: center;
  30.     width: 248px;
  31. }
  32. .list .active-status {
  33.     background: #0088ff;
  34.     border-color: #0000e3;
  35.     color: #fff;
  36. }

Step 3: Write some JavaScript

JavaScript 
  1. YUI().use("tvlist", function (Y) {
  2.     var tvlist = new Y.TVList({
  3.         node    : "#list",
  4.         rows    : 4,
  5.         columns : 5,
  6.         activeIndex : 0,
  7.         activeClass : "active-status",
  8.         items: [
  9.             {html: '<a class="item">Video 1</a>', data: {vid: 1, vname: "Video 1"}},
  10.             {html: '<a class="item">Video 2</a>', data: {vid: 2, vname: "Video 2"}},
  11.             {html: '<a class="item">Video 3</a>', data: {vid: 3, vname: "Video 3"}},
  12.             {html: '<a class="item">Video 4</a>', data: {vid: 4, vname: "Video 4"}},
  13.             {html: '<a class="item">Video 5</a>', data: {vid: 5, vname: "Video 5"}},
  14.             {html: '<a class="item">Video 6</a>', data: {vid: 6, vname: "Video 6"}},
  15.             {html: '<a class="item">Video 7</a>', data: {vid: 7, vname: "Video 7"}},
  16.             {html: '<a class="item">Video 8</a>', data: {vid: 8, vname: "Video 8"}},
  17.             {html: '<a class="item">Video 9</a>', data: {vid: 9, vname: "Video 9"}},
  18.             {html: '<a class="item">Video 10</a>', data: {vid: 10, vname: "Video 10"}},
  19.             {html: '<a class="item">Video 11</a>', data: {vid: 11, vname: "Video 11"}},
  20.             {html: '<a class="item">Video 12</a>', data: {vid: 12, vname: "Video 12"}},
  21.             {html: '<a class="item">Video 13</a>', data: {vid: 13, vname: "Video 13"}},
  22.             {html: '<a class="item">Video 14</a>', data: {vid: 14, vname: "Video 14"}},
  23.             {html: '<a class="item">Video 15</a>', data: {vid: 15, vname: "Video 15"}},
  24.             {html: '<a class="item">Video 16</a>', data: {vid: 16, vname: "Video 16"}},
  25.             {html: '<a class="item">Video 17</a>', data: {vid: 17, vname: "Video 17"}},
  26.             {html: '<a class="item">Video 18</a>', data: {vid: 18, vname: "Video 18"}},
  27.             {html: '<a class="item">Video 19</a>', data: {vid: 19, vname: "Video 19"}},
  28.             {html: '<a class="item">Video 20</a>', data: {vid: 20, vname: "Video 20"}},
  29.             {html: '<a class="item">Video 21</a>', data: {vid: 21, vname: "Video 21"}},
  30.             {html: '<a class="item">Video 22</a>', data: {vid: 22, vname: "Video 22"}},
  31.             {html: '<a class="item">Video 23</a>', data: {vid: 23, vname: "Video 23"}},
  32.             {html: '<a class="item">Video 24</a>', data: {vid: 24, vname: "Video 24"}},
  33.             {html: '<a class="item">Video 25</a>', data: {vid: 25, vname: "Video 25"}},
  34.             {html: '<a class="item">Video 26</a>', data: {vid: 26, vname: "Video 26"}}
  35.         ]
  36.     });
  37.     tvlist.on("move", function (e) {
  38.         Y.log("activeIndex = " + e.activeIndex);
  39.     });
  40.     tvlist.on("enter", function (e) {
  41.         Y.log(e.data);
  42.         Y.log("offset = " + e.offset);
  43.     });
  44. });

Step 4: Output HTML

Render HTML With JavaScript 
  1. <div id="list" class="list">
  2.     <div class="row clearfix">
  3.         <a class="item active-status">Video 1</a>
  4.         <a class="item">Video 2</a>
  5.         <a class="item">Video 3</a>
  6.         <a class="item">Video 4</a>
  7.         <a class="item">Video 5</a>
  8.     </div>
  9.     <div class="row clearfix">
  10.         <a class="item">Video 6</a>
  11.         <a class="item">Video 7</a>
  12.         <a class="item">Video 8</a>
  13.         <a class="item">Video 9</a>
  14.         <a class="item">Video 10</a>
  15.     </div>
  16.     <div class="row clearfix">
  17.         <a class="item">Video 11</a>
  18.         <a class="item">Video 12</a>
  19.         <a class="item">Video 13</a>
  20.         <a class="item">Video 14</a>
  21.         <a class="item">Video 15</a>
  22.     </div>
  23.     <div class="row clearfix">
  24.         <a class="item">Video 16</a>
  25.         <a class="item">Video 17</a>
  26.         <a class="item">Video 18</a>
  27.         <a class="item">Video 19</a>
  28.         <a class="item">Video 20</a>
  29.     </div>
  30.     <div class="row clearfix">
  31.         <a class="item">Video 21</a>
  32.         <a class="item">Video 22</a>
  33.         <a class="item">Video 23</a>
  34.         <a class="item">Video 24</a>
  35.         <a class="item">Video 25</a>
  36.     </div>
  37.     <div class="row clearfix">
  38.         <a class="item">Video 26</a>
  39.     </div>
  40. </div>

View Demo

Parse Data Attributes

Step 1: Prepare data with attribute data-xxx

HTML Markup 
  1. <div id="list" class="list">
  2.     <div class="row clearfix">
  3.         <a class="item" data-vid="1" data-vname="Video 1">Video 1</a>
  4.         <a class="item" data-vid="2" data-vname="Video 2">Video 2</a>
  5.         <a class="item" data-vid="3" data-vname="Video 3">Video 3</a>
  6.         <a class="item" data-vid="4" data-vname="Video 4">Video 4</a>
  7.         <a class="item" data-vid="5" data-vname="Video 5">Video 5</a>
  8.     </div>
  9.     <div class="row clearfix">
  10.         <a class="item" data-vid="6" data-vname="Video 6">Video 6</a>
  11.         <a class="item" data-vid="7" data-vname="Video 7">Video 7</a>
  12.         <a class="item" data-vid="8" data-vname="Video 8">Video 8</a>
  13.         <a class="item" data-vid="9" data-vname="Video 9">Video 9</a>
  14.         <a class="item" data-vid="10" data-vname="Video 10">Video 10</a>
  15.     </div>
  16.     <div class="row clearfix">
  17.         <a class="item" data-vid="11" data-vname="Video 11">Video 11</a>
  18.         <a class="item" data-vid="12" data-vname="Video 12">Video 12</a>
  19.         <a class="item" data-vid="13" data-vname="Video 13">Video 13</a>
  20.         <a class="item" data-vid="14" data-vname="Video 14">Video 14</a>
  21.         <a class="item" data-vid="15" data-vname="Video 15">Video 15</a>
  22.     </div>
  23.     <div class="row clearfix">
  24.         <a class="item" data-vid="16" data-vname="Video 16">Video 16</a>
  25.         <a class="item" data-vid="17" data-vname="Video 17">Video 17</a>
  26.         <a class="item" data-vid="18" data-vname="Video 18">Video 18</a>
  27.         <a class="item" data-vid="19" data-vname="Video 19">Video 19</a>
  28.         <a class="item" data-vid="20" data-vname="Video 20">Video 20</a>
  29.     </div>
  30.     <div class="row clearfix">
  31.         <a class="item" data-vid="21" data-vname="Video 21">Video 21</a>
  32.         <a class="item" data-vid="22" data-vname="Video 22">Video 22</a>
  33.         <a class="item" data-vid="23" data-vname="Video 23">Video 23</a>
  34.         <a class="item" data-vid="24" data-vname="Video 24">Video 24</a>
  35.         <a class="item" data-vid="25" data-vname="Video 25">Video 25</a>
  36.     </div>
  37.     <div class="row clearfix">
  38.         <a class="item" data-vid="26" data-vname="Video 26">Video 26</a>
  39.     </div>
  40. </div>

Step 2: Write some CSS

CSS 
  1. .clearfix {
  2.     zoom: 1;
  3. }
  4. .clearfix:after {
  5.     clear: both;
  6.     content: "";
  7.     display: block;
  8. }
  9. .list {
  10.     height: 360px;
  11.     overflow: hidden;
  12.     width: 1280px;
  13. }
  14. .list .item {
  15.     background: #cceeff;
  16.     border: 4px solid #33ccff;
  17.     color: #333;
  18.     float: left;
  19.     font-size: 197%;
  20.     height: 82px;
  21.     letter-spacing: 5px;
  22.     line-height: 3.5;
  23.     overflow: hidden;
  24.     position: relative;
  25.     text-align: center;
  26.     width: 248px;
  27. }
  28. .list .active-status {
  29.     background: #0088ff;
  30.     border-color: #0000e3;
  31.     color: #fff;
  32. }

Step 3: Write some JavaScript

JavaScript 
  1. YUI().use("tvlist", function (Y) {
  2.     var tvlist = new Y.TVList({
  3.         node    : "#list",
  4.         rows    : 4,
  5.         columns : 5,
  6.         activeIndex : 0,
  7.         activeClass : "active-status" 
  8.     });
  9.     tvlist.on("move", function (e) {
  10.         Y.log("activeIndex = " + e.activeIndex);
  11.     });
  12.     tvlist.on("enter", function (e) {
  13.         Y.log(e.data);
  14.         Y.log("offset = " + e.offset);
  15.     });
  16. });

View Demo

Sinle Row or Single Column

Horizontal Row

View Demo

Vertical Column

View Demo

Multiple Lists

Disable other lists when switching the list.

View Demo

Documentation

Y.TVList Config

Parameter Type Required Default Value Description Example
activeClass String No focused Classname of the focused item. 5
activeIndex Number No 0 Index of the focused item. 2
columns Number No 4 How many items per row contains. 5
disabled Boolean No false Disable or enable events active. true
items Array No [] An array to store html and data of all items. [{html: "", data: {key: value}}]
node String or Y.Node Yes null "#list" or Y.one("#list") 5
rows Number No 4 The amount of rows 5

Y.TVList Attributes

Parameter Description Example
activeClass Set index of the item active, and re-render all items. tvlist.set("activeIndex", 1);
disabled Disable or enable events active. When you set disabled true, your list node will add classname tvlist-disabled. tvlist.set("disabled", true);

Y.TVList Events

Example 
  1. YUI().use("tvlist", function (Y) {
  2.     var tvlist = new Y.TVList({
  3.         node    : "#list",
  4.         rows    : 4,
  5.         columns : 5,
  6.         activeIndex : 0,
  7.         activeClass : "active-status" 
  8.     });
  9.     tvlist.on("move", function (e) {
  10.         Y.log("activeIndex = " + e.activeIndex); // Index of the active item in data array.
  11.     });
  12.     tvlist.on("enter", function (e) {
  13.         Y.log(e.data);
  14.         Y.log("offset = " + e.offset); // Index of the active item in the viewable viewport.
  15.     });
  16. });

Y.TVList Methods

Example 
  1. var tvlist = new Y.TVList({
  2.     node    : "#list",
  3.     rows    : 4,
  4.     columns : 5,
  5.     activeIndex : 0,
  6.     activeClass : "active-status"
  7. });
  8. tvlist.set("disabled", true);

This post was last modified by Lingi Huang


回應 (Leave a comment)

JavaScript 相關

Web Development 相關

類別 JavaScript

Copyright &copy; 2014 LINGIHUANG.COM. All rights reserved.