jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
266 lines (262 loc) • 16.6 kB
HTML
<html ng-app="demoApp">
<head>
<title id="Description">jqxTabs Directive for AngularJS</title>
<link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
var people = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
var titleofcourtesy = ["Ms.", "Dr.", "Ms.", "Mrs.", "Mr.", "Mr.", "Mr.", "Ms.", "Ms."];
var birthdate = ["08-Dec-48", "19-Feb-52", "30-Aug-63", "19-Sep-37", "04-Mar-55", "02-Jul-63", "29-May-60", "09-Jan-58", "27-Jan-66"];
var hiredate = ["01-May-92", "14-Aug-92", "01-Apr-92", "03-May-93", "17-Oct-93", "17-Oct-93", "02-Jan-94", "05-Mar-94", "15-Nov-94"];
var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];
var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
var postalcode = ["98122", "98401", "98033", "98052", "SW1 8JR", "EC2 7JR", "RG1 9SP", "98105", "WG2 7LT"];
var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
var homephone = ["(206) 555-9857", "(206) 555-9482", "(206) 555-3412", "(206) 555-8122", "(71) 555-4848", "(71) 555-7773", "(71) 555-5598", "(206) 555-1189", "(71) 555-4444"];
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["firstname"] = firstNames[i];
row["lastname"] = lastNames[i];
row["title"] = titles[i];
row["titleofcourtesy"] = titleofcourtesy[i];
row["birthdate"] = birthdate[i];
row["hiredate"] = hiredate[i];
row["address"] = address[i];
row["city"] = city[i];
row["postalcode"] = postalcode[i];
row["country"] = country[i];
row["homephone"] = homephone[i];
row["url"] = "../../images/" + firstNames[i].toLowerCase() + ".png";
people[i] = row;
}
$scope.people = people;
});
</script>
</head>
<body>
<div ng-controller="demoController">
<jqx-tabs jqx-width="'800px'" jqx-height="'200px'">
<ul>
<li style="margin-left: 30px;">{{people[0].firstname}}</li>
<li>{{people[1].firstname}}</li>
<li>{{people[2].firstname}}</li>
<li>{{people[3].firstname}}</li>
<li>{{people[4].firstname}}</li>
<li>{{people[5].firstname}}</li>
<li>{{people[6].firstname}}</li>
<li>{{people[7].firstname}}</li>
<li>{{people[8].firstname}}</li>
</ul>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[0].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[0].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[0].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[0].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[0].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[0].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[0].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[0].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[0].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[1].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[1].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[1].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[1].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[1].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[1].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[1].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[1].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[1].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[2].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[2].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[2].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[2].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[2].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[2].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[2].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[2].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[2].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[3].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[3].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[3].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[3].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[3].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[3].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[3].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[3].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[3].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[4].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[4].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[4].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[4].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[4].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[4].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[4].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[4].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[4].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[5].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[5].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[5].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[5].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[5].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[5].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[5].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[5].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[5].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[6].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[6].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[6].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[6].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[6].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[6].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[6].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[6].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[6].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[7].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[7].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[7].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[7].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[7].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[7].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[7].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[7].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[7].hiredate}}</div>
</div>
</div>
</div>
<div>
<div style="margin: 15px;">
<div style="float: left; width: 15%;">
<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>
<div style='margin-top: 10px;'>
<img height="60" ng-src={{people[8].url}}>
</div>
</div>
<div style="float: left; width: 45%;">
<div style='margin: 10px;'><b>First Name:</b>{{people[8].firstname}}</div>
<div style='margin: 10px;'><b>Last Name:</b>{{people[8].lastname}}</div>
<div style='margin: 10px;'><b>Title:</b>{{people[8].title}}</div>
<div style='margin: 10px;'><b>Address:</b>{{people[8].address}}</div>
</div>
<div style="float: left; width: 40%;">
<div style='margin: 10px;'><b>Postal Code:</b>{{people[8].postalcode}}</div>
<div style='margin: 10px;'><b>City:</b>{{people[8].city}}</div>
<div style='margin: 10px;'><b>Phone:</b>{{people[8].homephone}}</div>
<div style='margin: 10px;'><b>Hire Date:</b>{{people[8].hiredate}}</div>
</div>
</div>
</div>
</jqx-tabs>
</div>
</body>
</html>