In today's digital age, web applications have become an important part of our lives. Whether it's a social media platform, e-commerce website or online tool, the heart of a modern web application is its user interface (UI). One of the key components of the user interface is the front-end controls.
Front-end controls are an indispensable element in web development. They provide us with the tools to build a variety of interactive and feature-rich web applications. Whether you are a new front-end developer or an experienced engineer, understanding and mastering front-end controls is key to improving your web development skills.
This blog series will take you deep into the world of front-end controls. We'll look at a variety of UI components in detail, ranging from simple buttons and form controls to complex charting and map integration. Whether you're looking to improve your skills or find ways to build impressive user experiences, this series will provide you with valuable knowledge.
Over the next few articles, we'll explore the different types of front-end controls, discussing their uses, best practices, and real-world examples. Whether your interest is building beautiful UIs, improving user experience, or learning the latest web development techniques, this series will help.
Are you ready to explore the power of front-end controls? let's start!
1. Demo address
Visit URL: http://59.110.22.223:8080/Model_qianduan/calendar_base.html
2. Common sense of controls
Custom controls
Custom controls are compiled server-side controls that encapsulate user interface and other functions into reusable packages. Compared with standard controls, custom controls have a different tag prefix. And having to do it shows no difference other than registration and deployment. In addition, custom controls have their own object model, can fire events, and support all Microsoft Visual Studio design features, such as the Properties Window, Visual Designer, Property Builder, and Toolbox.
The user controls are mentioned above. Just like creating a page, drag and drop the system controls in the designer to design the interface, and then add the necessary event codes to these controls. It is purely a combination. The custom control is to "implement from scratch" the underlying function of the control. Write a class that inherits from Control and implements the INamingContainer interface. It even overrides the Render method of the control, controls the html code generated by the control, and implements the response to return data from the browser. Events and processing of returned data are not only called custom controls, they can also be called composite controls.
When using custom controls, you can click on the toolbox on the right side of the vs software, right-click on the blank space on the toolbox to select an item – click “Browse” under the .NET Framework component tab – and find the custom control you want to add ( .dll file)–Open–OK. This way you can drag that custom control out of the toolbox and use it. Commonly used controls include: paging controls, text editors, Crystal Reports, ActiveReports, etc.
Development method:
1. Development of custom controls, that is, inheriting the accumulation of Control to implement server controls.
2. Develop user controls.
Creating a user control is similar to creating a regular ASP.NET web page, but there are some differences. The steps are:
① Create an .ascx text file. This is the first difference between user controls and asp.net web pages, which use the extension .aspx.
② Add the @Control directive at the top of the text file and set the selected programming language through the language attribute. This is the second difference between user controls and web pages. (The latter uses the @page directive).
③Add HTML markup text and asp.net server controls to the text file. You can add any html tag other than html, body and form. This is because user controls cannot be used alone and must be used as part of the web page. This is the third difference between user controls and web pages.
Three, source code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
</head>
<body >
<div id="ae170bf12bec45f89fbb65a4bcd8963b" class="chart-container" style="width:900px; height:500px; "></div>
<script>
var chart_ae170bf12bec45f89fbb65a4bcd8963b = echarts.init(
document.getElementById('ae170bf12bec45f89fbb65a4bcd8963b'), 'white', {renderer: 'canvas'});
var option_ae170bf12bec45f89fbb65a4bcd8963b = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"aria": {
"enabled": false
},
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"series": [
{
"type": "boxplot",
"name": "category0",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
3.8888578346043534,
55.82692798765428,
98.71608835477272,
149.50917642877687,
196.31621070646452
],
[
0.5174326704765253,
47.52990128406776,
103.66600287106233,
160.1380046605997,
194.8294269298398
],
[
2.843900448603165,
51.773788199388605,
90.66830693679475,
152.19938074181786,
196.18172012742428
],
[
2.6752702891334135,
42.85051429480143,
98.54433643572133,
166.81852013033875,
199.7400516615198
],
[
1.665511467481906,
63.069856326089585,
123.20638438572043,
164.0932194814393,
199.56631692214057
],
[
0.3597414263118992,
52.84424125860876,
108.14491539985673,
154.42390255012828,
199.39872381823812
],
[
1.3380322954592128,
41.989379994726335,
100.39118095266713,
160.38742881881478,
197.8251968350275
],
[
1.7005873932608662,
43.88170786936796,
92.29415890464293,
140.7858956683471,
197.50510824352313
],
[
1.7017445023542965,
52.55872982785781,
90.26972335102536,
155.43082163069883,
198.31679368721197
],
[
0.45657888665799895,
47.60747957375436,
95.53917053451289,
162.55256484073354,
199.78317232079928
],
[
1.745438082254136,
53.450845301261964,
95.8847297380051,
143.99885640751006,
195.1863502057908
],
[
2.5631287114048273,
56.04486879215165,
110.01592256847306,
155.33508398386462,
195.90291395560985
],
[
3.4380745785991262,
58.07888602010247,
105.64925213947652,
165.50126442985191,
199.75877487248675
],
[
0.03322930419802361,
53.363159200883985,
95.32936635574816,
151.39772626598614,
198.20394907387762
],
[
0.7063564158257929,
73.89369564248534,
116.6947935806626,
152.93983211466667,
197.1481400480321
],
[
0.9611585600880268,
46.64283650085793,
102.32004406296502,
148.64094149067978,
199.59803470854715
],
[
1.4310036755643463,
50.15631363530299,
102.68128938225942,
147.52573154872948,
197.6018158750086
],
[
0.492994684970105,
43.23619663302313,
99.60815322547333,
140.00299600143438,
198.97693156537883
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
},
{
"type": "boxplot",
"name": "category1",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
1.3866777918670525,
52.723984144413805,
112.16068484025186,
148.07060013196633,
196.6493886555634
],
[
0.8675025485252785,
41.94008605353009,
90.4944101654473,
134.34314089904032,
199.57411732908722
],
[
2.109917782227244,
47.361245156921306,
98.03121935506474,
152.57304498745683,
199.6655667235125
],
[
0.835914742081334,
45.90386054869363,
110.8008994981315,
153.77050147012113,
198.17687983907325
],
[
0.09929780808608513,
55.313979741487245,
80.36049651385588,
144.5076321261422,
198.71007594348265
],
[
4.3591904343687204,
53.098201381124454,
88.8716562277704,
134.2243571501588,
197.86166497124387
],
[
1.4751642002043486,
52.87727910767818,
98.1167484613283,
129.123794134296,
199.26128215126036
],
[
1.0208468961246275,
59.72883452828452,
93.7117188714775,
133.6955646934541,
199.04002574913483
],
[
5.700580454086168,
62.30214699943758,
109.4858546359291,
144.37435834128183,
196.80025087232633
],
[
3.8776389962399627,
47.07485197991684,
108.77911010272065,
143.55929331063112,
199.78963194031576
],
[
0.9206486824532956,
56.531536633466786,
103.22722183226676,
153.71850265606832,
199.26707930050713
],
[
1.2238397462105866,
42.37213742602606,
85.0161099008823,
144.6618761115177,
195.68883739488717
],
[
1.383845313528731,
55.58975449585246,
101.2502031542653,
155.4651069256266,
198.51896538541257
],
[
2.460600698918336,
45.35279677561122,
86.22855211501036,
142.2985968944624,
196.88095181245973
],
[
1.5771786133238486,
47.74919144071982,
98.25948642595273,
143.6080569193598,
199.35657813436302
],
[
1.679597195618454,
54.03099324959242,
93.24925248108138,
156.2197398880975,
199.96087190538344
],
[
0.09445769268561222,
62.987289799985746,
93.5536375308287,
146.10299624484736,
198.89381360902073
],
[
0.5074418255246016,
43.16902467382945,
97.5036007943674,
150.07249687988744,
197.1438186145631
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
},
{
"type": "boxplot",
"name": "category2",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
0.17336583192690824,
38.89251480694969,
95.24827036951726,
144.42455874548153,
199.4034309165705
],
[
3.676663641014155,
56.915752270243615,
116.52533365244228,
154.9613826361874,
199.45242610474344
],
[
0.2637149176087039,
39.10809721270764,
83.11646124189903,
145.85305644883107,
199.4425993969723
],
[
0.9435517891188017,
59.34726771939571,
116.9100457332774,
154.6830501745436,
197.360203327316
],
[
3.979089227580568,
59.55958857930115,
106.50956069508263,
154.19233153204274,
198.27863048295953
],
[
0.2254389425328185,
45.14272916122666,
101.99744565544017,
158.20585382578935,
199.87918467096276
],
[
0.4981747166813655,
55.07500323828029,
98.06775843874871,
142.6740673515219,
196.17733451641203
],
[
3.459413844168191,
48.45434370508197,
90.08287035261958,
144.44636703035508,
196.7330418635301
],
[
5.491046107788211,
51.726853187011294,
102.73451029578627,
144.81711164442441,
198.8867176824325
],
[
0.7550472434538769,
52.51096431201062,
107.88318214869264,
159.26961432919137,
199.61830476130777
],
[
0.2752001848587593,
48.7398963427885,
89.75616732426943,
142.05594236584855,
198.3147751483816
],
[
1.4946063684317945,
47.50894653631401,
98.11186814575922,
138.51943571666908,
193.3052139732351
],
[
0.20882224269564986,
51.28631550804623,
107.81597798598389,
160.02354609263347,
199.2878557923929
],
[
0.8976637474841898,
43.66029575375894,
100.62231619788403,
139.9661197041632,
192.54845617677
],
[
5.859745717489284,
47.03805156535355,
108.41470873842098,
157.096784096105,
199.9179863824041
],
[
3.7257707586363598,
42.231249941095996,
97.356821000705,
142.79191220154834,
198.84036692134
],
[
1.8454208635465985,
44.91333687646406,
98.65350096972611,
143.39018022926803,
199.87483964263296
],
[
0.5514923538800787,
45.85216189462081,
99.9806157446917,
153.32082407525542,
198.2776454910153
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
}
],
"legend": [
{
"data": [
"category0",
"category1",
"category2"
],
"selected": {},
"show": true,
"top": "3%",
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"backgroundColor": "transparent",
"borderColor": "#ccc",
"borderWidth": 1,
"borderRadius": 0,
"pageButtonItemGap": 5,
"pageButtonPosition": "end",
"pageFormatter": "{current}/{total}",
"pageIconColor": "#2f4554",
"pageIconInactiveColor": "#aaa",
"pageIconSize": 15,
"animationDurationUpdate": 800,
"selector": false,
"selectorPosition": "auto",
"selectorItemGap": 7,
"selectorButtonGap": 10
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "shadow"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
},
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 30,
"gridIndex": 0,
"axisLabel": {
"show": true,
"margin": 8,
"formatter": "expr {value}"
},
"inverse": false,
"offset": 0,
"splitNumber": 5,
"boundaryGap": true,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"splitArea": {
"show": true,
"areaStyle": {
"opacity": 1
}
},
"data": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17"
]
}
],
"yAxis": [
{
"type": "value",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"min": -400,
"max": 600,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"splitArea": {
"show": false,
"areaStyle": {
"opacity": 0
}
}
}
],
"title": [
{
"show": true,
"text": "Multiple Categories",
"target": "blank",
"subtarget": "blank",
"left": "center",
"padding": 5,
"itemGap": 10,
"textAlign": "auto",
"textVerticalAlign": "auto",
"triggerEvent": false
}
],
"dataZoom": [
{
"show": true,
"type": "inside",
"showDetail": true,
"showDataShadow": true,
"realtime": true,
"start": 0,
"end": 20,
"orient": "horizontal",
"zoomLock": false,
"filterMode": "filter"
},
{
"show": true,
"type": "slider",
"showDetail": true,
"showDataShadow": true,
"realtime": true,
"start": 20,
"end": 80,
"orient": "horizontal",
"xAxisIndex": 0,
"zoomLock": false,
"filterMode": "filter"
}
]
};
chart_ae170bf12bec45f89fbb65a4bcd8963b.setOption(option_ae170bf12bec45f89fbb65a4bcd8963b);
</script>
</body>
</html>
4. Source code explanation
This code is an HTML page that contains a boxplot drawn using ECharts. This chart has three different categories (category0, category1, category2). Each category contains a set of data, and each set of data is plotted as a box plot.
In this HTML page, the relevant configuration information of ECharts is included in the JavaScript code block, by option_ae170bf12bec45f89fbb65a4bcd8963bdefining the configuration of the chart.
Specific configuration items include:
animation: Control animation-related settings.color: Defines the colors used in the chart.series: Contains the data and configuration of three boxplots.legend: Defines the style and position of the legend.tooltip: Configure the prompt box displayed when the mouse hovers over the data point.xAxisandyAxis: Configure the properties of the X-axis and Y-axis respectively, including axis labels, ranges, etc.title: Defines the title of the chart.
Finally, by chart_ae170bf12bec45f89fbb65a4bcd8963b.setOption(option_ae170bf12bec45f89fbb65a4bcd8963b);applying the configuration to the ECharts chart, a boxplot was generated.
If you have any specific questions or need further explanation, please let me know and I will try to help in more detail.