Add buttons to dataGrid

w3c · Jun 12, 2020 · a5a69ea · a5a69ea
1 parent 35c96c9
commit a5a69ea
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/examples/grid/dataGrids.html b/examples/grid/dataGrids.html
@@ -18,6 +18,7 @@
 <script src="js/menuButton.js" type="text/javascript"></script>
 <script src="js/dataGrid.js" type="text/javascript"></script>
 <script src="js/dataGrids.js" type="text/javascript"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -47,7 +48,9 @@ <h1>Data Grid Examples</h1>
   <section>
     <h2>Examples</h2>
     <section>
-      <h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
+      <div class="example-header">
+        <h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
+      </div>
       <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
       <div id="ex1">
         <h4 id="grid1Label">Transactions January 1 through January 6</h4>
@@ -135,7 +138,9 @@ <h4>Notes</h4>
       </ol>
     </section>
     <section>
-      <h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
+      <div class="example-header">
+        <h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
+      </div>
       <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
       <div id="ex2">
         <h4 id="grid2Label">Transactions January 1 through January 7</h4>
@@ -333,7 +338,9 @@ <h4>Notes</h4>
       </ol>
     </section>
     <section>
-      <h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
+      <div class="example-header">
+        <h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
+      </div>
       <div role="separator" id="ex3_start_sep" aria-labelledby="ex3_start_sep ex3_label" aria-label="Start of"></div>
       <div id="ex3">
         <h4 id="grid3Label">Transactions for January 1 through January 15</h4>
@@ -789,7 +796,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="cssJsFiles">
       <li>CSS:
         <ul>
           <li><a href="css/dataGrids.css" type="tex/css">dataGrids.css</a></li>
@@ -812,19 +819,19 @@ <h3 id="sc1_label">Example 1: Minimal Data Grid</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc1', 'ex1')</script>
+    <script>sourceCode.add('sc1', 'ex1', 'ex1_label', 'cssJsFiles')</script>
 
     <h3 id="sc2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc2', 'ex2')</script>
+    <script>sourceCode.add('sc2', 'ex2', 'ex2_label', 'cssJsFiles')</script>
 
     <h3 id="sc3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
     <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc3"></code></pre>
     <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc3', 'ex3') </script>
+    <script>sourceCode.add('sc3', 'ex3', 'ex3_label', 'cssJsFiles') </script>
     <!--  After all source has been added, run make to do the insert.  -->
     <script> sourceCode.make(); </script>
   </section>