v19.4.0.48
This commit is contained in:
SyncfusionBuild
Родитель
95c5f642e9
Коммит
2ac168017c
|
|
@ -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>.
|
* 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-2021 Syncfusion, Inc. Updated on 2022-02-01 at precisely 10:16:21 EST.</p>
|
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-02-01 at precisely 10:42:02 EST.</p>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<div id="accordion" class="react-page"></div>
|
||||||
|
<script src="app/accordion/accordion.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
<div id="accordion-default"></div>
|
||||||
|
<script src="app/accordion/default.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
<div id="accordion-multipleopen"></div>
|
||||||
|
<script src="app/accordion/multipleopen.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
<div id="accordion-rtl"></div>
|
||||||
|
<script src="app/accordion/rtl.js">
|
||||||
|
</script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<div id="autocomplete" class="react-page"></div>
|
||||||
|
<script src="app/autocomplete/autocomplete.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="scripts/sampledata.js"></script>
|
||||||
|
<div id="autocomplete-autofill"></div>
|
||||||
|
<script src="app/autocomplete/autofill.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="scripts/sampledata.js"></script>
|
||||||
|
<div id="autocomplete-default"></div>
|
||||||
|
<script src="app/autocomplete/default.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="scripts/sampledata.js"></script>
|
||||||
|
<div id="autocomplete-grouping"></div>
|
||||||
|
<script src="app/autocomplete/grouping.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="scripts/sampledata.js"></script>
|
||||||
|
<div id="autocomplete-multicoloumn"></div>
|
||||||
|
<script src="app/autocomplete/multicolumn.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="scripts/sampledata.js"></script>
|
||||||
|
<div id="autocomplete-rtl"></div>
|
||||||
|
<script src="app/autocomplete/rtl.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<div id="barcode" class="react-page"></div>
|
||||||
|
<script src="app/barcode/barcode.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<div id="bulletgraph" class="react-page"></div>
|
||||||
|
<script src="app/bulletgraph/bulletgraph.js"></script>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div id="button" class="react-page"></div>
|
||||||
|
<script src="app/button/button.js"></script>
|
||||||
|
<style>
|
||||||
|
.frame{
|
||||||
|
padding:0 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
|
|
@ -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')
|
||||||
|
);
|
||||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче