v16.3.0.21
This commit is contained in:
Syncfusion
Родитель
38674ff0be
Коммит
5027b86e11
94
README.md
94
README.md
|
|
@ -1 +1,93 @@
|
|||
# typescript-ej1-demos
|
||||
## Syncfusion TypeScript Samples
|
||||
|
||||
This repository contains the demos of [Syncfusion TypeScript UI controls](https://www.syncfusion.com/products/jquery/javascript). This is the best place to check our controls to get more insight about the usage of APIs. You can also check our controls samples [here](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing), where you can browse the demo for all the controls.
|
||||
|
||||
* [Requirements to run the demo](#requirements-to-run-the-demo)
|
||||
* [License](#license)
|
||||
* [Using the samples](#using-the-samples)
|
||||
* [How to Run the samples](#run-the-samples)
|
||||
* [Controls Catalog](#controls-catalog)
|
||||
* [Support And Feedback](#support-and-feedback])
|
||||
|
||||
## <a name="requirements-to-run-the-demo"></a>Requirements to run the demo ##
|
||||
|
||||
Install the following items:
|
||||
|
||||
* Install nodeJS.
|
||||
* `git clone <repository-url>` this repository
|
||||
* Run `npm install`
|
||||
|
||||
## <a name="license"></a>License ##
|
||||
|
||||
Syncfusion has no liability for any damage or consequence that may arise by the use or viewing of the samples. The samples are for demonstrative purposes and if you choose to use or access the samples you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, accessing or otherwise viewing the samples. By accessing, viewing, or otherwise seeing the samples you acknowledge and agree Syncfusion’s samples will not allow you to seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize or otherwise do anything with Syncfusion’s samples.
|
||||
For licensing information about Syncfusion TypeScript, Download the Syncfusion License Agreements from [here](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf).
|
||||
|
||||
## <a name="using-the-samples"></a>Using the samples ##
|
||||
|
||||
The easiest way to use these samples without using Git is to download the zip file containing the current version (using the following link or by clicking the "Download ZIP" button on the repo page). You can then unzip the entire archive and use the samples.
|
||||
|
||||
[Download the samples ZIP](../../archive/master.zip)
|
||||
|
||||
**Notes:**
|
||||
* Before you unzip the archive, right-click it, select **Properties**, and then select **Unblock**.
|
||||
* Be sure to unzip the entire archive, and not just individual samples. The samples all depend on the SharedContent folder in the archive.
|
||||
|
||||
If you clone the application, run **git clone <repository-url>** to clone the repository.
|
||||
|
||||
To use the Syncfusion Essential TypeScript samples, Syncfusion license key should be registered in samples. Refer [this](https://www.syncfusion.com/kb/9002/how-to-apply-the-license-key-for-syncfusion-samples-published-in-github) link for more information.
|
||||
|
||||
## <a name="run-the-samples"></a>How to Run the samples ##
|
||||
|
||||
* Run `typescriptsamples-release.bat` to generate corresponding js file for ts.
|
||||
* Then, run `npm start`
|
||||
* Visit your app at [http://localhost:5200](http://localhost:5200).
|
||||
|
||||
### Online Demos
|
||||
|
||||
Take a look at the Syncfusion TypeScript live demos.
|
||||
|
||||
* [Web](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing)
|
||||
|
||||
### Offline Demos
|
||||
|
||||
Download our TypeScript Platform installer from [here](https://www.syncfusion.com/downloads/javascript/).
|
||||
|
||||
## <a name="controls-catalog"></a>Controls Catalog
|
||||
|
||||
|
||||
| | All Controls | | |
|
||||
| ------------- | --------------- | ----------- | ----------- |
|
||||
| **GRIDS** | **DATA VISUALIZATION** | **LAYOUT** | **EDITORS** |
|
||||
| [DataGrid](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Grid/Grid) | [Charts](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Chart/Chart) | [Splitter](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Splitter/Splitter) | [Text Box](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TextBoxes/Default) |
|
||||
| [Tree Grid](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TreeGrid/TreeGrid) | [Diagramming](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Diagram/Diagram) | [Dialog](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Dialog/Dialog) | [Autocomplete](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Autocomplete/Autocomplete) |
|
||||
| [Spreadsheet](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Spreadsheet/Default) | [Maps](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Map/Map) | [File Explorer](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/FileExplorer/Default) | [Rich Text Box](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/RTE/Default)
|
||||
| **NAVIGATION** | [Tree Map](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TreeMap/TreeMap) | [ListView](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ListView/ListView) |[slider](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Slider/RangeSlider)|
|
||||
| [Accordion](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Accordion/Default) | [Heat Map](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/HeatMap/HeatMap) | [Rating](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Rating/Default) | [Combo Box](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ComboBox/ComboBox)
|
||||
| [Tree View](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TreeView/Default) | [Scheduler](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Schedule/Schedule) | [Tooltip](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Tooltip/Default) | [Drop-Down List](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/DropDownList/Default) |
|
||||
| [Menu](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Menu/Default) | [Circular Gauge](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/CircularGauge/CircularGauge) | **NOTIFICATION**| [Color Picker](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ColorPicker/ColorPicker) |
|
||||
| [Toolbar](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Toolbar/Default) | [Linear Gauge](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/LinearGauge/LinearGauge) | [Waiting Pop-up](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/WaitingPopup/Default) | [Date Picker](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/DatePicker/DatePicker) |
|
||||
| [Tag Cloud](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TagCloud/Default) | [Digital Gauge](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/DigitalGauge/DigitalGauge) | [Progress Bar](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ProgressBar/Default) | [Time Picker](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TimePicker/TimePicker)
|
||||
| [Ribbon](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Ribbon/Default) | [Bullet Graph](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/BulletGraph/BulletGraph) | [Upload Box](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Uploadbox/Default) | [Date-Time Picker](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/DateTimePicker/DateTimePicker)
|
||||
| [Tabs](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Tab/Default) | [Gantt](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Gantt/Gantt) | [Button](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Button/Button) | [Signature](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Signature/Signature)
|
||||
| [Rotator](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Rotator/Rotator) | [Range Navigator](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/RangeNavigator/RangeNavigator) | **FILE FORMAT LIBRARY** | [Radial Slider](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/RadialSlider/RadialSlider) |
|
||||
[Navigation Drawer](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/NavigationDrawer/NavigationDrawer) | [Sparkline](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Sparkline/Sparkline) | [PDF Viewer](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PDFViewer/Default) |
|
||||
| [Scroller](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ScrollBar/Scrollbar) | [Sunburst Chart](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/SunburstChart/SunburstChart)
|
||||
| [List Box](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ListBox/ListBox) | [Barcode](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/Barcode/Barcode) | |
|
||||
| [Radial Menu](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/RadialMenu/RadialMenu) | [Tag Cloud](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/TagCloud/Default) | |
|
||||
| [Kanban Board](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/KanbanBoard/Default) | [Date Range Picker](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/DateRangePicker/DateRangePicker) |
|
||||
| **REPORTING** | **BUSINESS INTELLIGENCE** | |
|
||||
| [Report Viewer](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/ReportViewer/Default) | [Pivot Grid(OLAP)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotGridOLAP/Default) | |
|
||||
| | [Pivot Grid(Relational)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotGridRelational/Relational) | | |
|
||||
| | [Pivot Chart(OLAP)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotChartOLAP/Default) | |
|
||||
| | [Pivot Chart(Relational)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotChartRelational/Relational) | |
|
||||
| | [Pivot Gauge(OLAP)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotGaugeOLAP/Default) | |
|
||||
| | [Pivot Gauge(Relational)](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotGaugeRelational/Relational) | |
|
||||
| | [Pivot TreeMap](https://tsjq.syncfusion.com/?utm_source=github&utm_medium=listing#!/bootstrap/PivotTreeMap/Default) | |
|
||||
|
||||
|
||||
|
||||
## <a name="support-and-feedback"></a>Support and Feedback ##
|
||||
|
||||
* For using the Syncfusion controls, refer to our documentation [Syncfusion Help](https://help.syncfusion.com/typescript/). All API documentation can be found at [API Reference](https://help.syncfusion.com/api/js/global).
|
||||
* In case of any questions regarding the use of Syncfusion TypeScript, please [contact us](http://www.syncfusion.com/support/#) by creating a support ticket.
|
||||
* To renew the subscription, click [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing) or contact our sales team at <salessupport@syncfusion.com>.
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
|
||||
<div class="cols-sample-area">
|
||||
|
||||
<textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px">
|
||||
<p><b>Description:</b></p>
|
||||
<p>The Rich Text Editor (RTE) control is an easy to render in
|
||||
client side. Customer easy to edit the contents and get the HTML content for
|
||||
the displayed content. A rich text editor control provides users with a toolbar
|
||||
that helps them to apply rich text formats to the text entered in the text
|
||||
area. </p>
|
||||
<p><b>Functional
|
||||
Specifications/Requirements:</b></p>
|
||||
<ol><li><p>Provide
|
||||
the tool bar support, it’s also customizable.</p></li><li><p>Options
|
||||
to get the HTML elements with styles.</p></li><li><p>Support
|
||||
to insert image from a defined path.</p></li><li><p>Footer
|
||||
elements and styles(tag / Element information , Action button (Upload, Cancel))</p></li><li><p>Re-size
|
||||
the editor support. </p></li><li><p>Provide
|
||||
efficient public methods and client side events.</p></li><li><p>Keyboard
|
||||
navigation support.</p></li></ol>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="RTE/default.js"></script>
|
||||
<style type="text/css">
|
||||
#rteSample {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.customUnOrder, .customOrder {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.customUnOrder:after {
|
||||
content: "\e7f1";
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.customOrder:after {
|
||||
content: "\e7f0";
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
var RTEComponent;
|
||||
(function (RTEComponent) {
|
||||
$(function () {
|
||||
var sample = new ej.RTE($("#rteSample"), {
|
||||
width: "100%",
|
||||
minWidth: "150px",
|
||||
showFooter: true,
|
||||
showHtmlSource: true,
|
||||
allowEditing: true,
|
||||
allowKeyboardNavigation: true,
|
||||
autoFocus: true,
|
||||
autoHeight: true,
|
||||
colorPaletteColumns: 10,
|
||||
colorPaletteRows: 5,
|
||||
cssClass: 'gradient-lime',
|
||||
enableResize: true,
|
||||
enableTabKeyNavigation: true,
|
||||
fileBrowser: {
|
||||
filePath: window.baseurl + "Content/FileBrowser/",
|
||||
extensionAllow: "*.png, *.doc, *.pdf, *.txt, *.docx",
|
||||
ajaxAction: window.baseurl + "api/FileExplorer/FileOperations"
|
||||
},
|
||||
imageBrowser: {
|
||||
filePath: window.baseurl + "Content/FileBrowser/",
|
||||
extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx",
|
||||
ajaxAction: window.baseurl + "api/FileExplorer/FileOperations"
|
||||
},
|
||||
isResponsive: true,
|
||||
showClearAll: true,
|
||||
showClearFormat: true,
|
||||
showDimensions: true,
|
||||
showCharCount: true,
|
||||
tools: {
|
||||
formatStyle: ["format"],
|
||||
edit: ["findAndReplace"],
|
||||
font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
|
||||
style: ["bold", "italic", "underline", "strikethrough"],
|
||||
alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
|
||||
lists: ["unorderedList", "orderedList"],
|
||||
clipboard: ["cut", "copy", "paste"],
|
||||
doAction: ["undo", "redo"],
|
||||
indenting: ["outdent", "indent"],
|
||||
clear: ["clearFormat", "clearAll"],
|
||||
links: ["createLink", "removeLink"],
|
||||
images: ["image"],
|
||||
media: ["video"],
|
||||
tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
|
||||
effects: ["superscript", "subscript"],
|
||||
casing: ["upperCase", "lowerCase"],
|
||||
view: ["fullScreen", "zoomIn", "zoomOut"],
|
||||
print: ["print"],
|
||||
customUnorderedList: [{
|
||||
name: "unOrderInsert",
|
||||
tooltip: "Custom UnOrderList",
|
||||
css: "e-rte-toolbar-icon e-rte-unlistitems customUnOrder",
|
||||
text: "Smiley",
|
||||
listImage: "url('../content/images/rte/Smiley-GIF.gif')"
|
||||
}],
|
||||
customOrderedList: [{
|
||||
name: "orderInsert",
|
||||
tooltip: "Custom OrderList",
|
||||
css: "e-rte-toolbar-icon e-rte-listitems customOrder",
|
||||
text: "Lower-Greek",
|
||||
listStyle: "lower-greek"
|
||||
}]
|
||||
}
|
||||
});
|
||||
});
|
||||
})(RTEComponent || (RTEComponent = {}));
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module RTEComponent {
|
||||
$(function () {
|
||||
var sample = new ej.RTE($("#rteSample"),{
|
||||
width: "100%",
|
||||
minWidth: "150px",
|
||||
showFooter: true,
|
||||
showHtmlSource: true,
|
||||
allowEditing: true,
|
||||
allowKeyboardNavigation: true,
|
||||
autoFocus: true,
|
||||
autoHeight: true,
|
||||
colorPaletteColumns: 10,
|
||||
colorPaletteRows: 5,
|
||||
cssClass: 'gradient-lime',
|
||||
enableResize: true,
|
||||
enableTabKeyNavigation: true,
|
||||
fileBrowser: {
|
||||
filePath: (<any>window).baseurl + "Content/FileBrowser/",
|
||||
extensionAllow: "*.png, *.doc, *.pdf, *.txt, *.docx",
|
||||
ajaxAction: (<any>window).baseurl + "api/FileExplorer/FileOperations"
|
||||
},
|
||||
imageBrowser: {
|
||||
filePath: (<any>window).baseurl + "Content/FileBrowser/",
|
||||
extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx",
|
||||
ajaxAction: (<any>window).baseurl + "api/FileExplorer/FileOperations"
|
||||
},
|
||||
isResponsive: true,
|
||||
showClearAll: true,
|
||||
showClearFormat: true,
|
||||
showDimensions: true,
|
||||
showCharCount: true,
|
||||
tools: {
|
||||
formatStyle: ["format"],
|
||||
edit: ["findAndReplace"],
|
||||
font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
|
||||
style: ["bold", "italic", "underline", "strikethrough"],
|
||||
alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
|
||||
lists: ["unorderedList", "orderedList"],
|
||||
clipboard: ["cut", "copy", "paste"],
|
||||
doAction: ["undo", "redo"],
|
||||
indenting: ["outdent", "indent"],
|
||||
clear: ["clearFormat", "clearAll"],
|
||||
links: ["createLink", "removeLink"],
|
||||
images: ["image"],
|
||||
media: ["video"],
|
||||
tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
|
||||
effects: ["superscript", "subscript"],
|
||||
casing: ["upperCase", "lowerCase"],
|
||||
view: ["fullScreen", "zoomIn", "zoomOut"],
|
||||
print: ["print"],
|
||||
customUnorderedList: [{
|
||||
name: "unOrderInsert",
|
||||
tooltip: "Custom UnOrderList",
|
||||
css: "e-rte-toolbar-icon e-rte-unlistitems customUnOrder",
|
||||
text: "Smiley",
|
||||
listImage: "url('../content/images/rte/Smiley-GIF.gif')"
|
||||
}],
|
||||
customOrderedList: [{
|
||||
name: "orderInsert",
|
||||
tooltip: "Custom OrderList",
|
||||
css: "e-rte-toolbar-icon e-rte-listitems customOrder",
|
||||
text: "Lower-Greek",
|
||||
listStyle: "lower-greek"
|
||||
}]
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
<div class="cols-sample-area">
|
||||
<div id="basicAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">Inbox</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">7:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
All WinRT controls are optimized for touch, supporting common gestures: zooming, panning, selecting, double-tapping, rotating, resizing.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">5:33</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
All the components in the ASP.NET MVC have been built from the ground up with performance in mind and are extremely lightweight.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">2:10</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Sent</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">3:55</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">6:47</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
Cloud computing, also known as 'on-demand computing', is a kind of Internet-based computing, where shared resources, data and information are provided to computers and other devices on-demand.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Trash</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">8:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
With our sophisticated support system, built from the ground up to support all type of customers, you will have a streamlined experience working with our support team.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="accordion/default.js"></script>
|
||||
<style class="cssStyles">
|
||||
#basicAccordion img {
|
||||
float: left;
|
||||
height: 40px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.emp-list {
|
||||
border-bottom: 1px solid #BBBCBB;
|
||||
margin-bottom: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.emp-list:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.time-panel {
|
||||
float: right;
|
||||
color: #2382C3;
|
||||
}
|
||||
|
||||
.headername {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
var AccordionComponent;
|
||||
(function (AccordionComponent) {
|
||||
$(function () {
|
||||
var sample = new ej.Accordion($("#basicAccordion"), {
|
||||
width: "100%",
|
||||
allowKeyboardNavigation: true,
|
||||
collapseSpeed: 500,
|
||||
collapsible: true,
|
||||
enableAnimation: true,
|
||||
enableMultipleOpen: true,
|
||||
events: "click",
|
||||
expandSpeed: 500,
|
||||
headerSize: "40px",
|
||||
htmlAttributes: { title: "Demo" },
|
||||
selectedItemIndex: 1,
|
||||
showCloseButton: true,
|
||||
showRoundedCorner: true
|
||||
});
|
||||
});
|
||||
})(AccordionComponent || (AccordionComponent = {}));
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module AccordionComponent {
|
||||
$(function () {
|
||||
var sample = new ej.Accordion($("#basicAccordion"), {
|
||||
width: "100%",
|
||||
allowKeyboardNavigation: true,
|
||||
collapseSpeed: 500,
|
||||
collapsible: true,
|
||||
enableAnimation: true,
|
||||
enableMultipleOpen: true,
|
||||
events: "click",
|
||||
expandSpeed: 500,
|
||||
headerSize: "40px",
|
||||
htmlAttributes: { title: "Demo" },
|
||||
selectedItemIndex: 1,
|
||||
showCloseButton: true,
|
||||
showRoundedCorner: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="autocomplete/autocomplete.js"></script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
var AutocompleteComponent;
|
||||
(function (AutocompleteComponent) {
|
||||
var carList = [
|
||||
"Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
|
||||
"BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
|
||||
"Chevrolet Camaro", "Cadillac",
|
||||
"Duesenberg J", "Dodge Sprinter",
|
||||
"Elantra", "Excavator",
|
||||
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
|
||||
"GAZ Siber",
|
||||
"Honda S2000", "Hyundai Santro",
|
||||
"Isuzu Swift", "Infiniti Skyline",
|
||||
"Jaguar XJS",
|
||||
"Kia Sedona EX", "Koenigsegg Agera",
|
||||
"Lotus Esprit", "Lamborghini Diablo",
|
||||
"Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
|
||||
"Nissan Qashqai",
|
||||
"Oldsmobile S98", "Opel Superboss",
|
||||
"Porsche 356", "Pontiac Sunbird",
|
||||
"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
|
||||
"Triumph Spitfire", "Toyota 2000GT",
|
||||
"Volvo P1800", "Volkswagen Shirako"
|
||||
];
|
||||
$(function () {
|
||||
var autocompleteInstance = new ej.Autocomplete($("#selectCar"), {
|
||||
width: "100%",
|
||||
watermarkText: "Select a car",
|
||||
dataSource: carList,
|
||||
enableAutoFill: true,
|
||||
showPopupButton: true,
|
||||
multiSelectMode: "delimiter"
|
||||
});
|
||||
});
|
||||
})(AutocompleteComponent || (AutocompleteComponent = {}));
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module AutocompleteComponent{
|
||||
var carList = [
|
||||
"Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
|
||||
"BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
|
||||
"Chevrolet Camaro", "Cadillac",
|
||||
"Duesenberg J", "Dodge Sprinter",
|
||||
"Elantra", "Excavator",
|
||||
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
|
||||
"GAZ Siber",
|
||||
"Honda S2000", "Hyundai Santro",
|
||||
"Isuzu Swift", "Infiniti Skyline",
|
||||
"Jaguar XJS",
|
||||
"Kia Sedona EX", "Koenigsegg Agera",
|
||||
"Lotus Esprit", "Lamborghini Diablo",
|
||||
"Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
|
||||
"Nissan Qashqai",
|
||||
"Oldsmobile S98", "Opel Superboss",
|
||||
"Porsche 356", "Pontiac Sunbird",
|
||||
"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
|
||||
"Triumph Spitfire", "Toyota 2000GT",
|
||||
"Volvo P1800", "Volkswagen Shirako"
|
||||
];
|
||||
$(function () {
|
||||
var autocompleteInstance =new ej.Autocomplete($("#selectCar"), {
|
||||
width: "100%",
|
||||
watermarkText: "Select a car",
|
||||
dataSource: carList,
|
||||
enableAutoFill: true,
|
||||
showPopupButton: true,
|
||||
multiSelectMode: "delimiter"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="cols-sample-area">
|
||||
<div id="Barcode" align="center" style="margin-top:100px"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="barcode/barcode.js"></script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
var Barcodecomponent;
|
||||
(function (Barcodecomponent) {
|
||||
$(function () {
|
||||
var barcodesample = new ej.datavisualization.Barcode($("#Barcode"), {
|
||||
text: "http://www.syncfusion.com"
|
||||
});
|
||||
});
|
||||
})(Barcodecomponent || (Barcodecomponent = {}));
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module Barcodecomponent {
|
||||
$(function () {
|
||||
var barcodesample = new ej.datavisualization.Barcode($("#Barcode"), {
|
||||
text:"http://www.syncfusion.com"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="cols-sample-area">
|
||||
<div id="BulletGraph" align="center" style="margin-top:100px"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="bulletGraph/bulletgraph.js"></script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
var Bulletgraphcomponent;
|
||||
(function (Bulletgraphcomponent) {
|
||||
$(function () {
|
||||
var bulletsample = new ej.datavisualization.BulletGraph($("#BulletGraph"), {
|
||||
isResponsive: true,
|
||||
load: function () {
|
||||
var sender = $("#BulletGraph").data("ejBulletGraph");
|
||||
var bulletTheme = window.themeStyle + window.themeColor + window.themeVarient;
|
||||
if (bulletTheme) {
|
||||
switch (bulletTheme) {
|
||||
case "flatdark":
|
||||
case "flatazuredark":
|
||||
case "flatlimedark":
|
||||
case "flatsaffrondark":
|
||||
case "gradientdark":
|
||||
case "gradientazuredark":
|
||||
case "gradientlimedark":
|
||||
case "gradientsaffrondark":
|
||||
case "flathigh-contrast-01dark":
|
||||
case "flathigh-contrast-02dark":
|
||||
bulletTheme = "flatdark";
|
||||
break;
|
||||
case "flatoffice-365light":
|
||||
case "flatmateriallight":
|
||||
bulletTheme = "material";
|
||||
break;
|
||||
default:
|
||||
bulletTheme = "flatlight";
|
||||
break;
|
||||
}
|
||||
sender.model.theme = bulletTheme;
|
||||
}
|
||||
},
|
||||
tooltipSettings: { visible: true },
|
||||
quantitativeScaleSettings: {
|
||||
featureMeasures: [{
|
||||
value: 8, comparativeMeasureValue: 6.7
|
||||
}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3, rangeStroke: "#ebebeb"
|
||||
},
|
||||
{
|
||||
rangeEnd: 7.3, rangeStroke: "#d8d8d8"
|
||||
},
|
||||
{
|
||||
rangeEnd: 10, rangeStroke: "#7f7f7f"
|
||||
}
|
||||
],
|
||||
captionSettings: {
|
||||
textPosition: 'right', text: 'Revenue YTD',
|
||||
subTitle: {
|
||||
text: "$ in Thousands", textPosition: "right"
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})(Bulletgraphcomponent || (Bulletgraphcomponent = {}));
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module Bulletgraphcomponent {
|
||||
$(function () {
|
||||
var bulletsample = new ej.datavisualization.BulletGraph($("#BulletGraph"), {
|
||||
isResponsive: true,
|
||||
load: function () {
|
||||
var sender = $("#BulletGraph").data("ejBulletGraph");
|
||||
var bulletTheme = (<any>window).themeStyle + (<any>window).themeColor + (<any>window).themeVarient;
|
||||
if (bulletTheme) {
|
||||
switch (bulletTheme) {
|
||||
case "flatdark":
|
||||
case "flatazuredark":
|
||||
case "flatlimedark":
|
||||
case "flatsaffrondark":
|
||||
case "gradientdark":
|
||||
case "gradientazuredark":
|
||||
case "gradientlimedark":
|
||||
case "gradientsaffrondark":
|
||||
case "flathigh-contrast-01dark":
|
||||
case "flathigh-contrast-02dark":
|
||||
bulletTheme = "flatdark";
|
||||
break;
|
||||
case "flatoffice-365light":
|
||||
case "flatmateriallight":
|
||||
bulletTheme = "material";
|
||||
break;
|
||||
default:
|
||||
bulletTheme = "flatlight";
|
||||
break;
|
||||
}
|
||||
sender.model.theme = bulletTheme;
|
||||
}
|
||||
|
||||
},
|
||||
tooltipSettings: { visible: true },
|
||||
quantitativeScaleSettings: {
|
||||
featureMeasures: [{
|
||||
value: 8, comparativeMeasureValue:6.7
|
||||
}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3, rangeStroke:"#ebebeb",
|
||||
},
|
||||
{
|
||||
rangeEnd: 7.3, rangeStroke:"#d8d8d8"
|
||||
},
|
||||
{
|
||||
rangeEnd: 10, rangeStroke: "#7f7f7f"
|
||||
}
|
||||
],
|
||||
captionSettings: {
|
||||
textPosition: 'right', text: 'Revenue YTD',
|
||||
subTitle: {
|
||||
text: "$ in Thousands", textPosition:"right"
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Button
|
||||
</td>
|
||||
<td class="btnsht" colspan="2">
|
||||
<button id="buttonnormal"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Toggle Button
|
||||
</td>
|
||||
<td class="btnsht" colspan="2">
|
||||
<input type="checkbox" id="TextOnly">
|
||||
<label for="TextOnly">
|
||||
Toggle
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Split Button
|
||||
</td>
|
||||
<td class="splttd btnsht" colspan="2">
|
||||
<button id="splitbuttonnormal"></button>
|
||||
<ul id="menu1">
|
||||
<li><span>Open</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Group Button
|
||||
</td>
|
||||
<td class="btnsht" colspan="2">
|
||||
<div id="groupButton">
|
||||
<ul>
|
||||
<li>
|
||||
Save
|
||||
</li>
|
||||
<li>
|
||||
Open
|
||||
</li>
|
||||
<li>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Checkbox
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="check1">
|
||||
<label for="check1" class="clslab">File1</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="check2">
|
||||
<label for="check2" class="clslab">File2</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Radio Button
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="radio" name="small" id="radio1"><label for="radio1" class="clslab">Open</label>
|
||||
</td>
|
||||
<td class="chkrad" colspan="2">
|
||||
<input type="radio" name="small" id="radio2"><label for="radio2" class="clslab">Close</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="button/button.js"></script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
var ButtonComponent;
|
||||
(function (ButtonComponent) {
|
||||
$(function () {
|
||||
var basicButton = new ej.Button($("#buttonnormal"), {
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
contentType: "textandimage",
|
||||
prefixIcon: "e-icon e-save",
|
||||
text: "Save"
|
||||
});
|
||||
var toggleButton = new ej.ToggleButton($("#TextOnly"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
contentType: "textandimage",
|
||||
defaultPrefixIcon: "e-icon e-save",
|
||||
activePrefixIcon: "e-icon e-delete",
|
||||
defaultText: "Save",
|
||||
activeText: "Delete"
|
||||
});
|
||||
var splitbuttonnormal = new ej.SplitButton($("#splitbuttonnormal"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
prefixIcon: "e-icon e-file-empty",
|
||||
targetID: "menu1",
|
||||
contentType: "textandimage",
|
||||
text: "File"
|
||||
});
|
||||
var groupButton = new ej.GroupButton($("#groupButton"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large"
|
||||
});
|
||||
var check1 = new ej.CheckBox($("#check1"), {
|
||||
size: "medium", enableTriState: true
|
||||
});
|
||||
var check2 = new ej.CheckBox($("#check2"), {
|
||||
size: "medium", enableTriState: true
|
||||
});
|
||||
var radio1 = new ej.RadioButton($("#radio1"), {
|
||||
size: "medium"
|
||||
});
|
||||
var radio2 = new ej.RadioButton($("#radio2"), {
|
||||
size: "medium", checked: true
|
||||
});
|
||||
});
|
||||
})(ButtonComponent || (ButtonComponent = {}));
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module ButtonComponent {
|
||||
$(function () {
|
||||
var basicButton = new ej.Button($("#buttonnormal"), {
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
contentType: "textandimage",
|
||||
prefixIcon: "e-icon e-save",
|
||||
text: "Save"
|
||||
});
|
||||
var toggleButton = new ej.ToggleButton($("#TextOnly"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
contentType: "textandimage",
|
||||
defaultPrefixIcon: "e-icon e-save",
|
||||
activePrefixIcon: "e-icon e-delete",
|
||||
defaultText: "Save",
|
||||
activeText: "Delete"
|
||||
});
|
||||
var splitbuttonnormal = new ej.SplitButton($("#splitbuttonnormal"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
prefixIcon: "e-icon e-file-empty",
|
||||
targetID: "menu1",
|
||||
contentType: "textandimage",
|
||||
text: "File"
|
||||
});
|
||||
var groupButton = new ej.GroupButton($("#groupButton"), {
|
||||
showRoundedCorner: true,
|
||||
size: "large"
|
||||
});
|
||||
var check1 = new ej.CheckBox($("#check1"), {
|
||||
size: "medium", enableTriState: true
|
||||
});
|
||||
var check2 = new ej.CheckBox($("#check2"), {
|
||||
size: "medium", enableTriState: true
|
||||
});
|
||||
var radio1 = new ej.RadioButton($("#radio1"), {
|
||||
size: "medium"
|
||||
});
|
||||
var radio2 = new ej.RadioButton($("#radio2"), {
|
||||
size: "medium", checked: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<div class="cols-sample-area">
|
||||
<div id="Chart"></div>
|
||||
<div id="Tooltip" style="display: none;" class="tooltipDiv">
|
||||
<div id="icon">
|
||||
<div id="eficon">
|
||||
<img src="content/images/chart/eficon.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="value">
|
||||
<div>
|
||||
<label id="efpercentage">
|
||||
#point.y#
|
||||
</label>
|
||||
<label id="ef">
|
||||
Efficiency
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="chart/chart.js"></script>
|
||||
<style class="cssStyles">
|
||||
#efpercentage, #ef {
|
||||
margin-bottom: -25px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.tooltipDiv {
|
||||
background-color: #E94649;
|
||||
color: white;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#Tooltip > div:first-child {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#Tooltip #value {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
#Tooltip #value > div {
|
||||
margin: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
#Tooltip #efpercentage {
|
||||
font-size: 20px;
|
||||
font-family: segoe ui;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
#Tooltip #ef {
|
||||
font-size: 12px;
|
||||
font-family: segoe ui;
|
||||
}
|
||||
|
||||
#eficon {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
var ChartComponent;
|
||||
(function (ChartComponent) {
|
||||
$(function () {
|
||||
var chartsample = new ej.datavisualization.Chart($("#Chart"), {
|
||||
primaryXAxis: {
|
||||
range: { min: 2005, max: 2011, interval: 1 },
|
||||
title: { text: "Year" },
|
||||
valueType: "category"
|
||||
},
|
||||
primaryYAxis: {
|
||||
range: { min: 25, max: 50, interval: 5 },
|
||||
labelFormat: "{value}%",
|
||||
title: { text: "Efficiency" }
|
||||
},
|
||||
commonSeriesOptions: {
|
||||
type: 'line', enableAnimation: true,
|
||||
tooltip: { visible: true, template: 'Tooltip' },
|
||||
marker: {
|
||||
shape: 'circle',
|
||||
size: {
|
||||
height: 10, width: 10
|
||||
},
|
||||
visible: true
|
||||
},
|
||||
border: { width: 2 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
|
||||
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }],
|
||||
name: 'India'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 31 }, { x: 2006, y: 28 }, { x: 2007, y: 30 }, { x: 2008, y: 36 },
|
||||
{ x: 2009, y: 36 }, { x: 2010, y: 39 }, { x: 2011, y: 37 }],
|
||||
name: 'Germany'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 36 }, { x: 2006, y: 32 }, { x: 2007, y: 34 }, { x: 2008, y: 41 },
|
||||
{ x: 2009, y: 42 }, { x: 2010, y: 42 }, { x: 2011, y: 43 }],
|
||||
name: 'England'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 39 }, { x: 2006, y: 36 }, { x: 2007, y: 40 }, { x: 2008, y: 44 },
|
||||
{ x: 2009, y: 45 }, { x: 2010, y: 48 }, { x: 2011, y: 46 }],
|
||||
name: 'France'
|
||||
}
|
||||
],
|
||||
isResponsive: true,
|
||||
load: function () {
|
||||
var sender = $("#Chart").data("ejChart");
|
||||
if (!!window.orientation && sender) {
|
||||
var model = sender.model, seriesLength = model.series.length;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i = 0; i < seriesLength; i++) {
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
}
|
||||
var theme = window.themeStyle + window.themeColor + window.themeVarient;
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case "flatdark":
|
||||
case "flatazuredark":
|
||||
case "flatlimedark":
|
||||
case "flatsaffrondark":
|
||||
theme = "flatdark";
|
||||
break;
|
||||
case "gradientlight":
|
||||
case "gradientazurelight":
|
||||
case "gradientlimelight":
|
||||
case "gradientsaffronlight":
|
||||
theme = "gradientlight";
|
||||
break;
|
||||
case "gradientdark":
|
||||
case "gradientazuredark":
|
||||
case "gradientlimedark":
|
||||
case "gradientsaffrondark":
|
||||
theme = "gradientdark";
|
||||
break;
|
||||
case "flatbootstraplight":
|
||||
theme = "bootstrap";
|
||||
break;
|
||||
case "flathigh-contrast-01dark":
|
||||
case "flathigh-contrast-02dark":
|
||||
theme = "high-contrast-01";
|
||||
break;
|
||||
case "flatmateriallight":
|
||||
case "flatoffice-365light":
|
||||
theme = "material";
|
||||
break;
|
||||
default:
|
||||
theme = "flatlight";
|
||||
break;
|
||||
}
|
||||
sender.model.theme = theme;
|
||||
}
|
||||
},
|
||||
title: { text: 'Efficiency of oil-fired power production' },
|
||||
size: { height: "600" },
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
})(ChartComponent || (ChartComponent = {}));
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module ChartComponent {
|
||||
$(function () {
|
||||
var chartsample = new ej.datavisualization.Chart($("#Chart"), {
|
||||
primaryXAxis: {
|
||||
range: { min: 2005, max: 2011, interval: 1 },
|
||||
title: { text: "Year" },
|
||||
valueType: "category"
|
||||
},
|
||||
primaryYAxis: {
|
||||
range: { min: 25, max: 50, interval: 5 },
|
||||
labelFormat: "{value}%",
|
||||
title: { text: "Efficiency" },
|
||||
},
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'line', enableAnimation: true,
|
||||
tooltip:{ visible :true, template:'Tooltip'},
|
||||
marker:
|
||||
{
|
||||
shape: 'circle',
|
||||
size:
|
||||
{
|
||||
height: 10, width: 10
|
||||
},
|
||||
visible: true
|
||||
},
|
||||
border : {width: 2}
|
||||
},
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
|
||||
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }],
|
||||
name: 'India'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 31 }, { x: 2006, y: 28 }, { x: 2007, y: 30 }, { x: 2008, y: 36 },
|
||||
{ x: 2009, y: 36 }, { x: 2010, y: 39 }, { x: 2011, y: 37 }],
|
||||
name: 'Germany'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 36 }, { x: 2006, y: 32 }, { x: 2007, y: 34 }, { x: 2008, y: 41 },
|
||||
{ x: 2009, y: 42 }, { x: 2010, y: 42 }, { x: 2011, y: 43 }],
|
||||
name: 'England'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2005, y: 39 }, { x: 2006, y: 36 }, { x: 2007, y: 40 }, { x: 2008, y: 44 },
|
||||
{ x: 2009, y: 45 }, { x: 2010, y: 48 }, { x: 2011, y: 46 }],
|
||||
name: 'France'
|
||||
}
|
||||
],
|
||||
isResponsive: true,
|
||||
load: function () {
|
||||
var sender = $("#Chart").data("ejChart");
|
||||
if (!!window.orientation && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i = 0; i < seriesLength; i++) {
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
}
|
||||
var theme = (<any>window).themeStyle + (<any>window).themeColor + (<any>window).themeVarient;
|
||||
if (theme) {
|
||||
switch (theme) {
|
||||
case "flatdark":
|
||||
case "flatazuredark":
|
||||
case "flatlimedark":
|
||||
case "flatsaffrondark":
|
||||
theme = "flatdark";
|
||||
break;
|
||||
case "gradientlight":
|
||||
case "gradientazurelight":
|
||||
case "gradientlimelight":
|
||||
case "gradientsaffronlight":
|
||||
theme = "gradientlight";
|
||||
break;
|
||||
case "gradientdark":
|
||||
case "gradientazuredark":
|
||||
case "gradientlimedark":
|
||||
case "gradientsaffrondark":
|
||||
theme = "gradientdark";
|
||||
break;
|
||||
case "flatbootstraplight":
|
||||
theme = "bootstrap";
|
||||
break;
|
||||
case "flathigh-contrast-01dark":
|
||||
case "flathigh-contrast-02dark":
|
||||
theme = "high-contrast-01";
|
||||
break;
|
||||
case "flatmateriallight":
|
||||
case "flatoffice-365light":
|
||||
theme = "material";
|
||||
break;
|
||||
|
||||
default:
|
||||
theme = "flatlight";
|
||||
break;
|
||||
}
|
||||
sender.model.theme = theme;
|
||||
}
|
||||
},
|
||||
title: { text: 'Efficiency of oil-fired power production' },
|
||||
size: { height: "600" },
|
||||
legend: { visible: true},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="cols-sample-area">
|
||||
<div id="CircularGauge" align="center"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="circulargauge/circulargauge.js"></script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
var circulargaugecomponent;
|
||||
(function (circulargaugecomponent) {
|
||||
$(function () {
|
||||
var circularsample = new ej.datavisualization.CircularGauge($("#CircularGauge"), {
|
||||
enableAnimation: false,
|
||||
isResponsive: true,
|
||||
backgroundColor: "transparent", width: 500,
|
||||
scales: [{
|
||||
showRanges: true,
|
||||
startAngle: 122, sweepAngle: 296, radius: 130, showScaleBar: true, size: 1, maximum: 120, majorIntervalValue: 20, minorIntervalValue: 10,
|
||||
border: {
|
||||
width: 0.5
|
||||
},
|
||||
pointers: [{
|
||||
value: 60,
|
||||
showBackNeedle: true,
|
||||
backNeedleLength: 20,
|
||||
length: 95,
|
||||
width: 7
|
||||
}],
|
||||
ticks: [{
|
||||
type: "major",
|
||||
distanceFromScale: 2,
|
||||
height: 16,
|
||||
width: 1, color: "#8c8c8c"
|
||||
}, { type: "minor", height: 8, width: 1, distanceFromScale: 2, color: "#8c8c8c" }],
|
||||
labels: [{
|
||||
color: "#8c8c8c"
|
||||
}],
|
||||
ranges: [{
|
||||
distanceFromScale: -30,
|
||||
startValue: 0,
|
||||
endValue: 70
|
||||
}, {
|
||||
distanceFromScale: -30,
|
||||
startValue: 70,
|
||||
endValue: 110,
|
||||
backgroundColor: "#fc0606",
|
||||
border: { color: "#fc0606" }
|
||||
},
|
||||
{
|
||||
distanceFromScale: -30,
|
||||
startValue: 110,
|
||||
endValue: 120,
|
||||
backgroundColor: "#f5b43f",
|
||||
border: { color: "#f5b43f" }
|
||||
}]
|
||||
}]
|
||||
});
|
||||
});
|
||||
})(circulargaugecomponent || (circulargaugecomponent = {}));
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module circulargaugecomponent {
|
||||
$(function () {
|
||||
var circularsample = new ej.datavisualization.CircularGauge($("#CircularGauge"), {
|
||||
enableAnimation: false,
|
||||
isResponsive: true,
|
||||
backgroundColor: "transparent", width: 500,
|
||||
scales: [{
|
||||
showRanges: true,
|
||||
startAngle: 122, sweepAngle: 296, radius: 130, showScaleBar: true, size: 1, maximum: 120, majorIntervalValue: 20, minorIntervalValue: 10,
|
||||
border: {
|
||||
width: 0.5,
|
||||
},
|
||||
pointers: [{
|
||||
value: 60,
|
||||
showBackNeedle: true,
|
||||
backNeedleLength: 20,
|
||||
length: 95,
|
||||
width: 7
|
||||
}],
|
||||
ticks: [{
|
||||
type: "major",
|
||||
distanceFromScale: 2,
|
||||
height: 16,
|
||||
width: 1, color: "#8c8c8c"
|
||||
}, { type: "minor", height: 8, width: 1, distanceFromScale: 2, color: "#8c8c8c" }],
|
||||
labels: [{
|
||||
color: "#8c8c8c"
|
||||
}],
|
||||
ranges: [{
|
||||
distanceFromScale: -30,
|
||||
startValue: 0,
|
||||
endValue: 70
|
||||
}, {
|
||||
distanceFromScale: -30,
|
||||
startValue: 70,
|
||||
endValue: 110,
|
||||
backgroundColor: "#fc0606",
|
||||
border: { color: "#fc0606" }
|
||||
},
|
||||
{
|
||||
distanceFromScale: -30,
|
||||
startValue: 110,
|
||||
endValue: 120,
|
||||
backgroundColor: "#f5b43f",
|
||||
border: { color: "#f5b43f" }
|
||||
}]
|
||||
}]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<label>Choose Color</label>
|
||||
<input type="text" id="colorpick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="colorpicker/colorpicker.js"></script>
|
||||
<style>
|
||||
.control{
|
||||
padding: 0 35%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
var ColorPickerComponent;
|
||||
(function (ColorPickerComponent) {
|
||||
$(function () {
|
||||
var colorSample = new ej.ColorPicker($("#colorpick"), {
|
||||
value: "#278787"
|
||||
});
|
||||
});
|
||||
})(ColorPickerComponent || (ColorPickerComponent = {}));
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module ColorPickerComponent {
|
||||
$(function () {
|
||||
var colorSample = new ej.ColorPicker($("#colorpick"), {
|
||||
value: "#278787"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="combobox/combobox.js"></script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
var ComboBoxComponent;
|
||||
(function (ComboBoxComponent) {
|
||||
var BikeList = [
|
||||
{ empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" },
|
||||
{ empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" },
|
||||
{ empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" },
|
||||
{ empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" }
|
||||
];
|
||||
$(function () {
|
||||
var comboboxInstance = new ej.ComboBox($("#selectCar"), {
|
||||
width: "100%",
|
||||
placeholder: "Select a Bike",
|
||||
fields: { text: "text", value: "empid" },
|
||||
dataSource: BikeList,
|
||||
autofill: true
|
||||
});
|
||||
});
|
||||
})(ComboBoxComponent || (ComboBoxComponent = {}));
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/// <reference path="../tsfiles/jquery.d.ts" />
|
||||
/// <reference path="../tsfiles/ej.web.all.d.ts" />
|
||||
|
||||
module ComboBoxComponent{
|
||||
var BikeList = [
|
||||
{ empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" },
|
||||
{ empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" },
|
||||
{ empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" },
|
||||
{ empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" }
|
||||
];
|
||||
$(function () {
|
||||
var comboboxInstance =new ej.ComboBox($("#selectCar"), {
|
||||
width: "100%",
|
||||
placeholder: "Select a Bike",
|
||||
fields: { text: "text", value: "empid" },
|
||||
dataSource: BikeList,
|
||||
autofill: true
|
||||
});
|
||||
});
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 49 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 50 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 52 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 44 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 48 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 45 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 65 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 61 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 57 KiB |
|
|
@ -0,0 +1,170 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Font Icon</title>
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<style> #wrapper {width: 500px; margin: 0 auto; } p {margin: 0px; } .ultile { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 100%; list-style-position: outside; } .litile { float: left; height: 150px; width: 150px; padding: 15px 8px 0 8px; display: list-item; text-align: -webkit-match-parent;} .innerTile {background-color: white; width: 100%; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; border-color: gray;border-radius: 10px; } .iconouterdiv{height:43%;width:100%;position:relative;margin:0 auto;} .iconinnerdiv{height:100%;width:100%;display:block;text-align:center;vertical-align: middle;} .txtouterdiv{height:22%;width:100%;} .txtinnerdiv{text-align:left;margin-left:10px;margin-top:5px} .nametxt{color:#4791F9;display:block;font-size:12px;font-family: Segoe UI;} .valuetxt{display:block;font-size:15px;font-family: Segoe UI;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;} .icon{display: inline-block;vertical-align: middle;line-height: normal;margin-top:10%;} </style>
|
||||
</head>
|
||||
<body style="background-color:#F4F4F4">
|
||||
<div style ="width:100%;text-align:center;height:100%;display:block;top:30px;position:absolute">
|
||||
<div id="headingDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
|
||||
<div style="text-align:left;margin-left:10px;">
|
||||
<p style="color:darkblue;">Font Name : Outlook Icon</p></div></div>
|
||||
<div id="tileDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
|
||||
<ul class="ultile">
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-message-mail-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">message-mail-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e700</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-add icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">add</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e701</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-trash-can1-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">trash-can1-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e702</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-archive02-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">archive02-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e703</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-search icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">search</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e704</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-settings-01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">settings-01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e705</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-bell-new icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">bell-new</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e706</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-view-small-icons-01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">view-small-icons-01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e707</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-up-arrow---01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">up-arrow---01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e708</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-expander-down---01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">expander-down---01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e709</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-attachment-02-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">attachment-02-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e70a</span></div></div>
|
||||
</div> </li>
|
||||
</ul> </div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@font-face {
|
||||
font-family: 'Outlook Icon';
|
||||
src:
|
||||
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="ej-icon-"], [class*=" ej-icon-"] {
|
||||
font-family: 'Outlook Icon' !important;
|
||||
speak: none;
|
||||
font-size: 55px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.ej-icon-message-mail-wf:before { content: "\e700"; }
|
||||
.ej-icon-add:before { content: "\e701"; }
|
||||
.ej-icon-trash-can1-wf:before { content: "\e702"; }
|
||||
.ej-icon-archive02-wf:before { content: "\e703"; }
|
||||
.ej-icon-search:before { content: "\e704"; }
|
||||
.ej-icon-settings-01:before { content: "\e705"; }
|
||||
.ej-icon-bell-new:before { content: "\e706"; }
|
||||
.ej-icon-view-small-icons-01:before { content: "\e707"; }
|
||||
.ej-icon-up-arrow---01:before { content: "\e708"; }
|
||||
.ej-icon-expander-down---01:before { content: "\e709"; }
|
||||
.ej-icon-attachment-02-wf:before { content: "\e70a"; }
|
||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Syncfusion Metro Studio</metadata>
|
||||
<defs>
|
||||
<font id="Outlook Icon" horiz-adv-x="1024" >
|
||||
<font-face units-per-em="1024" ascent="819" descent="-205" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
|
||||
<glyph unicode="" glyph-name="message-mail-wf" d="M502.4,375L940,700.3 940,190 65,190 65,701.6 502.4,375z M940,815L940,778.2 502.5,453 65,779.6 65,815 940,815z M2.5,815L2.5,190C2.5,155.5,30.5,127.5,65,127.5L940,127.5C974.5,127.5,1002.5,155.5,1002.5,190L1002.5,815C1002.5,849.5,974.5,877.5,940,877.5L65,877.5C30.5,877.5,2.5,849.5,2.5,815z" />
|
||||
|
||||
<glyph unicode="" glyph-name="add" d="M380.6,621.3L2.5,621.3 2.5,380.6 383.7,380.6 383.7,2.5 624.3,2.5 624.3,383.8 1002.4,383.8 1002.4,624.4 621.2,624.4 621.2,1002.5 380.6,1002.5 380.6,621.3z" />
|
||||
|
||||
<glyph unicode="" glyph-name="trash-can1-wf" d="M627.5,158.8L690,158.8 690,752.6 627.5,752.6 627.5,158.8z M471.2,158.8L533.7,158.8 533.7,752.6 471.2,752.6 471.2,158.8z M315,158.8L377.5,158.8 377.5,752.6 315,752.6 315,158.8z M221.2,846.3L783.7,846.3 783.7,65 221.2,65 221.2,846.3 221.2,846.3z M564.8,921.3L564.8,908.8 439.8,908.8 439.8,921.3C439.8,932.6,444.8,939.3,446.1,940.1L557.8,940.2C559.8,939.3,564.8,932.5,564.8,921.3z M377.4,921.3L377.4,908.8 158.7,908.8 127.5,908.8 127.5,846.3 158.7,846.3 158.7,65C158.7,30.5,186.7,2.5,221.2,2.5L783.8,2.5C818.3,2.5,846.3,30.5,846.3,65L846.3,846.3 877.6,846.3 877.6,908.8 846.3,908.8 627.5,908.8 627.5,921.3C627.5,966.9,597.2,1002.6,558.7,1002.6L446.2,1002.6C407.7,1002.5,377.4,966.8,377.4,921.3z" />
|
||||
|
||||
<glyph unicode="" glyph-name="archive02-wf" d="M628.8,628.8L628.8,564.1 376.3,564.1 376.3,628.8 628.8,628.8z M315.6,503.5L689.4,503.5 689.4,689.4 315.6,689.4 315.6,503.5z M879.2,754L879.2,63.1 125.7,63.1 125.7,754 879.2,754z M941.9,941.9L941.9,814.6 939.9,814.6 65.1999999999999,814.6 63.1999999999999,814.6 63.1999999999999,941.9 941.9,941.9z M2.5,754L65.1,754 65.1,2.5 939.8,2.5 939.8,754 1002.4,754 1002.4,1002.5 2.5,1002.5 2.5,754z" />
|
||||
|
||||
<glyph unicode="" glyph-name="search" d="M428.5,858.6C559.4,849.3 652.9,743.3 640.5,627.9 628,509.5 512.6,425.3 381.7,437.8 250.8,447.1 157.3,553.1 169.7,668.5 182.2,777.6 285,858.7 403.5,858.7L428.5,858.7z M4.5,680.9C-17.3,484.5 141.7,309.9 359.9,291.2 434.7,284.9 503.3,297.4 565.7,322.4L833.7,32.5C868,-1.7 927.3,-8 967.8,23.2 1008.3,51.2 1014.5,107.4 980.3,141.6L715.3,425.3C759,478.3 787,540.6 796.4,609.2 818.2,805.6 659.2,980.2 441,998.9 428.5,1002 412.9,1002 400.5,1002 200.9,1002 26.3,864.9 4.5,680.9z" />
|
||||
|
||||
<glyph unicode="" glyph-name="settings-01" d="M746.2,505.6C746.2,368.1 633.7,255.6 496.2,255.6 358.7,255.6 246.2,368.1 246.2,505.6 246.2,643.1 358.7,755.6 496.2,755.6 636.9,755.6 746.2,646.2 746.2,505.6z M252.5,946.2L268.1,796.2C252.5,783.7,236.8,768.1,221.2,752.5L65,777.5 2.5,636.9 127.5,540 127.5,486.9 127.5,477.5 2.5,386.9 58.7,243.1 218.1,265 224.4,255.6C230.6,249.4,236.9,240,246.3,233.7L249.4,230.6 221.3,68.1 361.9,5.6 465,136.9 477.5,136.9 518.1,136.9 524.4,136.9 618.1,2.5 765,61.9 743.1,230.6 749.4,236.9 771.3,258.8 774.4,261.9 933.8,233.8 996.3,374.4 868.2,471.3 868.2,515 1002.6,611.9 946.4,755.6 787,733.7 783.9,739.9C771.4,752.4,758.9,764.9,749.5,777.4L746.4,780.5 771.4,933.6 630.8,996.1 537,874.2 530.7,874.2 486.9,874.2 396.3,1002.3 252.5,946.2z" />
|
||||
|
||||
<glyph unicode="" glyph-name="bell-new" d="M552.2,909.3L552.2,900 552.2,896.9 542.9,896.9C527.4,900 511.8,900 493.2,900 480.8,900 468.4,896.9 455.9,896.9L446.6,896.9 446.6,900 446.6,909.3C446.6,943.5 471.4,971.4 502.5,971.4 533.6,971.4 558.4,943.5 552.2,909.3z M421.8,909.3L421.8,896.9 421.8,893.8 412.5,890.7C316.2,862.8 254.1,788.2 254.1,701.3 254.1,685.8 257.2,667.1 263.4,648.5 272.7,567.7 278.9,415.6 204.4,350.3 101.9,260.2 129.9,188.8 142.3,167.1L456,167.1 484,167.1 484,92.6 480.9,92.6C465.4,83.3 453,67.8 453,49.1 453,24.3 474.7,2.49999999999999 499.6,2.49999999999999 524.4,2.49999999999999 546.2,24.3 546.2,49.1 546.2,70.8 533.8,86.4 518.3,92.6L515.2,92.6 515.2,167.1 543.1,167.1 863,167.1C875.4,188.9 903.4,257.2 800.9,350.3 735.7,412.4 735.7,539.8 741.9,623.6 754.3,645.3 760.5,670.2 760.5,698.1 760.5,788.2 686,859.6 586.6,887.5L580.4,890.6 586.6,890.6 586.6,909.3C586.6,962.1 549.4,1002.5 502.8,1002.5 459,1002.5 421.8,962.1 421.8,909.3z" />
|
||||
|
||||
<glyph unicode="" glyph-name="view-small-icons-01" d="M731.7,2.5L998.4,2.5 998.4,269.2 731.7,269.2 731.7,2.5z M369.1,2.5L635.8,2.5 635.8,269.2 369.1,269.2 369.1,2.5z M6.6,2.5L273.3,2.5 273.3,269.2 6.6,269.2 6.6,2.5z M731.7,369.2L998.4,369.2 998.4,635.9 731.7,635.9 731.7,369.2z M369.1,369.2L635.8,369.2 635.8,635.9 369.1,635.9 369.1,369.2z M6.6,369.2L273.3,369.2 273.3,635.9 6.6,635.9 6.6,369.2z M731.7,735.8L998.4,735.8 998.4,1002.5 731.7,1002.5 731.7,735.8z M369.1,735.8L635.8,735.8 635.8,1002.5 369.1,1002.5 369.1,735.8z M6.6,735.8L273.3,735.8 273.3,1002.5 6.6,1002.5 6.6,735.8z" />
|
||||
|
||||
<glyph unicode="" glyph-name="up-arrow---01" d="M509.5,806.3L2.5,458.1 2.5,194.1 513.7,545 1002.6,194 1002.6,458.1 517.8,806.3 516.7,811.1 513.7,809.1 510.6,811.1 509.5,806.3z" />
|
||||
|
||||
<glyph unicode="" glyph-name="expander-down---01" d="M2.5,808.7L2.5,554.5 506.1,194 1002.5,548.5 1002.5,807.3 506,452.7 5.2,811 2.5,808.7z" />
|
||||
|
||||
<glyph unicode="" glyph-name="attachment-02-wf" d="M283.8,754.8L283.8,471.3 283.8,346.3 283.8,157C283.8,71.8 353.9,2.5 440,2.5 526.1,2.5 596.2,71.7 596.2,157L596.2,315 596.2,471.3 596.2,725.2C596.2,774.7 554.2,815 502.5,815 450.8,815 408.7,774.7 408.7,725.2L408.7,283.8C408.7,266.5 422.7,252.5 440,252.5 457.3,252.5 471.3,266.5 471.3,283.8L471.3,725.2C471.3,740.3 485.4,752.5 502.6,752.5 519.8,752.5 533.8,740.3 533.8,725.2L533.8,471.3 533.8,315 533.8,157C533.8,106.3 491.8,65 440.1,65 388.4,65 346.3,106.3 346.3,157L346.3,346.3 346.3,471.3 346.3,754.9C346.3,857 416.4,940 502.5,940 588.6,940 658.7,857 658.7,754.8L658.7,366.8C658.7,349.5 672.7,335.5 690,335.5 707.3,335.5 721.3,349.5 721.3,366.8L721.3,754.9C721.3,891.5 623.1,1002.6 502.5,1002.6 381.9,1002.6 283.8,891.5 283.8,754.8z" />
|
||||
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 6.0 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -0,0 +1,170 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Font Icon</title>
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<style> #wrapper {width: 500px; margin: 0 auto; } p {margin: 0px; } .ultile { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 100%; list-style-position: outside; } .litile { float: left; height: 150px; width: 150px; padding: 15px 8px 0 8px; display: list-item; text-align: -webkit-match-parent;} .innerTile {background-color: white; width: 100%; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px; border-color: gray;border-radius: 10px; } .iconouterdiv{height:43%;width:100%;position:relative;margin:0 auto;} .iconinnerdiv{height:100%;width:100%;display:block;text-align:center;vertical-align: middle;} .txtouterdiv{height:22%;width:100%;} .txtinnerdiv{text-align:left;margin-left:10px;margin-top:5px} .nametxt{color:#4791F9;display:block;font-size:12px;font-family: Segoe UI;} .valuetxt{display:block;font-size:15px;font-family: Segoe UI;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;} .icon{display: inline-block;vertical-align: middle;line-height: normal;margin-top:10%;} </style>
|
||||
</head>
|
||||
<body style="background-color:#F4F4F4">
|
||||
<div style ="width:100%;text-align:center;height:100%;display:block;top:30px;position:absolute">
|
||||
<div id="headingDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
|
||||
<div style="text-align:left;margin-left:10px;">
|
||||
<p style="color:darkblue;">Font Name : Outlook Icon</p></div></div>
|
||||
<div id="tileDiv" style="width:80%;text-align:center;position:relative;margin:0 auto;">
|
||||
<ul class="ultile">
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-message-mail-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">message-mail-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e700</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-add icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">add</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e701</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-trash-can1-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">trash-can1-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e702</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-archive02-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">archive02-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e703</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-search icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">search</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e704</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-settings-01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">settings-01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e705</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-bell-new icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">bell-new</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e706</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-view-small-icons-01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">view-small-icons-01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e707</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-up-arrow---01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">up-arrow---01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e708</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-expander-down---01 icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">expander-down---01</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e709</span></div></div>
|
||||
</div> </li>
|
||||
<li class="litile">
|
||||
<div class="innerTile">
|
||||
<div class="iconouterdiv">
|
||||
<div class="iconinnerdiv">
|
||||
<span class="ej-icon-attachment-02-wf icon"> </span> </div> </div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">Name</span>
|
||||
<span class="valuetxt">attachment-02-wf</span></div></div>
|
||||
<div class="txtouterdiv">
|
||||
<div class="txtinnerdiv">
|
||||
<span class="nametxt">PUA</span>
|
||||
<span class="valuetxt">e70a</span></div></div>
|
||||
</div> </li>
|
||||
</ul> </div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@font-face {
|
||||
font-family: 'Outlook Icon';
|
||||
src:
|
||||
url('Fonts/Outlook Icon.ttf') format('truetype'),
|
||||
url('Fonts/Outlook Icon.woff') format('woff'),
|
||||
url('Fonts/Outlook Icon.eot') format('eot'),
|
||||
url('Fonts/Outlook Icon.svg?#Outlook Icon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="ej-icon-"], [class*=" ej-icon-"] {
|
||||
font-family: 'Outlook Icon' !important;
|
||||
speak: none;
|
||||
font-size: 55px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.ej-icon-message-mail-wf:before { content: "\e700"; }
|
||||
.ej-icon-add:before { content: "\e701"; }
|
||||
.ej-icon-trash-can1-wf:before { content: "\e702"; }
|
||||
.ej-icon-archive02-wf:before { content: "\e703"; }
|
||||
.ej-icon-search:before { content: "\e704"; }
|
||||
.ej-icon-settings-01:before { content: "\e705"; }
|
||||
.ej-icon-bell-new:before { content: "\e706"; }
|
||||
.ej-icon-view-small-icons-01:before { content: "\e707"; }
|
||||
.ej-icon-up-arrow---01:before { content: "\e708"; }
|
||||
.ej-icon-expander-down---01:before { content: "\e709"; }
|
||||
.ej-icon-attachment-02-wf:before { content: "\e70a"; }
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 549 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 913 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 873 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 64 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 49 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 90 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 63 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 48 KiB |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче