Added docs for rich content in Dialogs

johannesboyne · Feb 7, 2012 · 4d720c5 · 4d720c5
1 parent 8358a21
commit 4d720c5
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -345,6 +345,41 @@ <h3>Auto-closing</h3>
               <li><a href="#" class="effect-fade">fade</a></li>
               <li><a href="#" class="effect-scale">scale</a></li>
             </ul>
+
+            <h3>Rich content</h3>
+            <p>Dialogs are of course not limited to the textual content mentioned so far, HTML, jQuery objects, or other UIKit components may also be passed.</p>
+
+            <script>
+            $(function(){
+              $('#dialog-html').click(function(e){
+                e.preventDefault();
+                ui.dialog('HTML', 'Just a <strong>string</strong> of <em>HTML</em>.')
+                  .closable()
+                  .show();
+              });
+
+              $('#dialog-jquery').click(function(e){
+                e.preventDefault();
+                ui.dialog('jQuery object', $('Just a <strong>string</strong> of <em>HTML</em>.'))
+                  .closable()
+                  .show();
+              });
+
+              $('#dialog-colorpicker').click(function(e){
+                e.preventDefault();
+                var picker = new ui.ColorPicker;
+                ui.dialog('UIKit component', picker)
+                  .closable()
+                  .show();
+              });
+            });
+            </script>
+
+            <ul>
+              <li><a href="#" id="dialog-html">HTML</a></li>
+              <li><a href="#" id="dialog-jquery">jQuery object</a></li>
+              <li><a href="#" id="dialog-colorpicker">ColorPicker</a></li>
+            </ul>
         </section>
       </section>