Javascript Widget examples

Javascript widged

Date selection example I.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!-- link rel="stylesheet" href="/resources/demos/style.css" -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Note: You can use <input type="date">, and the datepicker will be generated by your browser (i.e. Firefox, Chrome).

Graph example II.

https://plot.ly/javascript/pie-charts/

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- Numeric JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    var data = [{
        values: [19, 26, 55],
        labels: ['Residential', 'Non-Residential', 'Utility'],
        type: 'pie'
      }];
    Plotly.newPlot('myDiv', data);
  </script>
</body>

Plotly was opensource. Now, it is part of all main browsers, so you can it without linking the source.

Equation example III.

https://www.mathjax.org/

<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({  
		TeX: {
		 equationNumbers: { autoNumber: "AMS"} 
		 } });
  </script>
 <script type="text/x-mathjax-config">
    MathJax.Hub.Config({  
		tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]
		}  });
  </script>
  <script type="text/javascript">    
    MathJax.Hub.Config({    
      extensions: ["tex2jax.js"],    
      "HTML-CSS": { scale: 95}    
    });    
  </script>
</head>

<body bgcolor="#FFFFFF">
 <h2>Equation:</h2>
<p>
\begin{equation}
 z\small{(t)}=y \small{(t)}^2 \cdot sin \small{(y(t)})
\end{equation}
</p>
</body></html>

Javascript html editor example IV.

https://blog.smartbear.com/programming/five-free-javascript-libraries-to-add-text-editing-to-your-web-application/

http://www.themaninblue.com/experiment/widgEditor/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Man in Blue &gt; Experiments &gt; widgEditor</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">
	@import "css/info.css";
	@import "css/main.css";
	@import "css/widgEditor.css";
</style>
<script type="text/javascript" src="scripts/widgEditor.js"></script>
</head>

<body>
<div id="content"><br>
<h2>widgEditor</h2>
<p></p>
<form action="submit.php" onsubmit="alert('Your submitted HTML was:\n\n'
   + document.getElementById('noise').value); return false;">
	<fieldset>
		<label for="noise">
			Make some noise:
		</label>
		<textarea id="noise" name="noise" class="widgEditor nothing">
        &lt;p&gt;widgEditor &lt;strong&gt;automatically&lt;/strong&gt;
         integrates the content that was in the textarea!&lt;/p&gt;</textarea>
	</fieldset>
	<fieldset class="submit">
		<input type="submit" value="Check the submitted code" />
	</fieldset>
</form>
</div>
</body></html>

Visit a graphics object gallery. Click to any demo to see the source.

Try to find some interesting Javascript functions on the web. Try to construct your own web page when using them.