Updated 1.14 Popup filters (markdown)

1.14-Popup-filters.md

@@ -12,71 +12,132 @@
   <tbody>
     <tr> 
       <th>popup_filters</th>
-      <td>boolean</td>
+      <td>boolean|object</td>
       <td>enables / disables popup filters type, filters 
           will popup when a filter icon placed near the column header is clicked 
           (default - false)</td>
       <td></td>
-      <td><code>var tfConfig = { popup_filters: true }</code></td>
+      <td>
+         <pre>
+var tfConfig = { popup_filters: true };
+// or
+var tfConfig = { 
+  popup_filters: {} 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_filters_close_on_filtering</th>
+      <th>close_on_filtering</th>
       <td>boolean</td>
       <td>closes active popup filter upon filtering (default - true)</td>
       <td>Multiple selection filter types will remain open to allow user to choose other options upon filtering</td>
-      <td><code>var tfConfig = { popup_filters_close_on_filtering: false };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    close_on_filtering: false
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_filters_image</th>
+      <th>image</th>
       <td>string</td>
       <td>sets the path to the filter icon placed in the header. It
         toggles the popup filter for that column (default - 'style/themes/icn_filter.gif')</td>
       <td></td>
-      <td><code>var tfConfig = { popup_filters_image: 'myDir/my_filterIcon.png' 
+      <td>
-        }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    image: 'myDir/my_filterIcon.png'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_filters_image_active</th>
+      <th>image_active</th>
       <td>string</td>
       <td>sets the path to the filter icon when active (default 
         - 'style/themes/icn_filterActive.gif')</td>
       <td></td>
-      <td><code>var tfConfig = { popup_filters_image_active: 'myDir/my_filterIconActive.png' 
+      <td>
-        }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    image_active: 'myDir/my_filterIconActive.png'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_filters_image_html</th>
+      <th>image_html</th>
       <td>string</td>
       <td>sets the HTML of the filter icon placed in the header 
         (default - '&lt;img src=&quot;'+ this.popUpImgFlt +'&quot; alt=&quot;Column 
         filter&quot; /&gt;') </td>
       <td>Note that the onclick event is added automatically to the html element and overwrites any onclick attribute</td>
-      <td><code>var tfConfig = { popup_filters_image_html: '&lt;img src=&quot;myDir/my_filterIcon.png&quot; 
+      <td>
-        alt=&quot;Toggle filters&quot;/&gt;' }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    image_html: '<img src="myDir/my_filterIcon.png" alt="Toggle filters"/>'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_placeholder_css_class</th>
+      <th>placeholder_css_class</th>
       <td>string</td>
       <td>defines the css class for the container of the popup element (default 
         - 'popUpPlaceholder')</td>
       <td></td>
-      <td><code>var tfConfig = { popup_placeholder_css_class: 'myCssClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    placeholder_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
-      <th>popup_div_css_class</th>
+      <th>div_css_class</th>
       <td>string</td>
       <td>defines the css class for the popup element containing the column filter (default 
         - 'popUpFilter')</td>
       <td></td>
-      <td><code>var tfConfig = { popup_div_css_class: 'myCssClass' }</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    popup_div_css_class: 'myCssClass'
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr>
     <tr> 
-      <th>popup_filters_adjust_to_container</th>
+      <th>adjust_to_container</th>
       <td>boolean</td>
       <td>ensures filter's popup container element width matches column width (default - true)</td>
       <td></td>
-      <td><code>var tfConfig = { popup_filters_adjust_to_container: false };</code></td>
+      <td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    adjust_to_container: false
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>on_before_popup_filter_open</th>
@@ -85,12 +146,21 @@
         is opened (default - null)</td>
       <td><p>Note that 3 parameters are sent to callback function:</p>
         <ul>
-          <li>o is the current TableFilter instance</li>
+          <li>tf is the current TableFilter instance</li>
           <li>popupElm is the element containing the filter</li>
           <li>colIndex is the column index</li>
         </ul></td>
-      <td><code>var tfConfig = { on_before_popup_filter_open: function(o,popupElm,colIndex){alert(o 
+      <td>
-        +' '+ popupElm +' '+ colIndex); } }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    on_before_popup_filter_open: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>on_after_popup_filter_open</th>
@@ -99,12 +169,21 @@
         opened (default - null)</td>
       <td><p>Note that 3 parameters are sent to callback function:</p>
         <ul>
-          <li>o is the current TableFilter instance</li>
+          <li>tf is the current TableFilter instance</li>
           <li>popupElm is the element containing the filter</li>
           <li>colIndex is the column index</li>
         </ul></td>
-      <td><code>var tfConfig = { on_after_popup_filter_open: function(o,popupElm,colIndex){alert(o 
+      <td>
-        +' '+ popupElm +' '+ colIndex); } }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    on_after_popup_filter_open: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>on_before_popup_filter_close</th>
@@ -113,12 +192,21 @@
         is closed (default - null)</td>
       <td><p>Note that 3 parameters are sent to callback function:</p>
         <ul>
-          <li>o is the current TableFilter instance</li>
+          <li>tf is the current TableFilter instance</li>
           <li>popupElm is the element containing the filter</li>
           <li>colIndex is the column index</li>
         </ul></td>
-      <td><code>var tfConfig = { on_before_popup_filter_close: function(o,popupElm,colIndex){alert(o 
+      <td>
-        +' '+ popupElm +' '+ colIndex); } }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    on_before_popup_filter_close: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
     <tr> 
       <th>on_after_popup_filter_close</th>
@@ -127,12 +215,21 @@
         closed (default - null)</td>
       <td><p>Note that 3 parameters are sent to callback function:</p>
         <ul>
-          <li>o is the current TableFilter instance</li>
+          <li>tf is the current TableFilter instance</li>
           <li>popupElm is the element containing the filter</li>
           <li>colIndex is the column index</li>
         </ul></td>
-      <td><code>var tfConfig = { on_after_popup_filter_close: function(o,popupElm,colIndex){alert(o 
+      <td>
-        +' '+ popupElm +' '+ colIndex); } }</code></td>
+         <pre>
+var tfConfig = { 
+  popup_filters: {
+    on_after_popup_filter_close: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+        </pre>
+      </td>
     </tr>
   </tbody>
 </table>