UIZEのBar/Slideshow機能を使ったスペック比較　デモページ１

　JavaScriptライブラリUIZEのBar機能とSlideShow機能を使用したスペック比較表です。 ページのレイアウトが崩れていますが、これは表のレイアウトが崩れたChromeに対処するため表全体を大きめにしたためです。
アイデアの元となったページです⇒　UIZE Slideshow of Data
UIZEフレームワークのサイトです⇒　UIZE JavaScript Framework

 

国産スポーツ車のスペック比較

Price Weight Length Width Height Wheelbase Clearance Displacement Max power Max Torque Fuel Cost

 

スペック用語

Price	Weight	Length	Width	Height
車体価格 上級グレード	車両重量	全長	全幅	全高

Wheelbase	Clearance	Displacement	Max power	Max Torque	Fuel Cost
ホイールベース	最低地上高	総排気量	最高出力	最大トルク	燃費 10-15モード

動作確認：　Firefox3.6 IE8

 

コード記述例

JSファイル <script type="text/javascript" src="js/uize/Uize.js"></script>

CSSファイル記述部分 <link rel="stylesheet" href="css/uize/widget.slideshow.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/uize/widget.databar.css" type="text/css" media="screen" />

CSS記述部分 .dataBar { width: 68px; height: 370px; } .dataBar .dataBarTrack .dataBarKnob { width: 66px; } table.slideshow { margin: 5px auto; } tr.slideshowHeader td { height: 30px; } tr.slideshowContent > td { background-color: #000; } div.slideshowWrapper { position: relative; width:794px; height:397px; } div.slideshowWrapper table { position: absolute; left: 0px; top: 0px; z-index: 2; } #page_slideShow-slide_name { color: #FFF; font-size: 14px; text-transform: uppercase; letter-spacing: 7px; margin-top: 6px; } #page_slideShow_slideImage { position: absolute; left: 0px; top: 0px; width: 794px; height: 397px; background-color: #000; z-index: 1; text-align: left; } tr.headings td { color: #FFF; font-size: 9px; background: #000 url(../image/icon/button-bg.gif) left top repeat-x; text-align: center; border: 1px solid #444; }

スポーツ車のスペック情報 Uize.module ({ name:'SportsCarData', required:'Uize.Data', builder:function () { var _cachedData, _package = function (_getCopy) { var _data = [ { name:'フェアレディZ', image: '../image/photo/Fairlady-Z.jpg', price: 4.4, weight: 1520, length: 4315, width: 1845, height: 1315, wheelbase: 2550, clearance: 125, displacement: 3696, maxPower: 336, maxTorque: 37.2, fuelCost: 9.5 }, { name:'RX-8', image:'../image/photo/RX-8.jpg', price: 3.1, weight: 1360, length: 4470, width: 1770, height: 1340, wheelbase: 2700, clearance: 125, displacement: 1308, maxPower: 235, maxTorque: 22.0, fuelCost: 9.4 }, { name:'NSX-R', image:'../image/photo/NSX-R.jpg', price: 12.8, weight: 1270, length: 4430, width: 1810, height: 1160, wheelbase: 2530, clearance: 125, displacement: 3179, maxPower: 280, maxTorque: 31.0, fuelCost: 8.6 }, { name:'CR-Z', image:'../image/photo/CR-Z.jpg', price: 2.5, weight: 1180, length: 4080, width: 1740, height: 1395, wheelbase: 2435, clearance: 150, displacement: 1496, maxPower: 113, maxTorque: 14.7, fuelCost: 25.0 }, { name:'インプレッサ WRX', image:'../image/photo/Impreza.jpg', price: 3.6, weight: 1440, length: 4415, width: 1795, height: 1470, wheelbase: 2625, clearance: 150, displacement: 1994, maxPower: 308, maxTorque: 43.8, fuelCost: 10.4 }, { name:'ランサーエボリューション', image:'../image/photo/Lancer-Evolution.jpg', price: 3.7, weight: 1440, length: 4495, width: 1810, height: 1480, wheelbase: 2650, clearance: 140, displacement: 1998, maxPower: 300, maxTorque: 43.0, fuelCost: 10.2 }, { name:'レクサス IS-F', image:'../image/photo/LEXUS-ISF.jpg', price: 7.9, weight: 1440, length: 4660, width: 1815, height: 1415, wheelbase: 2730, clearance: 135, displacement: 4968, maxPower: 423, maxTorque: 51.5, fuelCost: 8.2 }, { name:'GT-R', image:'../image/photo/GT-R.jpg', price: 15.7, weight: 1730, length: 4670, width: 1895, height: 1370, wheelbase: 2780, clearance: 110, displacement: 3799, maxPower: 530, maxTorque: 62.5, fuelCost: 8.5 } ]; return _getCopy ? _data : (_cachedData = _data); } ; /*** Global Variables ***/ var _sacredEmptyObject = {}, _propertyProfiles = { name:{ _displayName:'Name' }, skinColor:{ _displayName:'Skin Color' }, fleshColor:{ _displayName:'Flesh Color' }, price:{ _displayName: 'Price', _unit: 'M Yen', _color: '#f00' }, weight:{ _displayName:'Weight', _unit:'kg', _color:'#e6d985' }, length:{ _displayName:'Length', _unit:'mm', _color:'#ea7934' }, width:{ _displayName:'Width', _unit:'mm', _color:'#ff4200' }, height:{ _displayName:'Height', _unit:'mm', _color:'#da79e3' }, wheelbase:{ _displayName:'Wheelbase', _unit:'mm', _color:'#5767ff' }, clearance:{ _displayName:'Clearance', _unit:'mm', _color:'#ad5703' }, displacement:{ _displayName:'Displacement', _unit:'cc', _color:'#fffaea' }, maxPower:{ _displayName:'Max power', _unit:'PS', _color:'#971601' }, maxTorque:{ _displayName:'Max Torque', _unit:'kgm', _color:'#fff' }, fuelCost:{ _displayName:'Fuel Cost', _unit:'km/L', _color:'#6292be' } } ; /*** Public Static Methods ***/ _package.getNutritionProperties = function () { var _properties = [], _fruit = _package () [0] ; for (var _propertyName in _fruit) /* NOTE: ignore the "name", "Skin Color" and "Flesh Color" properties */ _propertyName.search (/(^image|^name|color)$/i) < 0 && _properties.push (_propertyName) ; return _properties; }; _package.getPropertyDisplayName = function (_propertyName) { return (_propertyProfiles [_propertyName] || _sacredEmptyObject)._displayName; }; _package.getPropertyUnit = function (_propertyName) { return (_propertyProfiles [_propertyName] || _sacredEmptyObject)._unit; }; _package.getPropertyColor = function (_propertyName) { return (_propertyProfiles [_propertyName] || _sacredEmptyObject)._color; }; _package.getValueBoundsForProperty = function (_propertyName) { var _fruits = _package (), _valuesForProperty = Uize.Data.getColumn (_fruits,_propertyName), _minValue = Uize.Data.min (_valuesForProperty), _maxValue = Uize.Data.max (_valuesForProperty) ; return {minValue:_minValue,maxValue:_maxValue + (_maxValue == _minValue ? 1 : 0)}; }; return _package; } }); Uize.module ({ name:'TemplateDataBar', builder:function () { var _package = function () {}; /*** Public Static Methods ***/ _package.process = function (input) { var output = []; output.push ('\r\n<div class="dataBar">\r\n <div id="',input .idPrefix,'-track" class="dataBarTrack">\r\n <div id="',input .idPrefix,'-full" class="dataBarTrackFull"></div>\r\n <div id="',input .idPrefix,'-empty" class="dataBarTrackEmpty"></div>\r\n <div id="',input .idPrefix,'-knob" class="dataBarKnob"><span id="',input .idPrefix,'-value"></span>',input .unit,'</div>\r\n </div>\r\n</div>\r\n\r\n'); return output.join (''); }; /*** Public Static Properties ***/ _package.input = { idPrefix:'string', unit:'string' }; return _package; } });

スペック比較表作成コード Uize.module ({ required:[ 'Uize.Data', 'Uize.Widget.Page', 'Uize.Widget.Bar', 'Uize.Widget.Swap.Image', 'Uize.Widget.SlideShow' ], builder:function () { var page = window.page = new Uize.Widget.Page(); var slideShow = page.addChild('slideShow', Uize.Widget.SlideShow, { slides: SportsCarData() }); slideShow.addChild('slideImage', Uize.Widget.Swap.Image, { width:794, height: 397, built: false }); var nutritionProperties = SportsCarData.getNutritionProperties(), nutritionPropertiesLength = nutritionProperties.length; for (var propertyNo = -1; ++propertyNo < nutritionPropertiesLength;) { var propertyName = nutritionProperties[propertyNo]; slideShow.addChild( 'slide' + Uize.capFirstChar(propertyName), Uize.Widget.Bar, Uize.copyInto( { html: TemplateDataBar, minValue: 0, maxValue: 1, increments: 0, built: false, unit: SportsCarData.getPropertyUnit(propertyName) }, SportsCarData.getValueBoundsForProperty(propertyName) ) ); } page.wireUi(); } });