Added first example code

rudmanmrrod · Jul 4, 2017 · 7e9b6e9 · 7e9b6e9
1 parent a0b45d2
commit 7e9b6e9
Show file tree

Hide file tree

Showing 29 changed files with 16,864 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link href="materialize/css/materialize.css" rel="stylesheet" type="text/css">
+ <script src="jquery.min.js" type="text/javascript"></script>
+ <script src="materialize/js/materialize.js" type="text/javascript"></script>
+ <script src="material-dialog.js" type="text/javascript"></script>
+ <style>
+ ul:not(.browser-default) {
+ padding-left: 0;
+ /* list-style-type: none; */
+ }
+ ul:not(.browser-default) li {
+ /* list-style-type: none; */
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <h1 class="center">Materialize Dialog</h1><hr>
+ <p>A simple library tinked to easy Materialize JavaScript Modals</p>
+
+ <h4>Alert</h4>
+ <p>Usage Example</p>
+
+ <pre>
+MaterialDialog.alert(
+ 'Message', // Alert Body (Acepts html tags)
+ {
+ title:'Alert Modal', // Modal title
+ buttons:{ // Receive buttons (Alert only use close buttons)
+ close:{
+ text:'close', //Text of close button
+ className:'red', // Class of the close button
+ callback:function(){ // Function for modal click
+ alert("hello")
+ }
+ }
+ }
+ }
+);
+ </pre>
+ <div class="center">
+ <h5>Example</h5>
+ <button class="btn" onclick="alert_example();">Click Here</button>
+ </div>
+ <p>Options</p>
+ <table class="responsive-table bordered">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>title</th>
+ <td>Modal's Title</td>
+ </tr>
+ <tr>
+ <th>buttons
+ <ul>
+ <li>close</li>
+ <ul>
+ <li>text</li>
+ <li>className</li>
+ <li>modalClose</li>
+ <li>callback</li>
+ </ul>
+ </ul>
+ </th>
+ <td>
+ <ul>
+ <li><br/></li>
+ <ul>
+ <li>Receive de text of the close button</li>
+ <li>Receive close button class</li>
+ <li>true/false Closes modal on button click (default true)</li>
+ <li>Receive a function as callback for button click</li>
+ </ul>
+ </ul>
+ </td>
+
+ </tr>
+ </tbody>
+ </table>
+ <h4>Dialog</h4>
+ <p>Usage Example</p>
+ <pre>
+MaterialDialog.dialog(
+ "Text here",
+ {
+ title:"Dialog Title",
+ modalType:"modal-fixed-footer", // Can be empty, modal-fixed-footer or bottom-sheet
+ buttons:{
+ // Use by default close and confirm buttons
+ close:{
+ className:"red",
+ text:"closed",
+ callback:function(){
+ alert("closed!");
+ }
+ },
+ confirm:{
+ className:"blue",
+ text:"confirmed",
+ modalClose:false,
+ callback:function(){
+ console.log("confirmed");
+ }
+ }
+ }
+ }
+);
+ </pre>
+ <div class="center">
+ <h5>Example</h5>
+ <button class="btn" onclick="dialog_example();">Click Here</button>
+ </div>
+
+ <p>Options</p>
+ <table class="responsive-table bordered">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>title</th>
+ <td>Modal's Title</td>
+ </tr>
+ <tr>
+ <th>buttons
+ <ul>
+ <li>close</li>
+ <ul>
+ <li>text</li>
+ <li>className</li>
+ <li>modalClose</li>
+ <li>callback</li>
+ </ul>
+ <li>confirm</li>
+ <ul>
+ <li>text</li>
+ <li>className</li>
+ <li>modalClose</li>
+ <li>callback</li>
+ </ul>
+ </ul>
+ </th>
+ <td>
+ <ul>
+ <li><br/></li>
+ <ul>
+ <li>Receive de text of the close button</li>
+ <li>Receive close button class</li>
+ <li>true/false Closes modal on button click (default true)</li>
+ <li>Receive a function as callback for button click</li>
+ </ul>
+ <li><br/></li>
+ <ul>
+ <li>Receive de text of the close button</li>
+ <li>Receive close button class</li>
+ <li>true/false Closes modal on button click (default true)</li>
+ <li>Receive a function as callback for button click</li>
+ </ul>
+ </ul>
+ </td>
+
+ </tr>
+ </tbody>
+ </table>
+ <h4>Extra</h4>
+ <p>In options part, you can pass any materialize modal property's</p>
+ <pre>
+MaterialDialog.alert(
+ 'Message', // Alert Body (Acepts html tags)
+ {
+ title:'Alert Modal', // Modal title
+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
+ opacity: .5, // Opacity of modal background
+ inDuration: 300, // Transition in duration
+ outDuration: 200, // Transition out duration
+ startingTop: '4%', // Starting top style attribute
+ endingTop: '10%', // Ending top style attribute
+ ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters alert("Ready");
+ console.log(modal, trigger);
+ },
+ complete: function() { alert('Closed'); } // Callback for Modal close
+ }
+);
+ </pre>
+ <div class="center">
+ <h5>Example</h5>
+ <button class="btn" onclick="material_property();">Click Here</button>
+ </div>
+ </div>
+ <script>
+ function alert_example(){
+ MaterialDialog.alert(
+ 'Message',
+ {
+ title:'Alert Modal',
+ buttons:{
+ close:{
+ text:'close',
+ className:'red',
+ callback:function(){
+ alert("hello")
+ }
+ }
+ }
+ }
+ );
+ }
+ function dialog_example(){
+ MaterialDialog.dialog(
+ "Text here",
+ {
+ title:"Dialog Title",
+ modalType:"modal-fixed-footer",
+ buttons:{
+ close:{
+ className:"red",
+ text:"closed",
+ callback:function(){
+ alert("closed!");
+ }
+ },
+ confirm:{
+ className:"blue",
+ text:"confirmed",
+ modalClose:false,
+ callback:function(){
+ console.log("confirmed");
+ }
+ }
+ }
+ }
+ );
+ }
+ function material_property(){
+ MaterialDialog.alert(
+ 'Message', // Alert Body (Acepts html tags)
+ {
+ title:'Alert Modal', // Modal title
+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
+ opacity: .5, // Opacity of modal background
+ inDuration: 300, // Transition in duration
+ outDuration: 200, // Transition out duration
+ startingTop: '4%', // Starting top style attribute
+ endingTop: '10%', // Ending top style attribute
+ ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters alert("Ready");
+ console.log(modal, trigger);
+ },
+ complete: function() { alert('Closed'); } // Callback for Modal close
+ }
+ ); 
+ }
+ </script>
+ </body>
+</html>
diff --git a/jquery.min.js b/jquery.min.js