程序博客网 > 网络信息安全协会

jquery-seat-charts 使用-自定义座位号 及 重新加载数据

来源：互联网 发布：网络信息安全协会 编辑：程序博客网 时间：2024/05/13 06:18


原创 2015年10月24日 10:41:41
  • 标签：
  • jquery

一.自定义座位号(即重新加载数据源)

例子

1.自定义数据

[html] view plain copy
  1. var data1 = [['aa1','aa2','aa3','aa4','aa5','aa6'],['bb1','bb2','bb3','bb4','bb5','bb6'],['cc1','cc2','cc3','cc4','cc5','cc6']];  

2.html传输数据

[html] view plain copy
  1. naming: {//设置行列等信息  
  2.     top: false, //不显示顶部横坐标（行）   
  3.     // rows: ['3', '2', '1'],  
  4.     // columns: ['A', 'B', 'C', 'G', 'D', 'F'],  
  5.     getLabel: function(character, row, column) { //返回房间信息   
  6.         return column;  
  7.     },  
  8.     getData:function(dataList){  
  9.         console.log(dataList)  
  10.         return dataList;  
  11.     },  
  12.     data:data1  
  13. },  

3.源码修改 大概400行左右,修改lable

[html] view plain copy
  1. seats[id] = new seat({  
  2.     id        : id,  
  3.     label     : naming.data[row][column] ,  
  4.   
  5.     // label     : overrideLabel ?  overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),  
  6.     row       : row,  
  7.     column    : column,  
  8.     character : character  
  9. });  

4.源码修改,25行左右 加入data参数

[html] view plain copy
  1. settings = {  
  2.                 animate : false, //requires jQuery UI  
  3.                 naming  : {  
  4.                     top    : true,  
  5.                     left   : true,  
  6.                     getId  : function(character, row, column) {  
  7.                         return row + '_' + column;  
  8.                     },  
  9.                     getLabel : function (character, row, column) {  
  10.                         return column;  
  11.                     },  
  12.                     data:[]  
  13.                 },  



二.重新刷新数据 

修改源码 在开始的位置
[html] view plain copy
  1. if (this.data('seatCharts')) {  
  2.         // console.log(this.data('seatCharts'))  
  3.         // return this.data('seatCharts');  
  4.   
  5.         // console.log(setup)  
  6.         // console.log(setup.legend.items)  
  7.         // console.log(this.data('seatCharts'))  
  8.         var ary = setup.legend.items;  
  9.         ary.splice(0,ary.length);   
  10.         this.empty();  
  11.     }  
完整实例
html
[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>test</title>  
  6. <link rel="stylesheet" type="text/css" href="css/roomchartcommon.css" />  
  7. <script type="text/javascript" src="js/jquery-1.11.2.js"></script>  
  8. <script type="text/javascript" src="js/jquery.seat-charts.js"></script>  
  9. <script type="text/javascript">  
  10.     var price = 100; //房间价  
  11.     var beforeroom;  
  12.             var $cart = $('#rooms_selected'), //房间区  
  13.             $rooms_num = $('#rooms_num'), //房间数  
  14.             $total_price = $('#rooms_price'); //总金额  
  15.             $roomNo = $('#roomNo');//房间号  
  16.             $roomMsg = $('#roomMsg');//房间信息  
  17.             var sc ;  
  18.     var data1 = [['aa1','aa2','aa3','aa4','aa5','aa6'],['bb1','bb2','bb3','bb4','bb5','bb6'],  
  19.                       ['cc1','cc2','cc3','cc4','cc5','cc6']];  
  20.     var data2 = [['dd1','dd2','dd3','dd4','dd5','dd6'],['ee1','ee2','ee3','ee4','ee5','ee6'],  
  21.                       ['ff1','ff2','ff3','ff4','ff5','ff6']];                       
  22.     $(document).ready(function() {  
  23.         initchart(data1);  
  24.     });  
  25.     function initchart(dataList){  
  26.         sc = $('#room_area').seatCharts({  
  27.             map: [//房间结构图 f 代表已入住;e 代表未入住; 下划线 "_" 代表过道  
  28.                 'ffffff',  
  29.                 'eeeeee',  
  30.                 'ffeeee'  
  31.             ],  
  32.             seats: {//设置已入住和未入住相关属性  
  33.                 f: {  
  34.                     price: 125,  
  35.                     classes: 'first-class',  
  36.                     category: '已入住'  
  37.                 },  
  38.                 e: {  
  39.                     price: 70,  
  40.                     classes: 'economy-class',  
  41.                     category: '未入住'  
  42.                 }  
  43.             },  
  44.             naming: {//设置行列等信息  
  45.                 top: false, //不显示顶部横坐标（行）   
  46.                 // rows: ['3', '2', '1'],  
  47.                 // columns: ['A', 'B', 'C', 'G', 'D', 'F'],  
  48.                 getLabel: function(character, row, column) { //返回房间信息   
  49.                     return column;  
  50.                 },  
  51.                 getData:function(dataList){  
  52.                     console.log(dataList)  
  53.                     return dataList;  
  54.                 },  
  55.                 data:dataList  
  56.             },  
  57.             legend: {//定义图例  
  58.                 node: $('#roomlegend'),  
  59.                 items: [  
  60.                     ['f', 'available', '未入住'],  
  61.                     ['e', 'available', '将到期'],  
  62.                     ['f', 'unavailable', '已入住']  
  63.                 ]  
  64.             },  
  65.             click: function() {  
  66.                 if (this.status() == 'available') { //若为可选状态,添加响应事件  
  67.                     var roomNoText = $('<li>' + this.settings.label + '号</li>')  
  68.                             .attr('id', 'cart-item-' + this.settings.id)  
  69.                             .data('seatId', this.settings.id).text();  
  70.                     $roomNo.text(roomNoText);  
  71.                     var roomMsgHtml = '<span>没有入住信息</span><br><input type="button" class="roominbtn" value="入住"/>';  
  72.                     $roomMsg.html(roomMsgHtml);  
  73.                     return 'selected';  
  74.                     $('<li>' + (this.settings.row + 1) + this.settings.label + '号</li>')  
  75.                             .attr('id', 'cart-item-' + this.settings.id)  
  76.                             .data('seatId', this.settings.id)  
  77.                             .appendTo($cart);  
  78.   
  79.                     $rooms_num.text(sc.find('selected').length + 1); //统计选票数量  
  80.                     $total_price.text(getTotalPrice(sc) + price);//计算票价总金额  
  81.   
  82.                     return 'selected';  
  83.                 } else if (this.status() == 'selected') { //若为选中状态  
  84.   
  85.                     $rooms_num.text(sc.find('selected').length - 1);//更新票数量  
  86.                     $total_price.text(getTotalPrice(sc) - price);//更新票价总金额  
  87.                     $('#cart-item-' + this.settings.id).remove();//删除已预订座位  
  88.   
  89.                     return 'available';  
  90.                 } else if (this.status() == 'unavailable') { //若为损坏状态  
  91.                     var roomNoText = $('<li>' + this.settings.label + '号</li>')  
  92.                             .attr('id', 'cart-item-' + this.settings.id)  
  93.                             .data('seatId', this.settings.id).text();  
  94.                             console.log(roomNoText);  
  95.                     $roomNo.text(roomNoText);  
  96.                     var roomMsgText = "张三、李四、王五、马六";  
  97.                     $roomMsg.text(roomMsgText);  
  98.                     return 'unavailable';  
  99.                 } else {  
  100.                     return this.style();  
  101.                 }  
  102.             }  
  103.         });  
  104.         //设置已售出的座位  
  105.         sc.get(['3_03', '2_05']).status('unavailable');  
  106.     }  
  107.     function refresh(){  
  108.         // console.log(sc);  
  109.         // sc.dataReload(data2)  
  110.         initchart(data2)  
  111.     }  
  112. </script>  
  113. </head>  
  114. <body>  
  115.     <button style="float:right;width:150px;height:30px;" onclick="refresh()">刷新图表</button>  
  116.     <div class="roomcontent">  
  117.         <div id="room_area">  
  118.         </div>  
  119.         <div id="roomlegend" class='of'></div>  
  120.         <div id="roomdetail">  
  121.             <h3>房间详细信息</h3>  
  122.             <div id="roomNo">  
  123.             </div>  
  124.             <div id="roomMsg">  
  125.             </div>  
  126.         </div>  
  127.     </div>  
  128.   
  129.   
  130. </body>  
  131. </html>  

源码

[html] view plain copy
  1. /*  
  2.  * jQuery-Seat-Charts v1.1.0  
  3. */  
  4. (function($) {  
  5.     $.fn.seatCharts = function (setup) {  
  6.   
  7.         //if there's seatCharts object associated with the current element, return it  
  8.         if (this.data('seatCharts')) {  
  9.             // console.log(this.data('seatCharts'))  
  10.             // return this.data('seatCharts');  
  11.   
  12.             // console.log(setup)  
  13.             // console.log(setup.legend.items)  
  14.             // console.log(this.data('seatCharts'))  
  15.             var ary = setup.legend.items;  
  16.             ary.splice(0,ary.length);   
  17.             this.empty();  
  18.         }  
  19.           
  20.         var fn       = this,  
  21.             seats    = {},  
  22.             seatIds  = [],  
  23.             legend,  
  24.             settings = {  
  25.                 animate : false, //requires jQuery UI  
  26.                 naming  : {  
  27.                     top    : true,  
  28.                     left   : true,  
  29.                     getId  : function(character, row, column) {  
  30.                         return row + '_' + column;  
  31.                     },  
  32.                     getLabel : function (character, row, column) {  
  33.                         return column;  
  34.                     },  
  35.                     data:[]  
  36.                 },  
  37.                 legend : {  
  38.                     node   : null,  
  39.                     items  : []  
  40.                 },  
  41.                 click   : function() {  
  42.   
  43.                     if (this.status() == 'available') {  
  44.                         return 'selected';  
  45.                     } else if (this.status() == 'selected') {  
  46.                         return 'available';  
  47.                     } else {  
  48.                         return this.style();  
  49.                     }  
  50.                       
  51.                 },  
  52.                 focus  : function() {  
  53.   
  54.                     if (this.status() == 'available') {  
  55.                         return 'focused';  
  56.                     } else  {  
  57.                         return this.style();  
  58.                     }  
  59.                 },  
  60.                 blur   : function() {  
  61.                     return this.status();  
  62.                 },  
  63.                 seats   : {}  
  64.               
  65.             },  
  66.             //seat will be basically a seat object which we'll when generating the map  
  67.             seat = (function(seatCharts, seatChartsSettings) {  
  68.                 return function (setup) {  
  69.                     var fn = this;  
  70.                       
  71.                     fn.settings = $.extend({  
  72.                         status : 'available', //available, unavailable, selected  
  73.                         style  : 'available',  
  74.                         //make sure there's an empty hash if user doesn't pass anything  
  75.                         data   : seatChartsSettings.seats[setup.character] || {}  
  76.                         //anything goes here?  
  77.                     }, setup);  
  78.   
  79.                     fn.settings.$node = $('<div></div>');  
  80.                       
  81.                     fn.settings.$node  
  82.                         .attr({  
  83.                             id             : fn.settings.id,  
  84.                             role           : 'checkbox',  
  85.                             'aria-checked' : false,  
  86.                             focusable      : true,  
  87.                             tabIndex       : -1 //manual focus  
  88.                         })  
  89.                         .text(fn.settings.label)  
  90.                         .addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat(  
  91.                             //let's merge custom user defined classes with standard JSC ones  
  92.                             fn.settings.classes,   
  93.                             typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ?   
  94.                                 [] : seatChartsSettings.seats[fn.settings.character].classes  
  95.                             ).join(' '));  
  96.                       
  97.                     //basically a wrapper function  
  98.                     fn.data = function() {  
  99.                         return fn.settings.data;  
  100.                     };  
  101.                       
  102.                     fn.char = function() {  
  103.                         return fn.settings.character;  
  104.                     };  
  105.                       
  106.                     fn.node = function() {  
  107.                         return fn.settings.$node;                         
  108.                     };  
  109.   
  110.                     /*  
  111.                      * Can either set or return status depending on arguments.  
  112.                      *  
  113.                      * If there's no argument, it will return the current style.  
  114.                      *  
  115.                      * If you pass an argument, it will update seat's style  
  116.                      */  
  117.                     fn.style = function() {  
  118.   
  119.                         return arguments.length == 1 ?  
  120.                             (function(newStyle) {  
  121.                                 var oldStyle = fn.settings.style;  
  122.   
  123.                                 //if nothing changes, do nothing  
  124.                                 if (newStyle == oldStyle) {  
  125.                                     return;  
  126.                                 }  
  127.                                   
  128.                                 //focused is a special style which is not associated with status  
  129.                                 fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status;  
  130.                                 fn.settings.$node  
  131.                                     .attr('aria-checked', newStyle == 'selected');  
  132.   
  133.                                 //if user wants to animate status changes, let him do this  
  134.                                 seatChartsSettings.animate ?  
  135.                                     fn.settings.$node.switchClass(oldStyle, newStyle, 200) :  
  136.                                     fn.settings.$node.removeClass(oldStyle).addClass(newStyle);  
  137.                                       
  138.                                 return fn.settings.style = newStyle;  
  139.                             })(arguments[0]) : fn.settings.style;  
  140.                     };  
  141.                       
  142.                     //either set or retrieve  
  143.                     fn.status = function() {  
  144.       
  145.                         return fn.settings.status = arguments.length == 1 ?   
  146.                             fn.style(arguments[0]) : fn.settings.status;  
  147.                     };  
  148.                       
  149.                     //using immediate function to convienietly get shortcut variables  
  150.                     (function(seatSettings, character, seat) {  
  151.                         //attach event handlers  
  152.                         $.each(['click', 'focus', 'blur'], function(index, callback) {  
  153.                           
  154.                             //we want to be able to call the functions for each seat object  
  155.                             fn[callback] = function() {  
  156.                                 if (callback == 'focus') {  
  157.                                     //if there's already a focused element, we have to remove focus from it first  
  158.                                     if (seatCharts.attr('aria-activedescendant') !== undefined) {  
  159.                                         seats[seatCharts.attr('aria-activedescendant')].blur();  
  160.                                     }  
  161.                                     seatCharts.attr('aria-activedescendant', seat.settings.id);  
  162.                                     seat.node().focus();  
  163.                                 }  
  164.                               
  165.                                 /*  
  166.                                  * User can pass his own callback function, so we have to first check if it exists  
  167.                                  * and if not, use our default callback.  
  168.                                  *  
  169.                                  * Each callback function is executed in the current seat context.  
  170.                                  */  
  171.                                 return fn.style(typeof seatSettings[character][callback] === 'function' ?  
  172.                                     seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat));  
  173.                             };  
  174.                               
  175.                         });  
  176.                     //the below will become seatSettings, character, seat thanks to the immediate function        
  177.                     })(seatChartsSettings.seats, fn.settings.character, fn);  
  178.                               
  179.                     fn.node()  
  180.                         //the first three mouse events are simple  
  181.                         .on('click',      fn.click)  
  182.                         .on('mouseenter', fn.focus)  
  183.                         .on('mouseleave', fn.blur)  
  184.                           
  185.                         //keydown requires quite a lot of logic, because we have to know where to move the focus  
  186.                         .on('keydown',    (function(seat, $seat) {  
  187.                           
  188.                             return function (e) {  
  189.                                   
  190.                                 var $newSeat;  
  191.                                   
  192.                                 //everything depends on the pressed key  
  193.                                 switch (e.which) {  
  194.                                     //spacebar will just trigger the same event mouse click does  
  195.                                     case 32:  
  196.                                         e.preventDefault();  
  197.                                         seat.click();  
  198.                                         break;  
  199.                                     //UP & DOWN  
  200.                                     case 40:  
  201.                                     case 38:  
  202.                                         e.preventDefault();  
  203.                                           
  204.                                         /*  
  205.                                          * This is a recursive, immediate function which searches for the first "focusable" row.  
  206.                                          *   
  207.                                          * We're using immediate function because we want a convenient access to some DOM elements  
  208.                                          * We're using recursion because sometimes we may hit an empty space rather than a seat.  
  209.                                          *  
  210.                                          */  
  211.                                         $newSeat = (function findAvailable($rows, $seats, $currentRow) {  
  212.                                             var $newRow;  
  213.                                               
  214.                                             //let's determine which row should we move to  
  215.                                               
  216.                                             if (!$rows.index($currentRow) && e.which == 38) {  
  217.                                                 //if this is the first row and user has pressed up arrow, move to the last row  
  218.                                                 $newRow = $rows.last();  
  219.                                             } else if ($rows.index($currentRow) == $rows.length-1 && e.which == 40) {  
  220.                                                 //if this is the last row and user has pressed down arrow, move to the first row  
  221.                                                 $newRow = $rows.first();  
  222.                                             } else {  
  223.                                                 //using eq to get an element at the desired index position  
  224.                                                 $newRow = $rows.eq(  
  225.                                                     //if up arrow, then decrement the index, if down increment it  
  226.                                                     $rows.index($currentRow) + (e.which == 38 ? (-1) : (+1))  
  227.                                                 );  
  228.                                             }                                                 
  229.                                               
  230.                                             //now that we know the row, let's get the seat using the current column position  
  231.                                             $newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat));  
  232.                                               
  233.                                             //if the seat we found is a space, keep looking further  
  234.                                             return $newSeat.hasClass('seatCharts-space') ?  
  235.                                                 findAvailable($rows, $seats, $newRow) : $newSeat;  
  236.                                               
  237.                                         })($seat  
  238.                                             //get a reference to the parent container and then select all rows but the header  
  239.                                                 .parents('.seatCharts-container')  
  240.                                                 .find('.seatCharts-row:not(.seatCharts-header)'),  
  241.                                             $seat  
  242.                                             //get a reference to the parent row and then find all seat cells (both seats & spaces)  
  243.                                                 .parents('.seatCharts-row:first')  
  244.                                                 .find('.seatCharts-seat,.seatCharts-space'),  
  245.                                             //get a reference to the current row  
  246.                                             $seat.parents('.seatCharts-row:not(.seatCharts-header)')  
  247.                                         );  
  248.                                           
  249.                                         //we couldn't determine the new seat, so we better give up  
  250.                                         if (!$newSeat.length) {  
  251.                                             return;  
  252.                                         }  
  253.                                           
  254.                                         //remove focus from the old seat and put it on the new one  
  255.                                         seat.blur();  
  256.                                         seats[$newSeat.attr('id')].focus();  
  257.                                         $newSeat.focus();  
  258.                                           
  259.                                         //update our "aria" reference with the new seat id  
  260.                                         seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));  
  261.                                                                               
  262.                                         break;                                        
  263.                                     //LEFT & RIGHT  
  264.                                     case 37:  
  265.                                     case 39:  
  266.                                         e.preventDefault();  
  267.                                         /*  
  268.                                          * The logic here is slightly different from the one for up/down arrows.  
  269.                                          * User will be able to browse the whole map using just left/right arrow, because  
  270.                                          * it will move to the next row when we reach the right/left-most seat.  
  271.                                          */  
  272.                                         $newSeat = (function($seats) {  
  273.                                           
  274.                                             if (!$seats.index($seat) && e.which == 37) {  
  275.                                                 //user has pressed left arrow and we're currently on the left-most seat  
  276.                                                 return $seats.last();  
  277.                                             } else if ($seats.index($seat) == $seats.length -1 && e.which == 39) {  
  278.                                                 //user has pressed right arrow and we're currently on the right-most seat  
  279.                                                 return $seats.first();  
  280.                                             } else {  
  281.                                                 //simply move one seat left or right depending on the key  
  282.                                                 return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1)));  
  283.                                             }  
  284.   
  285.                                         })($seat  
  286.                                             .parents('.seatCharts-container:first')  
  287.                                             .find('.seatCharts-seat:not(.seatCharts-space)'));  
  288.                                           
  289.                                         if (!$newSeat.length) {  
  290.                                             return;  
  291.                                         }  
  292.                                               
  293.                                         //handle focus  
  294.                                         seat.blur();      
  295.                                         seats[$newSeat.attr('id')].focus();  
  296.                                         $newSeat.focus();  
  297.                                           
  298.                                         //update our "aria" reference with the new seat id  
  299.                                         seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));  
  300.                                         break;    
  301.                                     default:  
  302.                                         break;  
  303.                                   
  304.                                 }  
  305.                             };  
  306.                                   
  307.                         })(fn, fn.node()));  
  308.                         //.appendTo(seatCharts.find('.' + row));  
  309.   
  310.                 }  
  311.             })(fn, settings);  
  312.               
  313.         fn.addClass('seatCharts-container');  
  314.           
  315.         //true -> deep copy!  
  316.         $.extend(true, settings, setup);          
  317.           
  318.         //Generate default row ids unless user passed his own  
  319.         settings.naming.rows = settings.naming.rows || (function(length) {  
  320.             var rows = [];  
  321.               
  322.             for (var i = 1; i <= length; i++) {  
  323.                 rows.push(i);  
  324.             }  
  325.             return rows;  
  326.         })(settings.map.length);  
  327.           
  328.         //Generate default column ids unless user passed his own  
  329.         settings.naming.columns = settings.naming.columns || (function(length) {  
  330.             var columns = [];  
  331.               
  332.             for (var i = 1; i <= length; i++) {  
  333.                 columns.push("0"+i);  
  334.             }  
  335.             return columns;  
  336.         })(settings.map[0].split('').length);  
  337.           
  338.         if (settings.naming.top) {  
  339.             var $headerRow = $('<div></div>')  
  340.                 .addClass('seatCharts-row seatCharts-header');  
  341.               
  342.             if (settings.naming.left) {  
  343.                 $headerRow.append($('<div></div>').addClass('seatCharts-cell'));  
  344.             }  
  345.               
  346.                   
  347.             $.each(settings.naming.columns, function(index, value) {  
  348.                 $headerRow.append(  
  349.                     $('<div></div>')  
  350.                         .addClass('seatCharts-cell')  
  351.                         .text(value)  
  352.                 );  
  353.             });  
  354.         }  
  355.           
  356.         fn.append($headerRow);  
  357.           
  358.         //do this for each map row  
  359.         $.each(settings.map, function(row, characters) {  
  360.   
  361.             var $row = $('<div></div>').addClass('seatCharts-row');  
  362.                   
  363.             if (settings.naming.left) {  
  364.                 $row.append(  
  365.                     $('<div></div>')  
  366.                         .addClass('seatCharts-cell seatCharts-space')  
  367.                         .text(settings.naming.rows[row])  
  368.                 );  
  369.             }  
  370.   
  371.             /*  
  372.              * Do this for each seat (letter)  
  373.              *  
  374.              * Now users will be able to pass custom ID and label which overwrite the one that seat would be assigned by getId and  
  375.              * getLabel  
  376.              *  
  377.              * New format is like this:  
  378.              * a[ID,label]a[ID]aaaaa  
  379.              *  
  380.              * So you can overwrite the ID or label (or both) even for just one seat.  
  381.              * Basically ID should be first, so if you want to overwrite just label write it as follows:  
  382.              * a[,LABEL]  
  383.              *  
  384.              * Allowed characters in IDs areL 0-9, a-z, A-Z, _  
  385.              * Allowed characters in labels are: 0-9, a-z, A-Z, _, ' ' (space)  
  386.              *  
  387.              */  
  388.             $.each(characters.match(/[a-z_]{1}(
    [0−9a−z]0,(,[0−9a−z]+)?
    )?/gi), function (column, characterParams) {   
  389.                 var matches         = characterParams.match(/([a-z_]{1})(
    ([0−9a−z,]+)
    )?/i),  
  390.                     //no matter if user specifies [] params, the character should be in the second element  
  391.                     character       = matches[1],  
  392.                     //check if user has passed some additional params to override id or label  
  393.                     params          = typeof matches[3] !== 'undefined' ? matches[3].split(',') : [],  
  394.                     //id param should be first  
  395.                     overrideId      = params.length ? params[0] : null,  
  396.                     //label param should be second  
  397.                     overrideLabel   = params.length === 2 ? params[1] : null;  
  398.                       
  399.                 $row.append(character != '_' ?  
  400.                     //if the character is not an underscore (empty space)  
  401.                     (function(naming) {  
  402.                         //console.log(naming);  
  403.                         //so users don't have to specify empty objects  
  404.                         // console.log(naming);  
  405.                         // console.log("character"+naming.getLabel(character, naming.rows[row], naming.columns[column]));  
  406.                         // console.log("row"+row);  
  407.                         // console.log(column);  
  408.                         // console.log(naming.data)  
  409.                         settings.seats[character] = character in settings.seats ? settings.seats[character] : {};  
  410.                           
  411.                         var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]);  
  412.                             seats[id] = new seat({  
  413.                                 id        : id,  
  414.                                 label     : naming.data[row][column] ,  
  415.   
  416.                                 // label     : overrideLabel ?  overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),  
  417.                                 row       : row,  
  418.                                 column    : column,  
  419.                                 character : character  
  420.                             });  
  421.                             seatIds.push(id);  
  422.                         return seats[id].node();  
  423.   
  424.                           
  425.                     })(settings.naming) :  
  426.                     //this is just an empty space (_)  
  427.                     $('<div></div>').addClass('seatCharts-cell seatCharts-space')     
  428.                 );  
  429.             });  
  430.               
  431.             fn.append($row);  
  432.         });  
  433.       
  434.         //if there're any legend items to be rendered  
  435.         settings.legend.items.length ? (function(legend) {  
  436.             //either use user-defined container or create our own and insert it right after the seat chart div  
  437.             var $container = (legend.node || $('<div></div').insertAfter(fn))  
  438.                 .addClass('seatCharts-legend');  
  439.                   
  440.             var $ul = $('<ul></ul>')  
  441.                 .addClass('seatCharts-legendList')  
  442.                 .appendTo($container);  
  443.               
  444.             $.each(legend.items, function(index, item) {  
  445.                 $ul.append(  
  446.                     $('<li></li>')  
  447.                         .addClass('seatCharts-legendItem')  
  448.                         .append(  
  449.                             $('<div></div>')  
  450.                                 //merge user defined classes with our standard ones  
  451.                                 .addClass(['seatCharts-seat', 'seatCharts-cell', item[1]].concat(  
  452.                                     settings.classes,   
  453.                                     typeof settings.seats[item[0]] == "undefined" ? [] : settings.seats[item[0]].classes).join(' ')  
  454.                                 )  
  455.                         )  
  456.                         .append(  
  457.                             $('<span></span>')  
  458.                                 .addClass('seatCharts-legendDescription')  
  459.                                 .text(item[2])  
  460.                         )  
  461.                 );  
  462.             });  
  463.               
  464.             return $container;  
  465.         })(settings.legend) : null;  
  466.       
  467.         fn.attr({  
  468.             tabIndex : 0  
  469.         });  
  470.           
  471.           
  472.         //when container's focused, move focus to the first seat  
  473.         fn.focus(function() {  
  474.             if (fn.attr('aria-activedescendant')) {  
  475.                 seats[fn.attr('aria-activedescendant')].blur();  
  476.             }  
  477.                   
  478.             fn.find('.seatCharts-seat:not(.seatCharts-space):first').focus();  
  479.             seats[seatIds[0]].focus();  
  480.   
  481.         });  
  482.       
  483.         //public methods of seatCharts  
  484.         fn.data('seatCharts', {  
  485.             seats   : seats,  
  486.             seatIds : seatIds,  
  487.             //set for one, set for many, get for one  
  488.             status: function() {  
  489.                 var fn = this;  
  490.               
  491.                 return arguments.length == 1 ? fn.seats[arguments[0]].status() : (function(seatsIds, newStatus) {  
  492.                   
  493.                     return typeof seatsIds == 'string' ? fn.seats[seatsIds].status(newStatus) : (function() {  
  494.                         $.each(seatsIds, function(index, seatId) {  
  495.                             fn.seats[seatId].status(newStatus);  
  496.                         });  
  497.                     })();  
  498.                 })(arguments[0], arguments[1]);  
  499.             },  
  500.             each  : function(callback) {  
  501.                 var fn = this;  
  502.               
  503.                 for (var seatId in fn.seats) {  
  504.                     if (false === callback.call(fn.seats[seatId], seatId)) {  
  505.                         return seatId;//return last checked  
  506.                     }  
  507.                 }  
  508.                   
  509.                 return true;  
  510.             },  
  511.             node       : function() {  
  512.                 var fn = this;  
  513.                 //basically create a CSS query to get all seats by their DOM ids  
  514.                 return $('#' + fn.seatIds.join(',#'));  
  515.             },  
  516.   
  517.             find       : function(query) {//D, a.available, unavailable  
  518.                 var fn = this;  
  519.               
  520.                 var seatSet = fn.set();  
  521.               
  522.                 //user searches just for a particual character  
  523.                 return query.length == 1 ? (function(character) {  
  524.                     fn.each(function() {  
  525.                         if (this.char() == character) {  
  526.                             seatSet.push(this.settings.id, this);  
  527.                         }  
  528.                     });  
  529.                       
  530.                     return seatSet;  
  531.                 })(query) : (function() {  
  532.                     //user runs a more sophisticated query, so let's see if there's a dot  
  533.                     return query.indexOf('.') > -1 ? (function() {  
  534.                         //there's a dot which separates character and the status  
  535.                         var parts = query.split('.');  
  536.                           
  537.                         fn.each(function(seatId) {  
  538.                             if (this.char() == parts[0] && this.status() == parts[1]) {  
  539.                                 seatSet.push(this.settings.id, this);  
  540.                             }  
  541.                         });  
  542.                           
  543.                         return seatSet;  
  544.                     })() : (function() {  
  545.                         fn.each(function() {  
  546.   
  547.                             if (this.status() == query) {  
  548.                                 seatSet.push(this.settings.id, this);  
  549.                             }  
  550.                         });  
  551.                           
  552.                         return seatSet;  
  553.                     })();  
  554.                 })();  
  555.                   
  556.             },  
  557.             set        : function set() {//inherits some methods  
  558.                 var fn = this;  
  559.                   
  560.                 return {  
  561.                     seats      : [],  
  562.                     seatIds    : [],  
  563.                     length     : 0,  
  564.                     status     : function() {  
  565.                         var args = arguments,  
  566.                             that = this;  
  567.                         //if there's just one seat in the set and user didn't pass any params, return current status  
  568.                         return this.length == 1 && args.length == 0 ? this.seats[0].status() : (function() {  
  569.                             //otherwise call status function for each of the seats in the set  
  570.                             $.each(that.seats, function() {  
  571.                                 this.status.apply(this, args);  
  572.                             });  
  573.                         })();  
  574.                     },  
  575.                     node       : function() {  
  576.                         return fn.node.call(this);  
  577.                     },  
  578.                     each       : function() {  
  579.                         return fn.each.call(this, arguments[0]);  
  580.                     },  
  581.                     get        : function() {  
  582.                         return fn.get.call(this, arguments[0]);  
  583.                     },  
  584.                     find       : function() {  
  585.                         return fn.find.call(this, arguments[0]);  
  586.                     },  
  587.                     set       : function() {  
  588.                         return set.call(fn);  
  589.                     },  
  590.                     push       : function(id, seat) {  
  591.                         this.seats.push(seat);  
  592.                         this.seatIds.push(id);  
  593.                         ++this.length;  
  594.                     }  
  595.                 };  
  596.             },  
  597.             //get one object or a set of objects  
  598.             get   : function(seatsIds) {  
  599.                 var fn = this;  
  600.   
  601.                 return typeof seatsIds == 'string' ?   
  602.                     fn.seats[seatsIds] : (function() {  
  603.                           
  604.                         var seatSet = fn.set();  
  605.                           
  606.                         $.each(seatsIds, function(index, seatId) {  
  607.                             if (typeof fn.seats[seatId] === 'object') {  
  608.                                 seatSet.push(seatId, fn.seats[seatId]);  
  609.                             }  
  610.                         });  
  611.                           
  612.                         return seatSet;  
  613.                     })();  
  614.             },  
  615.             dataReload : function(data){  
  616.                 // console.log(this)  
  617.                 // console.log(data);  
  618.             }  
  619.         });       
  620.         return fn.data('seatCharts');  
  621.     }  
  622. })(jQuery);  
阅读全文
0 0
网络信息安全协会 网络信息安全协会
原创粉丝点击
热门IT博客
网站seo诊断工具网站seo诊断工具
广东网络发票管理系统广东网络发票管理系统
虎扑买鞋是什么软件
淘宝兴业扫码付款步骤
sql怎么删除重复数据
网络辅导
网络推广经理岗位职责
异次元杀阵数字算法
肤美灵黄胖子知乎
注塑工有什么危害知乎
淘宝卖家网名昵称大全
台湾淘宝双11
西安博达软件怎么样
白马山庄杀人事件知乎
linux系统安全设置
大连淘宝装修设计
mac os x 10.11.5
大数据分析足球比赛
山东广电网络人事任免
g73车圆弧的编程例子
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 和气生财多少钱一包 男士钱夹哪个牌子好 男士皮夹什么牌子好 爱马仕包包丝巾 便宜包包 皮包厂家 包包专卖店 利宝 钱包里 皮夹钱夹 包包都有什么品牌 皮包什么 好一点的包包品牌 女包新款 奢侈品包包回收 包包牌子排行榜 正品包包 皮夹子品牌 国内品牌包包 包包厂家 女包实体店 便宜包包批发 网上卖包包怎么样 包包那个品牌好 哪个网站买包包好 平价包包 阿玛尼包包价格 爱马仕女包价格与图片 寇驰女包价格 梦特娇包包怎么样 巴布瑞女包 男士包包图片 包包的品牌 大品牌包包有哪些 丹尼熊包包怎么样 什么皮包好 赛琳包包价格 什么牌子的男士钱包好 钱君 钱呀 钱啦

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里