Expander

Features
  1. WinJS template support for header and content.
  2. Content template repetition for array binding
  3. Expand directions: Left, Right, Down, Up
  4. Custom Icon pointers support.
  5. Icon pointer positions: Left, right.
  6. Expand and collapse events.
  7. Theme Customization
  8. Form elements
  9. Freeze header
  10. Show or hide icon pointers.

In progress
  1. Function templates

To create an expander declaratively, simply add attributes data-win-control and data-win-options to an element.
<div  data-win-control="Bixaps.UI.Expander" data-win-options="{  options here}" >
</div>

Expander should be associated with a header template and item template.

Header Template
  <div id="headerTemp1" data-win-control="WinJS.Binding.Template">
   Header content here
  </div>

Content template
<div id="customDataTemp" data-win-control="WinJS.Binding.Template">

  Your content here

  </div>


Same template can be used for multiple expanders.

Expander options

  1. headerTemplate : specifies header template element (normally with select).
  2. contentTemplate: specifies content template element (normally with select).
  3. contentDataSource: specifies the data source to be used when content binding takes place.
  4. headerDataSource: specifies the data source to be used when header binding takes place.
  5. dataSource: specifices the data source to be used when expander binding takes place. Use this when you want to pass a single data source for both header and content. It should be passed as an object with two properties, one for header and one for content.
  6. expandDirection: specifies expand direction. default is Down. valid values are right, left, up
  7. pointerPosition: speicifies pointer icon position, for down and up expanders, valid values are down and up. for left and right expanders, valid values are top and bottom.
  8. freezeHeader: freezes header.
  9. showArrow: flag denotes whether to show pointer icon or not.
  10. icons: custom icons. denotes an object with two properties 'expand' and 'collapse'
  11. expanded: denotes whether expander is expanded or not when rendered.

Events

  1. expand: fired whenever expander is expanded
  2. collapse: fired whenever expander is collapsed.

Note

For left and right expanders, header container max width set to 250px by default.
use the following css to change header width with your custom one.
.win-expander-left .win-expander-header
{
  max-width: 210px;
}

.win-expander-right .win-expander-header
{
  max-width: 230px;
}

Examples

  • Data source
var simpleData = { title: 'Expander example ', data: 'Expander control is a custom WinJS control.' };

var htmlData = { title: 'Expander down example with header and content binding, icon on left', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };



var singleSource = {header: {title:'title1'}, content: {data:'content1'}}

  • Common templates

<!-- header template -->
    <div id="headerTemp" data-win-control="WinJS.Binding.Template">
                        <h5 data-win-bind="textContent: title"></h5>
     </div>

<!-- content template -->
<div id="customDataTemp" data-win-control="WinJS.Binding.Template">

                        <div data-win-bind="innerHTML: data">
                           
                        </div>

   </div>


  • Simple expander (default is down)
 <div id="Div1" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:false
	,contentDataSource:simpleData
	,headerDataSource:simpleData

}">
   </div>

  • Expander with direction up
                            <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
         ,expanderDirection: 'up'
	,contentDataSource:simpleData
	,headerDataSource:simpleData1
}">
                            </div>

  • Expander with single data source

                            <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
         ,expanderDirection: 'up'
	,itemDataSource:singleSource
}">
                            </div>

  • Expander expanded initially

                            <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
         ,expanded:true
	,dataSource:singleSource
}">
                            </div>

  • Expander with freezed header

                            <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
         ,freezeHeader:true
	,dataSource:singleSource
}">
                            </div>



                            <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
         ,freezeHeader:true
	,dataSource:singleSource
}">
                            </div>

Css classes

Expander can be overrided using the following classes(example color, borders etc).
  • .win-expander : expander class
  • .win-expander-header : expander header including header template and pointer icon
  • .win-expander-headertext: expander header template
  • .win-expander-arrow: expander pointer icon
  • .win-expander-content : expander content
  • .win-expander-down: expander with direction down
  • .win-expander-right: expander with direction right
  • .win-expander-left: expander with direction left
  • .win-expander-up: expander with direction up
  • .collapsed: expander in collapsed state.
  • .expanded: expander in expanded state.
  • .freezeHeader: expander header in freezed state.

Last edited Aug 4, 2013 at 8:11 AM by rajbandi, version 3

Comments

No comments yet.