syncfusion
/
react-ej1-demos
зеркало из https://github.com/syncfusion/react-ej1-demos.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

v20.4.0.38

This commit is contained in:
SyncfusionBuild 2022-12-22 08:50:47 +00:00
Родитель dcced772f8
Коммит 1872346cee
5260 изменённых файлов: 475484 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
README.md
Просмотреть файл

@ -91,4 +91,4 @@ Take a look at the Syncfusion Essential JS 1 for React JS live examples.
* 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>.
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-12-22 at precisely 08:41:36 EST.</p>
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-12-22 at precisely 08:50:38 EST.</p>

2
app/accordion/accordion.html Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<div id="accordion" class="react-page"></div>
<script src="app/accordion/accordion.js"></script>

16
app/accordion/accordion.js Normal file
Просмотреть файл

@ -0,0 +1,16 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Tab, {id: "scrollTab", dataType: "dataType", contentType: "contentType", async: "async", height: "100%", enableTabScroll: true},
React.createElement("ul", null,
React.createElement("li", null, React.createElement("a", {href: "app/accordion/default.html"}, "Default")),
React.createElement("li", null, React.createElement("a", {href: "app/accordion/multipleopen.html"}, "Multiple open")),
React.createElement("li", null, React.createElement("a", {href: "app/accordion/icons.html"}, "Icons")),
React.createElement("li", null, React.createElement("a", {href: "app/accordion/rtl.html"}, "RTL"))
)
),
document.getElementById('accordion')
);

16
app/accordion/accordion.jsx Normal file
Просмотреть файл

@ -0,0 +1,16 @@
"use strict";
ReactDOM.render(
<EJ.Tab id="scrollTab" dataType="dataType" contentType="contentType" async="async" height="100%" enableTabScroll={true}>
<ul>
<li><a href="app/accordion/default.html">Default</a></li>
<li><a href="app/accordion/multipleopen.html">Multiple open</a></li>
<li><a href="app/accordion/icons.html">Icons</a></li>
<li><a href="app/accordion/rtl.html">RTL</a></li>
</ul>
</EJ.Tab>,
document.getElementById('accordion')
);

5
app/accordion/default.html Normal file
Просмотреть файл

@ -0,0 +1,5 @@
<div id="accordion-default"></div>
<script src="app/accordion/default.js">
</script>

38
app/accordion/default.js Normal file
Просмотреть файл

@ -0,0 +1,38 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Accordion, null,
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "Twitter")
),
React.createElement("div", null,
"Twitter is an online social networking service that enables users to send and read short 140-character messages called \"tweets\"." + ' ' +
"Registered users can read and post tweets, but those who are unregistered can only read them.Users access Twitter" + ' ' +
"through the website interface , SMS or mobile device app Twitter Inc.is based in San Francisco and has more than" + ' ' +
"25 offices around the world.Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and" + ' ' +
"Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million" + ' ' +
"users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "Facebook")
),
React.createElement("div", null,
"Facebook is an online social networking service headquartered in Menlo Park, California.Its website was launched on February" + ' ' +
"4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum," + ' ' +
"Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students," + ' ' +
"but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University.It gradually added" + ' ' +
"support for students at various other universities and later to high-school students."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "WhatsApp")
),
React.createElement("div", null,
"WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription" + ' ' +
"business model.It uses the Internet to send text messages, images, video, user location and audio media messages" + ' ' +
"to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user base of up to" + ' ' +
"one billion, [10]making it the most globally popular messaging application.WhatsApp Inc., based in Mountain" + ' ' +
"View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion."
)
),
document.getElementById('accordion-default')
);

38
app/accordion/default.jsx Normal file
Просмотреть файл

@ -0,0 +1,38 @@
"use strict";
ReactDOM.render(
<EJ.Accordion>
<h3>
<a href="#">Twitter</a>
</h3>
<div>
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
Registered users can read and post tweets, but those who are unregistered can only read them.Users access Twitter
through the website interface , SMS or mobile device app Twitter Inc.is based in San Francisco and has more than
25 offices around the world.Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and
Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million
users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
</div>
<h3>
<a href="#">Facebook</a>
</h3>
<div>
Facebook is an online social networking service headquartered in Menlo Park, California.Its website was launched on February
4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum,
Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students,
but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University.It gradually added
support for students at various other universities and later to high-school students.
</div>
<h3>
<a href="#">WhatsApp</a>
</h3>
<div>
WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription
business model.It uses the Internet to send text messages, images, video, user location and audio media messages
to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user base of up to
one billion, [10]making it the most globally popular messaging application.WhatsApp Inc., based in Mountain
View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.
</div>
</EJ.Accordion>,
document.getElementById('accordion-default')
);

74
app/accordion/icons.html Normal file
Просмотреть файл

@ -0,0 +1,74 @@
<div id="accordion-icons"></div>
<script src="app/accordion/icons.js">
</script>
<script >
$("#accordion-icons").find("span.e-icon").removeClass("e-icon");
</script>
<style class="cssStyles">
#iconAccordion img {
float: left;
margin: -7px 1px 0 -13px;
}
.header-expand {
background-image: url(content/images/ui-icons/ui-icons-active.png);
background-position: -187px -60px;
cursor: pointer;
display: block;
float: right !important;
height: 16px;
width: 16px;
}
.header-close {
background-image: url(content/images/ui-icons/ui-icons-default.png);
background-position: -161px -60px;
cursor: pointer;
display: block;
float: right !important;
height: 16px;
width: 16px;
}
.e-acrdn-header:hover .header-expand {
background-image: url(content/images/ui-icons/ui-icons-active.png);
background-position: -187px -60px;
}
.e-acrdn-header:hover .header-close {
background-image: url(content/images/ui-icons/ui-icons-active.png);
background-position: -161px -60px;
}
.logos {
float: left;
height: 35px;
margin: -6px 1px 2px -15px;
width: 35px;
}
.e-select .logos {
background-image: url(content/images/accordion/grey_logos.png);
}
.e-active .logos {
background-image: url(content/images/accordion/white_logos.png);
}
.e-select:hover div {
background-image: url(content/images/accordion/white_logos.png) !important;
}
.logos.volkswagan {
background-position: 0 -170px;
}
.logos.mitsubishi {
background-position: 0 -85px;
}
.logos.benz {
background-position: 0 0;
}
</style>

32
app/accordion/icons.js Normal file
Просмотреть файл

@ -0,0 +1,32 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Accordion, {"customIcon-header": "header-close", "customIcon-selectedHeader": "header-expand"},
React.createElement("h3", null,
React.createElement("div", {className: "logos volkswagan"}),
React.createElement("a", {href: "#"}, "Volkswagen")
),
React.createElement("div", null,
"Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany." + ' ' +
"Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world."
),
React.createElement("h3", null,
React.createElement("div", {className: "logos mitsubishi"}),
React.createElement("a", {href: "#"}, "Mitsubishi")
),
React.createElement("div", null,
"The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand," + ' ' +
"trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports."
),
React.createElement("h3", null,
React.createElement("div", {className: "logos benz"}),
React.createElement("a", {href: "#"}, "Mercedes-Benz")
),
React.createElement("div", null,
"Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks." + ' ' +
"Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins" + ' ' +
"to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile."
)
),
document.getElementById('accordion-icons')
);

32
app/accordion/icons.jsx Normal file
Просмотреть файл

@ -0,0 +1,32 @@
"use strict";
ReactDOM.render(
<EJ.Accordion customIcon-header="header-close" customIcon-selectedHeader="header-expand">
<h3>
<div className="logos volkswagan"></div>
<a href="#">Volkswagen</a>
</h3>
<div>
Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany.
Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.
</div>
<h3>
<div className="logos mitsubishi"></div>
<a href="#">Mitsubishi</a>
</h3>
<div>
The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand,
trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.
</div>
<h3>
<div className="logos benz"></div>
<a href="#">Mercedes-Benz</a>
</h3>
<div>
Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks.
Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins
to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
</div>
</EJ.Accordion>,
document.getElementById('accordion-icons')
);

5
app/accordion/multipleopen.html Normal file
Просмотреть файл

@ -0,0 +1,5 @@
<div id="accordion-multipleopen"></div>
<script src="app/accordion/multipleopen.js">
</script>

38
app/accordion/multipleopen.js Normal file
Просмотреть файл

@ -0,0 +1,38 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Accordion, {enableMultipleOpen: true},
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "Twitter")
),
React.createElement("div", null,
"Twitter is an online social networking service that enables users to send and read short 140-character messages called \"tweets\"." + ' ' +
"Registered users can read and post tweets, but those who are unregistered can only read them.Users access Twitter" + ' ' +
"through the website interface , SMS or mobile device app Twitter Inc.is based in San Francisco and has more than" + ' ' +
"25 offices around the world.Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and" + ' ' +
"Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million" + ' ' +
"users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "Facebook")
),
React.createElement("div", null,
"Facebook is an online social networking service headquartered in Menlo Park, California.Its website was launched on February" + ' ' +
"4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum," + ' ' +
"Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students," + ' ' +
"but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University.It gradually added" + ' ' +
"support for students at various other universities and later to high-school students."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "WhatsApp")
),
React.createElement("div", null,
"WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription" + ' ' +
"business model.It uses the Internet to send text messages, images, video, user location and audio media messages" + ' ' +
"to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user base of up to" + ' ' +
"one billion, [10]making it the most globally popular messaging application.WhatsApp Inc., based in Mountain" + ' ' +
"View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion."
)
),
document.getElementById('accordion-multipleopen')
);

38
app/accordion/multipleopen.jsx Normal file
Просмотреть файл

@ -0,0 +1,38 @@
"use strict";
ReactDOM.render(
<EJ.Accordion enableMultipleOpen={true}>
<h3>
<a href="#">Twitter</a>
</h3>
<div>
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
Registered users can read and post tweets, but those who are unregistered can only read them.Users access Twitter
through the website interface , SMS or mobile device app Twitter Inc.is based in San Francisco and has more than
25 offices around the world.Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and
Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million
users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
</div>
<h3>
<a href="#">Facebook</a>
</h3>
<div>
Facebook is an online social networking service headquartered in Menlo Park, California.Its website was launched on February
4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum,
Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students,
but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University.It gradually added
support for students at various other universities and later to high-school students.
</div>
<h3>
<a href="#">WhatsApp</a>
</h3>
<div>
WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription
business model.It uses the Internet to send text messages, images, video, user location and audio media messages
to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user base of up to
one billion, [10]making it the most globally popular messaging application.WhatsApp Inc., based in Mountain
View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.
</div>
</EJ.Accordion>,
document.getElementById('accordion-multipleopen')
);

4
app/accordion/rtl.html Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<div id="accordion-rtl"></div>
<script src="app/accordion/rtl.js">
</script>

30
app/accordion/rtl.js Normal file
Просмотреть файл

@ -0,0 +1,30 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Accordion, {enableRTL: true},
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "سكريبت")
),
React.createElement("div", null,
"جافا سكريبت (JS) هو تفسير الكمبيوتر لغة البرمجة." + ' ' +
"تم تنفيذ أصلا كجزء من متصفحات الويب بحيث البرامج النصية من جانب العميل يمكن أن تتفاعل مع المستخدم، والسيطرة على المتصفح،" + ' ' +
"التواصل بشكل غير متزامن، وتغيير محتوى الوثيقة التي تم عرضها. [5] وفي الآونة الأخيرة، ومع ذلك،" + ' ' +
"أصبح من الشائع في كل من تطوير اللعبة وإنشاء تطبيقات سطح المكتب."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "C شارب (C #)")
),
React.createElement("div", null,
"يقصد به أن تكون بسيطة وعصرية، لأغراض عامة، لغة البرمجة وجوه المنحى C #." + ' ' +
"ويقود فريق تطويره بواسطة Anders Hejlsberg. أحدث إصدار هو C # 5.0، والذي صدر في 15 أغسطس 2012."
),
React.createElement("h3", null,
React.createElement("a", {href: "#"}, "البصرية الأساسية")
),
React.createElement("div", null,
"يتم تثبيت مترجم سطر الأوامر، VBC.EXE، كجزء من مجانية. NET الإطار SDK." + ' ' +
"ويشمل أيضا أحادية مترجم VB.NET سطر الأوامر. أحدث إصدار هو VB 2012، والذي صدر في 15 أغسطس 2012."
)
),
document.getElementById('accordion-rtl')
);

30
app/accordion/rtl.jsx Normal file
Просмотреть файл

@ -0,0 +1,30 @@
"use strict";
ReactDOM.render(
<EJ.Accordion enableRTL={true}>
<h3>
<a href="#">سكريبت</a>
</h3>
<div>
جافا سكريبت (JS) هو تفسير الكمبيوتر لغة البرمجة.
تم تنفيذ أصلا كجزء من متصفحات الويب بحيث البرامج النصية من جانب العميل يمكن أن تتفاعل مع المستخدم، والسيطرة على المتصفح،
التواصل بشكل غير متزامن، وتغيير محتوى الوثيقة التي تم عرضها. [5] وفي الآونة الأخيرة، ومع ذلك،
أصبح من الشائع في كل من تطوير اللعبة وإنشاء تطبيقات سطح المكتب.
</div>
<h3>
<a href="#">C شارب (C #)</a>
</h3>
<div>
يقصد به أن تكون بسيطة وعصرية، لأغراض عامة، لغة البرمجة وجوه المنحى C #.
ويقود فريق تطويره بواسطة Anders Hejlsberg. أحدث إصدار هو C # 5.0، والذي صدر في 15 أغسطس 2012.
</div>
<h3>
<a href="#">البصرية الأساسية</a>
</h3>
<div>
يتم تثبيت مترجم سطر الأوامر، VBC.EXE، كجزء من مجانية. NET الإطار SDK.
ويشمل أيضا أحادية مترجم VB.NET سطر الأوامر. أحدث إصدار هو VB 2012، والذي صدر في 15 أغسطس 2012.
</div>
</EJ.Accordion>,
document.getElementById('accordion-rtl')
);

2
app/autocomplete/autocomplete.html Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<div id="autocomplete" class="react-page"></div>
<script src="app/autocomplete/autocomplete.js"></script>

16
app/autocomplete/autocomplete.js Normal file
Просмотреть файл

@ -0,0 +1,16 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Tab, {id: "scrollTab", dataType: "dataType", contentType: "contentType", async: "async", height: "100%", enableTabScroll: true},
React.createElement("ul", null,
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/default.html"}, "Default")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/multivalue.html"}, "Multi Value")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/grouping.html"}, "Grouping")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/template.html"}, "Template")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/autofill.html"}, "Auto fill")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/rtl.html"}, "RTL")),
React.createElement("li", null, React.createElement("a", {href: "app/autocomplete/multicolumn.html"}, "Multi Column"))
)
),
document.getElementById('autocomplete')
);

16
app/autocomplete/autocomplete.jsx Normal file
Просмотреть файл

@ -0,0 +1,16 @@
"use strict";
ReactDOM.render(
<EJ.Tab id="scrollTab" dataType="dataType" contentType="contentType" async="async" height="100%" enableTabScroll={true}>
<ul>
<li><a href="app/autocomplete/default.html">Default</a></li>
<li><a href="app/autocomplete/multivalue.html">Multi Value</a></li>
<li><a href="app/autocomplete/grouping.html">Grouping</a></li>
<li><a href="app/autocomplete/template.html">Template</a></li>
<li><a href="app/autocomplete/autofill.html">Auto fill</a></li>
<li><a href="app/autocomplete/rtl.html">RTL</a></li>
<li><a href="app/autocomplete/multicolumn.html">Multi Column</a></li>
</ul>
</EJ.Tab>,
document.getElementById('autocomplete')
);

3
app/autocomplete/autofill.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-autofill"></div>
<script src="app/autocomplete/autofill.js"></script>

7
app/autocomplete/autofill.js Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "autofill", width: "100%", dataSource: auto_complete_carList, watermarkText: "Select a car", enableAutoFill: true}
),
document.getElementById('autocomplete-autofill')
);

7
app/autocomplete/autofill.jsx Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="autofill" width="100%" dataSource = {auto_complete_carList} watermarkText="Select a car" enableAutoFill={true}>
</EJ.Autocomplete>,
document.getElementById('autocomplete-autofill')
);

3
app/autocomplete/default.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-default"></div>
<script src="app/autocomplete/default.js"></script>

7
app/autocomplete/default.js Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "default", width: "100%", dataSource: auto_complete_carList, watermarkText: "Select a car"}
),
document.getElementById('autocomplete-default')
);

7
app/autocomplete/default.jsx Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="default" width="100%" dataSource = {auto_complete_carList} watermarkText="Select a car">
</EJ.Autocomplete>,
document.getElementById('autocomplete-default')
);

3
app/autocomplete/grouping.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-grouping"></div>
<script src="app/autocomplete/grouping.js"></script>

8
app/autocomplete/grouping.js Normal file
Просмотреть файл

@ -0,0 +1,8 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "grouping", width: "100%", dataSource: autocomplete_grouping, watermarkText: "Select a country", filterType: ej.filterType.Contains,
itemsCount: 7, highlightSearch: true, fields: auto_group_fields}
),
document.getElementById('autocomplete-grouping')
);

8
app/autocomplete/grouping.jsx Normal file
Просмотреть файл

@ -0,0 +1,8 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="grouping" width="100%" dataSource = {autocomplete_grouping} watermarkText="Select a country" filterType= { ej.filterType.Contains}
itemsCount={7} highlightSearch={true} fields={auto_group_fields}>
</EJ.Autocomplete>,
document.getElementById('autocomplete-grouping')
);

3
app/autocomplete/multicolumn.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-multicoloumn"></div>
<script src="app/autocomplete/multicolumn.js"></script>

9
app/autocomplete/multicolumn.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "multicolumn", width: "99%", dataSource: autocomplete_griddata, watermarkText: "Select a order",
highlightSearch: true, showPopupButton: true, "multiColumnSettings-stringFormat": "{0} ({2}) ({1})",
"multiColumnSettings-enable": true, "multiColumnSettings-showHeader": true, "multiColumnSettings-columns": autocomplete_columns}
),
document.getElementById('autocomplete-multicoloumn')
);

9
app/autocomplete/multicolumn.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="multicolumn" width="99%" dataSource = {autocomplete_griddata} watermarkText="Select a order"
highlightSearch={true} showPopupButton={true} multiColumnSettings-stringFormat="{0} ({2}) ({1})"
multiColumnSettings-enable={true} multiColumnSettings-showHeader={true} multiColumnSettings-columns={autocomplete_columns}>
</EJ.Autocomplete>,
document.getElementById('autocomplete-multicoloumn')
);

17
app/autocomplete/multivalue.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-multivalue"></div>
<script src="app/autocomplete/multivalue.js"></script>
<style>
.control {
width: 100%;
display: inline-block;
float: left;
}
.control:first-child {
margin-bottom: 100px;
}
.txt {
display: block;
margin-bottom: 12px;
}
</style>

8
app/autocomplete/multivalue.js Normal file
Просмотреть файл

@ -0,0 +1,8 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "multivalue", width: "100%", dataSource: autocomplete_languages, watermarkText: "Select skills", showPopupButton: true,
multiSelectMode: ej.MultiSelectMode.Delimiter}
),
document.getElementById('autocomplete-multivalue')
);

8
app/autocomplete/multivalue.jsx Normal file
Просмотреть файл

@ -0,0 +1,8 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="multivalue" width="100%" dataSource = {autocomplete_languages} watermarkText="Select skills" showPopupButton={true}
multiSelectMode={ej.MultiSelectMode.Delimiter}>
</EJ.Autocomplete>,
document.getElementById('autocomplete-multivalue')
);

3
app/autocomplete/rtl.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-rtl"></div>
<script src="app/autocomplete/rtl.js"></script>

7
app/autocomplete/rtl.js Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "rtl", width: "100%", dataSource: auto_complete_carList, watermarkText: "Select a car", enableRTL: true}
),
document.getElementById('autocomplete-rtl')
);

7
app/autocomplete/rtl.jsx Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="rtl" width="100%" dataSource = {auto_complete_carList} watermarkText="Select a car" enableRTL={true}>
</EJ.Autocomplete>,
document.getElementById('autocomplete-rtl')
);

124
app/autocomplete/template.html Normal file
Просмотреть файл

@ -0,0 +1,124 @@
<script src="scripts/sampledata.js"></script>
<div id="autocomplete-template"></div>
<script src="app/autocomplete/template.js"></script>
<style>
.flag {
background: url("content/images/autocomplete/flags.png") no-repeat;
float: left;
height: 15px;
margin-right: 10px;
margin-top: 3px;
width: 25px;
}
.flag.flag-am {
background-position: -25px 0;
}
.flag.flag-ar {
background-position: -50px 0;
}
.flag.flag-bd {
background-position: -75px 0;
}
.flag.flag-br {
background-position: -100px 0;
}
.flag.flag-ca {
background-position: -125px 0;
}
.flag.flag-cn {
background-position: 0 -15px;
}
.flag.flag-cu {
background-position: -25px -15px;
}
.flag.flag-dk {
background-position: -50px -15px;
}
.flag.flag-dz {
background-position: -75px -15px;
}
.flag.flag-ee {
background-position: -100px -15px;
}
.flag.flag-eg {
background-position: -125px -15px;
}
.flag.flag-es {
background-position: 0 -30px;
}
.flag.flag-fi {
background-position: -25px -30px;
}
.flag.flag-fr {
background-position: -50px -30px;
}
.flag.flag-gl {
background-position: -75px -30px;
}
.flag.flag-id {
background-position: -100px -30px;
}
.flag.flag-in {
background-position: -125px -30px;
}
.flag.flag-mx {
background-position: 0 -45px;
}
.flag.flag-my {
background-position: -25px -45px;
}
.flag.flag-nl {
background-position: -50px -45px;
}
.flag.flag-no {
background-position: -75px -45px;
}
.flag.flag-nz {
background-position: -100px -45px;
}
.flag.flag-pl {
background-position: -125px -45px;
}
.flag.flag-pt {
background-position: 0 -60px;
}
.flag.flag-qa {
background-position: -25px -60px;
}
.flag.flag-ro {
background-position: -50px -60px;
}
.flag.flag-sa {
background-position: -75px -60px;
}
.flag.flag-sg {
background-position: -100px -60px;
}
.flag.flag-th {
background-position: -125px -60px;
}
.flag.flag-tr {
background-position: 0 -75px;
}
.flag.flag-ua {
background-position: -25px -75px;
}
.flag.flag-us {
background-position: -50px -75px;
}
.flag.flag-uy {
background-position: -75px -75px;
}
.flag.flag-vn {
background-position: -100px -75px;
}
.flag.flag-ye {
background-position: -125px -75px;
}
.txt {
display: table-cell;
height: 20px;
vertical-align: middle;
}
</style>

7
app/autocomplete/template.js Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Autocomplete, {id: "template", width: "100%", dataSource: auto_template, watermarkText: "Select a country", template: "<div class=\"flag ${sprite}\"> </div><div class=\"txt\"> ${text} </div>"}
),
document.getElementById('autocomplete-template')
);

7
app/autocomplete/template.jsx Normal file
Просмотреть файл

@ -0,0 +1,7 @@
"use strict";
ReactDOM.render(
<EJ.Autocomplete id="template" width="100%" dataSource = {auto_template} watermarkText="Select a country" template='<div class="flag ${sprite}"> </div><div class="txt"> ${text} </div>'>
</EJ.Autocomplete>,
document.getElementById('autocomplete-template')
);

2
app/barcode/barcode.html Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<div id="barcode" class="react-page"></div>
<script src="app/barcode/barcode.js"></script>

22
app/barcode/barcode.js Normal file
Просмотреть файл

@ -0,0 +1,22 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Tab, {id: "scrollTab", dataType: "dataType", contentType: "contentType", async: "async", height: "100%", enableTabScroll: true},
React.createElement("ul", null,
React.createElement("li", null, React.createElement("a", {href: "app/barcode/default.html"}, "Default")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/codabar.html"}, "CodaBar")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code11.html"}, "Code11")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code32.html"}, "Code32")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code39.html"}, "Code39")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code39extended.html"}, "Code39Extended")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code128a.html"}, "Code128A")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code128b.html"}, "Code128B")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code128c.html"}, "Code128C")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code93.html"}, "Code93")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/code93extended.html"}, "Code93Extended")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/upcbarcode.html"}, "UpcBarcode")),
React.createElement("li", null, React.createElement("a", {href: "app/barcode/datamatrix.html"}, "DataMatrix"))
)
),
document.getElementById('barcode')
);

22
app/barcode/barcode.jsx Normal file
Просмотреть файл

@ -0,0 +1,22 @@
"use strict";
ReactDOM.render(
<EJ.Tab id="scrollTab" dataType="dataType" contentType="contentType" async="async" height="100%" enableTabScroll={true}>
<ul>
<li><a href="app/barcode/default.html">Default</a></li>
<li><a href="app/barcode/codabar.html">CodaBar</a></li>
<li><a href="app/barcode/code11.html">Code11</a></li>
<li><a href="app/barcode/code32.html">Code32</a></li>
<li><a href="app/barcode/code39.html">Code39</a></li>
<li><a href="app/barcode/code39extended.html">Code39Extended</a></li>
<li><a href="app/barcode/code128a.html">Code128A</a></li>
<li><a href="app/barcode/code128b.html">Code128B</a></li>
<li><a href="app/barcode/code128c.html">Code128C</a></li>
<li><a href="app/barcode/code93.html">Code93</a></li>
<li><a href="app/barcode/code93extended.html">Code93Extended</a></li>
<li><a href="app/barcode/upcbarcode.html">UpcBarcode</a></li>
<li><a href="app/barcode/datamatrix.html">DataMatrix</a></li>
</ul>
</EJ.Tab>,
document.getElementById('barcode')
);

9
app/barcode/codabar.html Normal file
Просмотреть файл

@ -0,0 +1,9 @@
<div id="barcode-codabar" align="center"></div>
<script src="app/barcode/codabar.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/codabar.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "codabar", text: "01234567", symbologyType: "codabar"}
)
),
document.getElementById('barcode-codabar')
);

9
app/barcode/codabar.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="codabar" text="01234567" symbologyType="codabar">
</EJ.Barcode>
</div>,
document.getElementById('barcode-codabar')
);

8
app/barcode/code11.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code11" align="center"></div>
<script src="app/barcode/code11.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code11.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code11", text: "01234567", symbologyType: "code11"}
)
),
document.getElementById('barcode-code11')
);

9
app/barcode/code11.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code11" text="01234567" symbologyType="code11">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code11')
);

8
app/barcode/code128a.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code128a" align="center"></div>
<script src="app/barcode/code128a.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code128a.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code128a", text: "SYNCFUSION", symbologyType: "code128a"}
)
),
document.getElementById('barcode-code128a')
);

9
app/barcode/code128a.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code128a" text="SYNCFUSION" symbologyType="code128a">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code128a')
);

8
app/barcode/code128b.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code128b" align="center"></div>
<script src="app/barcode/code128b.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code128b.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code128b", text: "SYNCFUSION", symbologyType: "code128b"}
)
),
document.getElementById('barcode-code128b')
);

9
app/barcode/code128b.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code128b" text="SYNCFUSION" symbologyType="code128b">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code128b')
);

8
app/barcode/code128c.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code128c" align="center"></div>
<script src="app/barcode/code128c.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code128c.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code128c", text: "01234567", symbologyType: "code128c"}
)
),
document.getElementById('barcode-code128c')
);

9
app/barcode/code128c.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code128c" text="01234567" symbologyType="code128c" >
</EJ.Barcode>
</div>,
document.getElementById('barcode-code128c')
);

8
app/barcode/code32.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code32" align="center"></div>
<script src="app/barcode/code32.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code32.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code32", text: "01234567", symbologyType: "code32"}
)
),
document.getElementById('barcode-code32')
);

9
app/barcode/code32.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code32" text="01234567" symbologyType="code32">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code32')
);

8
app/barcode/code39.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code39" align="center"></div>
<script src="app/barcode/code39.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code39.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code39", text: "SYNCFUSION", symbologyType: "code39"}
)
),
document.getElementById('barcode-code39')
);

9
app/barcode/code39.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code39" text="SYNCFUSION" symbologyType="code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code39')
);

8
app/barcode/code39extended.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code39extended" align="center"></div>
<script src="app/barcode/code39extended.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code39extended.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code39extended", text: "SYNCFUSION", symbologyType: "code39extended"}
)
),
document.getElementById('barcode-code39extended')
);

9
app/barcode/code39extended.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code39extended" text="SYNCFUSION" symbologyType="code39extended">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code39extended')
);

8
app/barcode/code93.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code93" align="center"></div>
<script src="app/barcode/code93.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code93.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code93", text: "SYNCFUSION", symbologyType: "code93"}
)
),
document.getElementById('barcode-code93')
);

9
app/barcode/code93.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code93" text="SYNCFUSION" symbologyType="code93">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code93')
);

8
app/barcode/code93extended.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-code93extended" align="center"></div>
<script src="app/barcode/code93extended.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/code93extended.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "code93extended", text: "SYNCFUSION", symbologyType: "code93extended"}
)
),
document.getElementById('barcode-code93extended')
);

9
app/barcode/code93extended.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code93extended" text="SYNCFUSION" symbologyType="code93extended">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code93extended')
);

8
app/barcode/datamatrix.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-datamatrix" align="center"></div>
<script src="app/barcode/datamatrix.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/datamatrix.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "datamatrix", text: "SYNCFUSION", symbologyType: "datamatrix", xDimension: "7"}
)
),
document.getElementById('barcode-datamatrix')
);

9
app/barcode/datamatrix.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="datamatrix" text="SYNCFUSION" symbologyType="datamatrix" xDimension="7">
</EJ.Barcode>
</div>,
document.getElementById('barcode-datamatrix')
);

8
app/barcode/default.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-default" align="center"></div>
<script src="app/barcode/default.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/default.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "default", text: "http://www.syncfusion.com", symbologyType: "qrbarcode", xDimension: "5"}
)
),
document.getElementById('barcode-default')
);

9
app/barcode/default.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="default" text="http://www.syncfusion.com" symbologyType="qrbarcode" xDimension="5" >
</EJ.Barcode>
</div>,
document.getElementById('barcode-default')
);

8
app/barcode/upcbarcode.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="barcode-upcbarcode" align="center"></div>
<script src="app/barcode/upcbarcode.js"></script>
<style>
.control{
padding: 100px;
margin:auto;
}
</style>

9
app/barcode/upcbarcode.js Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
React.createElement("div", {className: "control"},
React.createElement(EJ.Barcode, {id: "upcbarcode", text: "01234567890", symbologyType: "upcbarcode"}
)
),
document.getElementById('barcode-upcbarcode')
);

9
app/barcode/upcbarcode.jsx Normal file
Просмотреть файл

@ -0,0 +1,9 @@
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="upcbarcode" text="01234567890" symbologyType="upcbarcode">
</EJ.Barcode>
</div>,
document.getElementById('barcode-upcbarcode')
);

2
app/bulletgraph/bulletgraph.html Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<div id="bulletgraph" class="react-page"></div>
<script src="app/bulletgraph/bulletgraph.js"></script>

50
app/bulletgraph/bulletgraph.js Normal file
Просмотреть файл

@ -0,0 +1,50 @@
"use strict";
function activeItem(args){
if (args.activeIndex == 0) {
var width = (ej.isTouchDevice()) ? 250 : 595;
var height = 90;
var bullet0Instance = $("#bulletCore0").ejBulletGraph("instance");
var bullet1Instance = $("#bulletCore1").ejBulletGraph("instance");
var bullet2Instance = $("#bulletCore2").ejBulletGraph("instance");
var bullet3Instance = $("#bulletCore3").ejBulletGraph("instance");
$(bullet0Instance.svgObject).width(width);
$(bullet1Instance.svgObject).width(width);
$(bullet2Instance.svgObject).width(width);
$(bullet3Instance.svgObject).width(width);
$(bullet0Instance.svgObject).height(height);
$(bullet1Instance.svgObject).height(height);
$(bullet2Instance.svgObject).height(height);
$(bullet3Instance.svgObject).height(height);
bullet0Instance._bulletResize();
bullet1Instance._bulletResize();
bullet2Instance._bulletResize();
bullet3Instance._bulletResize();
} else {
var width = 320;
var height = 400;
var instance = $("#bulletCore4").ejBulletGraph("instance");
if (instance.alreadySelected) {
$(instance.svgObject).width(width);
$(instance.svgObject).height(height);
instance._bulletResize();
}
else
instance.alreadySelected = true;
}
}
ReactDOM.render(
React.createElement(EJ.Tab, {id: "scrollTab", dataType: "dataType", itemActive: activeItem, contentType: "contentType", async: "async", height: "100%", enableTabScroll: true},
React.createElement("ul", null,
React.createElement("li", null, React.createElement("a", {href: "app/bulletgraph/default.html"}, "Default")),
React.createElement("li", null, React.createElement("a", {href: "app/bulletgraph/remotedata.html"}, "Data Binding"))
)
),
document.getElementById('bulletgraph')
);

50
app/bulletgraph/bulletgraph.jsx Normal file
Просмотреть файл

@ -0,0 +1,50 @@
"use strict";
function activeItem(args){
if (args.activeIndex == 0) {
var width = (ej.isTouchDevice()) ? 250 : 595;
var height = 90;
var bullet0Instance = $("#bulletCore0").ejBulletGraph("instance");
var bullet1Instance = $("#bulletCore1").ejBulletGraph("instance");
var bullet2Instance = $("#bulletCore2").ejBulletGraph("instance");
var bullet3Instance = $("#bulletCore3").ejBulletGraph("instance");
$(bullet0Instance.svgObject).width(width);
$(bullet1Instance.svgObject).width(width);
$(bullet2Instance.svgObject).width(width);
$(bullet3Instance.svgObject).width(width);
$(bullet0Instance.svgObject).height(height);
$(bullet1Instance.svgObject).height(height);
$(bullet2Instance.svgObject).height(height);
$(bullet3Instance.svgObject).height(height);
bullet0Instance._bulletResize();
bullet1Instance._bulletResize();
bullet2Instance._bulletResize();
bullet3Instance._bulletResize();
} else {
var width = 320;
var height = 400;
var instance = $("#bulletCore4").ejBulletGraph("instance");
if (instance.alreadySelected) {
$(instance.svgObject).width(width);
$(instance.svgObject).height(height);
instance._bulletResize();
}
else
instance.alreadySelected = true;
}
}
ReactDOM.render(
<EJ.Tab id="scrollTab" dataType="dataType" itemActive={activeItem} contentType="contentType" async="async" height="100%" enableTabScroll={true}>
<ul>
<li><a href="app/bulletgraph/default.html">Default</a></li>
<li><a href="app/bulletgraph/remotedata.html">Data Binding</a></li>
</ul>
</EJ.Tab>,
document.getElementById('bulletgraph')
);

37
app/bulletgraph/default.html Normal file
Просмотреть файл

@ -0,0 +1,37 @@
<div id="bulletgraph-default" align="center"></div>
<div id="bulletgraph-default1" align="center"></div>
<div id="bulletgraph-default2" align="center"></div>
<div id="bulletgraph-default3" align="center"></div>
<script src="app/bulletgraph/default.js">
</script>
<div id="Tooltip" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
<div style="font-weight:bold">
Sales
</div>
<table>
<tr>
<td>
Current
</td>
<td>
: {{:currentValue}}
</td>
</tr>
<tr>
<td>
Target
</td>
<td>
: {{:targetValue}}
</td>
</tr>
</table>
</div>

183
app/bulletgraph/default.js Normal file
Просмотреть файл

@ -0,0 +1,183 @@
"use strict";
var tooltipSettings= {template: "Tooltip", visible: true}
var quantitativeScaleSettings= {
location: { x: 110, y: 10 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
minorTickSettings:{ size: 5, width: 1, stroke: 'gray'},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
};
var qualitativeRanges= [{
rangeEnd: 4.3
}, {
rangeEnd: 7.3
}, {
rangeEnd: 10
}];
var captionSettings= { textAngle: 0,
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
subTitle: { textAngle: 0,
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1} //'#707070'
}
};
ReactDOM.render(
React.createElement(EJ.BulletGraph, {id: "bulletCore0",
qualitativeRangeSize: 32,
load: "loadBulletTheme",
quantitativeScaleLength: 475,
tooltipSettings: tooltipSettings,
quantitativeScaleSettings: quantitativeScaleSettings,
qualitativeRanges: qualitativeRanges,
captionSettings: captionSettings
}
),
document.getElementById('bulletgraph-default')
);
quantitativeScaleSettings= {
location: { x: 110, y: 10 },
minimum: -10,
maximum: 10,
interval: 2,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1},
minorTickSettings:{ size: 5, width: 1},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %'
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7}]
};
qualitativeRanges= [{
rangeEnd: -4, rangeStroke: "#61a301"
}, {
rangeEnd: 3, rangeStroke: "#fcda21"
}, {
rangeEnd: 10, rangeStroke: "#d61e3f"
}];
captionSettings= { textAngle: 0,
location: { x: 60, y: 25 }, text: "Profit", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '13px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
};
ReactDOM.render(
React.createElement(EJ.BulletGraph, {id: "bulletCore1",
qualitativeRangeSize: 32,
load: "loadBulletTheme",
quantitativeScaleLength: 475,
quantitativeScaleSettings: quantitativeScaleSettings,
qualitativeRanges: qualitativeRanges,
captionSettings: captionSettings
}
),
document.getElementById('bulletgraph-default1')
);
quantitativeScaleSettings= {
location: { x: 105, y: 10 },
minimum: -10,
maximum: 10,
interval: 2,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %',
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: -2, comparativeMeasureValue: -2}]
};
qualitativeRanges= [{
rangeEnd: -4.3
}, {
rangeEnd: 4.3
}, {
rangeEnd: 10
}],
captionSettings= { textAngle: 0,
location: { x: 38, y: 25 }, text: "Expenses", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '13px', fontWeight: 'regular', opacity: 1 }, //'#707070'
}
ReactDOM.render(
React.createElement(EJ.BulletGraph, {id: "bulletCore2",
qualitativeRangeSize: 32,
load: "loadBulletTheme",
quantitativeScaleLength: 475,
quantitativeScaleSettings: quantitativeScaleSettings,
qualitativeRanges: qualitativeRanges,
captionSettings: captionSettings
}
),
document.getElementById('bulletgraph-default2')
);
quantitativeScaleSettings= {
location: { x: 105, y: 10 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1},
minorTickSettings:{ size: 5, width: 1},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelPrefix: '$ ', labelSuffix: 'K'
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
};
qualitativeRanges= [{
rangeEnd: 4.3, rangeStroke: "#61a301", rangeOpacity: 1
}, {
rangeEnd: 7.3, rangeStroke: "#fcda21", rangeOpacity: 1
}, {
rangeEnd: 10, rangeStroke: "#d61e3f", rangeOpacity: 1
}];
captionSettings= { textAngle: 0,
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
subTitle: { textAngle: 0,
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1} //'#707070'
}
};
ReactDOM.render(
React.createElement(EJ.BulletGraph, {id: "bulletCore3",
qualitativeRangeSize: 32,
load: "loadBulletTheme",
quantitativeScaleLength: 475,
tooltipSettings: tooltipSettings,
quantitativeScaleSettings: quantitativeScaleSettings,
qualitativeRanges: qualitativeRanges,
captionSettings: captionSettings,
isResponsive: true
}
),
document.getElementById('bulletgraph-default3')
);

183
app/bulletgraph/default.jsx Normal file
Просмотреть файл

@ -0,0 +1,183 @@
"use strict";
var tooltipSettings= {template: "Tooltip", visible: true}
var quantitativeScaleSettings= {
location: { x: 110, y: 10 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
minorTickSettings:{ size: 5, width: 1, stroke: 'gray'},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
};
var qualitativeRanges= [{
rangeEnd: 4.3
}, {
rangeEnd: 7.3
}, {
rangeEnd: 10
}];
var captionSettings= { textAngle: 0,
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
subTitle: { textAngle: 0,
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1} //'#707070'
}
};
ReactDOM.render(
<EJ.BulletGraph id="bulletCore0"
qualitativeRangeSize={32}
load= "loadBulletTheme"
quantitativeScaleLength= {475}
tooltipSettings={tooltipSettings}
quantitativeScaleSettings= {quantitativeScaleSettings}
qualitativeRanges={qualitativeRanges}
captionSettings={captionSettings}
>
</EJ.BulletGraph>,
document.getElementById('bulletgraph-default')
);
quantitativeScaleSettings= {
location: { x: 110, y: 10 },
minimum: -10,
maximum: 10,
interval: 2,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1},
minorTickSettings:{ size: 5, width: 1},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %'
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7}]
};
qualitativeRanges= [{
rangeEnd: -4, rangeStroke: "#61a301"
}, {
rangeEnd: 3, rangeStroke: "#fcda21"
}, {
rangeEnd: 10, rangeStroke: "#d61e3f"
}];
captionSettings= { textAngle: 0,
location: { x: 60, y: 25 }, text: "Profit", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '13px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
};
ReactDOM.render(
<EJ.BulletGraph id="bulletCore1"
qualitativeRangeSize={32}
load= "loadBulletTheme"
quantitativeScaleLength= {475}
quantitativeScaleSettings= {quantitativeScaleSettings}
qualitativeRanges={qualitativeRanges}
captionSettings={captionSettings}
>
</EJ.BulletGraph>,
document.getElementById('bulletgraph-default1')
);
quantitativeScaleSettings= {
location: { x: 105, y: 10 },
minimum: -10,
maximum: 10,
interval: 2,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %',
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: -2, comparativeMeasureValue: -2}]
};
qualitativeRanges= [{
rangeEnd: -4.3
}, {
rangeEnd: 4.3
}, {
rangeEnd: 10
}],
captionSettings= { textAngle: 0,
location: { x: 38, y: 25 }, text: "Expenses", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '13px', fontWeight: 'regular', opacity: 1 }, //'#707070'
}
ReactDOM.render(
<EJ.BulletGraph id="bulletCore2"
qualitativeRangeSize={32}
load= "loadBulletTheme"
quantitativeScaleLength= {475}
quantitativeScaleSettings= {quantitativeScaleSettings}
qualitativeRanges={qualitativeRanges}
captionSettings={captionSettings}
>
</EJ.BulletGraph>,
document.getElementById('bulletgraph-default2')
);
quantitativeScaleSettings= {
location: { x: 105, y: 10 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{ size: 13, width: 1},
minorTickSettings:{ size: 5, width: 1},
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
labelSettings: {
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelPrefix: '$ ', labelSuffix: 'K'
},
featuredMeasureSettings: { width: 6 },
comparativeMeasureSettings:{
width: 5
},
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
};
qualitativeRanges= [{
rangeEnd: 4.3, rangeStroke: "#61a301", rangeOpacity: 1
}, {
rangeEnd: 7.3, rangeStroke: "#fcda21", rangeOpacity: 1
}, {
rangeEnd: 10, rangeStroke: "#d61e3f", rangeOpacity: 1
}];
captionSettings= { textAngle: 0,
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
subTitle: { textAngle: 0,
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1} //'#707070'
}
};
ReactDOM.render(
<EJ.BulletGraph id="bulletCore3"
qualitativeRangeSize={32}
load= "loadBulletTheme"
quantitativeScaleLength= {475}
tooltipSettings={tooltipSettings}
quantitativeScaleSettings= {quantitativeScaleSettings}
qualitativeRanges={qualitativeRanges}
captionSettings={captionSettings}
isResponsive={true}
>
</EJ.BulletGraph>,
document.getElementById('bulletgraph-default3')
);

43
app/bulletgraph/remotedata.html Normal file
Просмотреть файл

@ -0,0 +1,43 @@
<div id="bulletgraph-remotedata" align="center"></div>
<script src="app/bulletgraph/remotedata.js">
</script>
<div id="Tooltip2" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
<div align="center" style="font-weight:bold">
Production
</div>
<table>
<tr>
<td>
Production level
</td>
<td>
: {{:currentValue}}
</td>
</tr>
<tr>
<td>
Estimated level
</td>
<td>
: {{:targetValue}}
</td>
</tr>
<tr>
<td>
Product ID
</td>
<td >
: {{:category}}
</td>
</tr>
</table>
</div>

80
app/bulletgraph/remotedata.js Normal file
Просмотреть файл

@ -0,0 +1,80 @@
"use strict";
var localData = [
{
value: 9.5, comparativeMeasureValue: 7.5,
category: 2001
},
{
value: 9.5, comparativeMeasureValue: 5,
category: 2002
},
{
value: 9.5, comparativeMeasureValue: 6,
category: 2003
},
{
value: 9.5, comparativeMeasureValue: 8,
category: 2004
},
{
value: 9.5, comparativeMeasureValue: 5,
category: 2005
},
{
value: 9.5, comparativeMeasureValue: 6,
category: 2006
}];
var tooltipSettings= {template: "Tooltip2", visible: true};
var quantitativeScaleSettings = {
location: { x: 110, y: 25 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{width:1, size: 13, stroke: 'gray'},
minorTickSettings: { width: 1, size: 5, stroke: 'gray' },
labelSettings: { offset: 14, size: 10 }
};
var fields= {
dataSource: localData, category: "category",
featureMeasures: "value",
comparativeMeasure: "comparativeMeasureValue"
};
var qualitativeRanges= [{
rangeEnd: 4.3
}, {
rangeEnd: 7.3
}, {
rangeEnd: 10
}];
var captionSettings = {
textAngle: -90,
location: { x: 40, y: 210 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
subTitle: {
textAngle: -90,
text: "$ in Thousands", location: { x: 55, y: 210 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1 } //'#707070'
}
};
ReactDOM.render(
React.createElement(EJ.BulletGraph, {id: "bulletCore4",
height: 400,
enableAnimation: true,
qualitativeRangeSize: 320,
load: "loadBulletTheme",
quantitativeScaleLength: 475,
tooltipSettings: tooltipSettings,
quantitativeScaleSettings: quantitativeScaleSettings,
fields: fields,
qualitativeRanges: qualitativeRanges,
captionSettings: captionSettings
}
),
document.getElementById('bulletgraph-remotedata')
);

80
app/bulletgraph/remotedata.jsx Normal file
Просмотреть файл

@ -0,0 +1,80 @@
"use strict";
var localData = [
{
value: 9.5, comparativeMeasureValue: 7.5,
category: 2001
},
{
value: 9.5, comparativeMeasureValue: 5,
category: 2002
},
{
value: 9.5, comparativeMeasureValue: 6,
category: 2003
},
{
value: 9.5, comparativeMeasureValue: 8,
category: 2004
},
{
value: 9.5, comparativeMeasureValue: 5,
category: 2005
},
{
value: 9.5, comparativeMeasureValue: 6,
category: 2006
}];
var tooltipSettings= {template: "Tooltip2", visible: true};
var quantitativeScaleSettings = {
location: { x: 110, y: 25 },
minimum: 0,
maximum: 10,
interval: 1,
minorTicksPerInterval: 4,
majorTickSettings:{width:1, size: 13, stroke: 'gray'},
minorTickSettings: { width: 1, size: 5, stroke: 'gray' },
labelSettings: { offset: 14, size: 10 }
};
var fields= {
dataSource: localData, category: "category",
featureMeasures: "value",
comparativeMeasure: "comparativeMeasureValue"
};
var qualitativeRanges= [{
rangeEnd: 4.3
}, {
rangeEnd: 7.3
}, {
rangeEnd: 10
}];
var captionSettings = {
textAngle: -90,
location: { x: 40, y: 210 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
subTitle: {
textAngle: -90,
text: "$ in Thousands", location: { x: 55, y: 210 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1 } //'#707070'
}
};
ReactDOM.render(
<EJ.BulletGraph id="bulletCore4"
height= {400}
enableAnimation= {true}
qualitativeRangeSize= {320}
load= "loadBulletTheme"
quantitativeScaleLength = {475}
tooltipSettings = {tooltipSettings}
quantitativeScaleSettings = {quantitativeScaleSettings}
fields = {fields}
qualitativeRanges = {qualitativeRanges}
captionSettings = {captionSettings}
>
</EJ.BulletGraph>,
document.getElementById('bulletgraph-remotedata')
);

8
app/button/button.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<div id="button" class="react-page"></div>
<script src="app/button/button.js"></script>
<style>
.frame{
padding:0 30%;
}
</style>

15
app/button/button.js Normal file
Просмотреть файл

@ -0,0 +1,15 @@
"use strict";
ReactDOM.render(
React.createElement(EJ.Tab, {id: "scrollTab", dataType: "dataType", contentType: "contentType", async: "async", height: "100%", enableTabScroll: true},
React.createElement("ul", null,
React.createElement("li", null, React.createElement("a", {href: "app/button/default.html"}, "Default")),
React.createElement("li", null, React.createElement("a", {href: "app/button/checkbox.html"}, "CheckBox")),
React.createElement("li", null, React.createElement("a", {href: "app/button/radiobutton.html"}, "RadioButton")),
React.createElement("li", null, React.createElement("a", {href: "app/button/togglebutton.html"}, "ToggleButton")),
React.createElement("li", null, React.createElement("a", {href: "app/button/splitbutton.html"}, "SplitButton")),
React.createElement("li", null, React.createElement("a", {href: "app/button/groupbutton.html"}, "GroupButton"))
)
),
document.getElementById('button')
);

15
app/button/button.jsx Normal file
Просмотреть файл

@ -0,0 +1,15 @@
"use strict";
ReactDOM.render(
<EJ.Tab id="scrollTab" dataType="dataType" contentType="contentType" async="async" height="100%" enableTabScroll={true}>
<ul>
<li><a href="app/button/default.html">Default</a></li>
<li><a href="app/button/checkbox.html">CheckBox</a></li>
<li><a href="app/button/radiobutton.html">RadioButton</a></li>
<li><a href="app/button/togglebutton.html">ToggleButton</a></li>
<li><a href="app/button/splitbutton.html">SplitButton</a></li>
<li><a href="app/button/groupbutton.html">GroupButton</a></li>
</ul>
</EJ.Tab>,
document.getElementById('button')
);

26
app/button/checkbox.html Normal file
Просмотреть файл

@ -0,0 +1,26 @@
<div id="button-checkbox"></div>
<script src="app/button/checkbox.js">
</script>
<style>
.chkrad{
width:35%;
}
.clslab{
margin-left:10px;
}
.label {
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
#check_control{
width: 350px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
</style>

67
app/button/checkbox.js Normal file
Просмотреть файл

@ -0,0 +1,67 @@
"use strict";
ReactDOM.render(
React.createElement("div", {id: "check_control"},
React.createElement("div", {className: "chkalign"},
React.createElement("br", null), "Hobbies",
React.createElement("br", null),
React.createElement("br", null),
React.createElement("table", {className: "table table-condensed f11 table-nowrap"},
React.createElement("tr", null,
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", id: "Checkbox1", checked: true}),
React.createElement("label", {for: "Checkbox1", className: "clslab"}, "Music")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", id: "Checkbox2"}),
React.createElement("label", {for: "Checkbox2", className: "clslab"}, "Sports")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", id: "Checkbox3"}),
React.createElement("label", {for: "Checkbox3", className: "clslab"}, "Reading")
)
)
),
React.createElement("br", null),
React.createElement("br", null),
"Favorite Search Engines", React.createElement("br", null),
React.createElement("br", null),
React.createElement("table", {className: "table table-condensed f11 table-nowrap"},
React.createElement("tr", null,
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", id: "Checkbox4", checked: true}),
React.createElement("label", {for: "Checkbox4", className: "clslab"}, "Google")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", id: "Checkbox5"}),
React.createElement("label", {for: "Checkbox5", className: "clslab"}, "Yahoo")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", id: "Checkbox6"}),
React.createElement("label", {for: "Checkbox6", className: "clslab"}, "Bing"))
)
),
React.createElement("br", null),
React.createElement("br", null),
"Favorite Social networks", React.createElement("br", null),
React.createElement("br", null),
React.createElement("table", {className: "table table-condensed f11 table-nowrap"},
React.createElement("tr", null,
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", enableTriState: true, id: "Checkbox7"}),
React.createElement("label", {for: "Checkbox7", className: "clslab"}, "Flickr")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", enableTriState: true, id: "Checkbox8"}),
React.createElement("label", {for: "Checkbox8", className: "clslab"}, "GPlus")
),
React.createElement("td", {className: "chkrad"},
React.createElement(EJ.CheckBox, {ejHtmlAttributes: {type:"checkbox"}, className: "nodetext", size: "Medium", enableTriState: true, id: "Checkbox9"}),
React.createElement("label", {for: "Checkbox9", className: "clslab"}, "Twitter"))
)
)
)
),
document.getElementById('button-checkbox')
);

67
app/button/checkbox.jsx Normal file
Просмотреть файл

@ -0,0 +1,67 @@
"use strict";
ReactDOM.render(
<div id="check_control">
<div className="chkalign">
<br />Hobbies
<br />
<br />
<table className="table table-condensed f11 table-nowrap">
<tr>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" id="Checkbox1" checked={true}></EJ.CheckBox>
<label for="Checkbox1" className="clslab">Music</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" id="Checkbox2"></EJ.CheckBox>
<label for="Checkbox2" className="clslab">Sports</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" id="Checkbox3"></EJ.CheckBox>
<label for="Checkbox3" className="clslab">Reading</label>
</td>
</tr>
</table>
<br />
<br />
Favorite Search Engines<br />
<br />
<table className="table table-condensed f11 table-nowrap">
<tr>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" id="Checkbox4" checked={true}></EJ.CheckBox>
<label for="Checkbox4" className="clslab">Google</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" id="Checkbox5" ></EJ.CheckBox>
<label for="Checkbox5" className="clslab">Yahoo</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" id="Checkbox6" ></EJ.CheckBox>
<label for="Checkbox6" className="clslab">Bing</label></td>
</tr>
</table>
<br />
<br />
Favorite Social networks<br />
<br />
<table className="table table-condensed f11 table-nowrap">
<tr>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" enableTriState={true} id="Checkbox7"></EJ.CheckBox>
<label for="Checkbox7" className="clslab">Flickr</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" enableTriState={true} id="Checkbox8" ></EJ.CheckBox>
<label for="Checkbox8" className="clslab">GPlus</label>
</td>
<td className="chkrad">
<EJ.CheckBox ejHtmlAttributes={{type:"checkbox"}} className="nodetext" size="Medium" enableTriState={true} id="Checkbox9" ></EJ.CheckBox>
<label for="Checkbox9" className="clslab">Twitter</label></td>
</tr>
</table>
</div>
</div>,
document.getElementById('button-checkbox')
);

29
app/button/default.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<div id="button-default"></div>
<script src="app/button/default.js">
</script>
<style>
.e-bgdefault:hover .e-buttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-buttondiv .e-icon.e-uiLight {
background-image: url('content/ej/themes/common-images/icons-white.png');
}
.table-nowrap td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td{
padding:5px;
}
#default_control{
width: 350px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
</style>

44
app/button/default.js Normal file
Просмотреть файл

@ -0,0 +1,44 @@
"use strict";
ReactDOM.render(
React.createElement("div", {id: "default_control"},
React.createElement("table", {className: " table-condensed f11 table-nowrap "},
React.createElement("tr", null,
React.createElement("td", null, "Normal"
),
React.createElement("td", {className: "btnsht"},
React.createElement(EJ.Button, {id: "btn1", size: ej.ButtonSize.Normal, showRoundedCorner: true, contentType: ej.ContentType.ImageOnly, prefixIcon: "e-icon e-uiLight e-handup", text: "login"})
)
),
React.createElement("tr", null,
React.createElement("td", null, "Mini"
),
React.createElement("td", {className: "btnsht"},
React.createElement(EJ.Button, {id: "btn2", size: ej.ButtonSize.Mini, showRoundedCorner: true, text: "login"})
)
),
React.createElement("tr", null,
React.createElement("td", null, "Small"
),
React.createElement("td", {className: "btnsht"},
React.createElement(EJ.Button, {id: "btn3", size: ej.ButtonSize.Small, showRoundedCorner: true, text: "login"})
)
),
React.createElement("tr", null,
React.createElement("td", null, "Medium"
),
React.createElement("td", {className: "btnsht"},
React.createElement(EJ.Button, {id: "btn3", size: ej.ButtonSize.Medium, showRoundedCorner: true, text: "login"})
)
),
React.createElement("tr", null,
React.createElement("td", null, "Large"
),
React.createElement("td", {className: "btnsht"},
React.createElement(EJ.Button, {id: "btn3", size: ej.ButtonSize.Large, showRoundedCorner: true, contentType: ej.ContentType.TextAndImage, prefixIcon: "e-icon e-uiLight e-handup", text: "login"})
)
)
)
),
document.getElementById('button-default')
);

44
app/button/default.jsx Normal file
Просмотреть файл

@ -0,0 +1,44 @@
"use strict";
ReactDOM.render(
<div id="default_control">
<table className=" table-condensed f11 table-nowrap ">
<tr>
<td>Normal
</td>
<td className="btnsht">
<EJ.Button id="btn1" size={ej.ButtonSize.Normal} showRoundedCorner={true} contentType={ej.ContentType.ImageOnly} prefixIcon="e-icon e-uiLight e-handup" text="login"></EJ.Button>
</td>
</tr>
<tr>
<td>Mini
</td>
<td className="btnsht">
<EJ.Button id="btn2" size={ej.ButtonSize.Mini} showRoundedCorner={true} text="login"></EJ.Button>
</td>
</tr>
<tr>
<td>Small
</td>
<td className="btnsht">
<EJ.Button id="btn3" size={ej.ButtonSize.Small} showRoundedCorner={true} text="login"></EJ.Button>
</td>
</tr>
<tr>
<td>Medium
</td>
<td className="btnsht">
<EJ.Button id="btn3" size={ej.ButtonSize.Medium} showRoundedCorner={true} text="login"></EJ.Button>
</td>
</tr>
<tr>
<td>Large
</td>
<td className="btnsht">
<EJ.Button id="btn3" size={ej.ButtonSize.Large} showRoundedCorner={true} contentType={ej.ContentType.TextAndImage} prefixIcon="e-icon e-uiLight e-handup" text="login"></EJ.Button>
</td>
</tr>
</table>
</div>,
document.getElementById('button-default')
);

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше