JavaScript implementation Silverlight Pivotviewer control

For a moment, you use JS to implement a Silverlight Pivotviewer control to practiced hand.

Implementation results:

Silverlight Pivotviewer Description Address: Https://msdn.microsoft.com/zh-cn/library/system.windows.controls.pivot.pivotviewer ( v=vs.95). aspx

In advance code: PivotViewer

Several classes are mainly implemented to achieve:

PivotViewer: The main control, which is responsible for setting properties, combining controls, and binding data. is also the invocation of the portal

Pivotviewerdatetimeproperty, Pivotviewerstringproperty: Property binding, Description property name, corresponding bound data

Pivotviewerselection, Pivotviewerdatasourcefilter, Pivotviewerpropertycombobox, Pivotviewerviewmode: Internal controls, Used to display user-selected filters, set filters, set sorting (grouping) properties, set display mode (table, chart)

Pivotviewerdatasource: Processing user input data sources, including grouping, sorting data, and so on. The grouping function here only makes a simple grouping of dates and unique values

Calling the method is simple, directly mimicking the Silverlight, and so is similar to Silverlight:

<div id= "Panel" ><div class= "filter" id= "Filter" ></div>< div class= "Selection" id= "Selection" ></div><div class= "ViewMode" id= "ViewMode" ></div><div class= "SortMode" id= "SortMode" ></div><div class= "Pivotmain" id= "Pivotmain" ></div></div 

 #panel {width:100%;height:100%;p osition:relative;}    . filter {position:absolute;left:0;width:200px;top:50px; bottom:0px;z-index:1;overflow:auto;}    . selection {position:absolute;left:0;width:100%;top:0;height:50px;z-index:1;}    . viewMode {position:absolute;right:0px;margin-top:10px;height:30px;z-index:2;}    . sortmode {position:absolute;right:300px;margin-top:10px;height:30px;z-index:2;}    . pivotmain {position:absolute;left:200px;right:0;top:50px;bottom:0;}    . pivot_wrap {width:100%;height:100%;p osition:relative;}    . pivot_item {Position:absolute;}      . pivot_item {-webkit-transition:all. 5s linear;      -moz-transition:all. 5s linear;      -ms-transition:all. 5s linear;    Transition:all. 5s linear;    }. pivot_groupbg {position:absolute; Z-index:-1; height:100%;} . pivot_group_title {text-align:center; position:absolute; height:50px; bottom:0px; width:100%; line-height:50px;} 

Window.onload = function () {var pivot = new PV.      PivotViewer (); Pivot. Pivotproperties = [New PV. Pivotviewerstringproperty ({Id: "FName", OPTIONS:PV. Pivotviewerpropertyoptions.canfilter, DisplayName: "First Name", Binding: "FirstName"}), new PV. Pivotviewerstringproperty ({Id: "LName", OPTIONS:PV. Pivotviewerpropertyoptions.canfilter, DisplayName: "Last Name", Binding: "LastName"}), new PV. Pivotviewerdatetimeproperty ({Id: "Birthdate", OPTIONS:PV.      Pivotviewerpropertyoptions.canfilter, DisplayName: "Birthdate", Binding: "Birthdate"})]; Pivot. ItemTemplates = function (obj) {return "<div class= ' Pivot_item ' > <span> "+ obj. FirstName + "</span> <span>" + obj.      LastName + "</span> </div>";      }; Pivot. Itemsource = [{FirstName: "Albert", LastName: "Rinoff", Birthdate:datetime (1949, 06, Department: "Sales", Office: "212"}, {FirstName: "Bertha", LastName: "Smith", Birthdate:datetime (1968, 07 , Department: "Marketing", Office: "324"}, {FirstName: "Larry", LastName: "Summers", Birthdate:datetime (195 2, Department: "R $amp; D ", Office:" Max "}, {FirstName:" Susan ", LastName:" Stendy ", Birthdate:datetime (1953,), Department:" Mark Eting ", Office:" 334 "}, {FirstName:" Mary ", LastName:" Gomez ", Birthdate:datetime (1965,), Department:" Sa Les ", Office:" FirstName "}, {" Mary ", LastName:" Rodrigues ", Birthdate:datetime (1976,, one), Department:" R $amp;      D ", Office:" 140 "}];    Pivot.render (document.getElementById ("Panel"));    };    DateTime = function (year, month, day) {return new Date (year, month, day); };

The animation uses CSS3; no jquery is introduced, so with Getelementsbyclassname, open the example with the appropriate browser.

Ideas are copied, do not write spicy mo detailed. Everyone look at JS is good, there is a C # sense feet.

With his own WOD. CLS, if you want to know please go to previous article = =

　　

JavaScript implementation Silverlight Pivotviewer control