|
|
| Line 2: |
Line 2: |
| | {{Template:Team:Potsdam/MaterializeJS}} | | {{Template:Team:Potsdam/MaterializeJS}} |
| | <html> | | <html> |
| − | <head> | + | <head> |
| − | <style> | + | <style> |
| − | div#sideMenu {display:none!important;} | + | div#sideMenu {display:none!important;} |
| − | div#content {width:100%!important; padding:0px!important; margin:0px} | + | div#content {width:100%!important; padding:0px!important; margin:0px} |
| − | div#top_title {display:none!important;} | + | div#top_title {display:none!important;} |
| | + | </style> |
| | + | </head> |
| | + | <body> |
| | + | <script> |
| | + | |
| | + | </script> |
| | | | |
| − | </style> | + | <a class="btn btn-floating pulse"><i class="material-icons">menu</i></a> |
| | + | <a class="btn btn-floating btn-large pulse"><i class="material-icons">cloud</i></a> |
| | + | <a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a> |
| | | | |
| − | </head>
| |
| − | <body>
| |
| − | <p id="demo"></p>
| |
| − | <script>
| |
| − |
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $('.carousel').carousel();
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $('.scrollspy').scrollSpy();
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $('ul.tabs').tabs();
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
| |
| − | $('.modal').modal();
| |
| − | });
| |
| − | $(document).ready(function(){
| |
| − | // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
| |
| − | $('.modal1').modal();
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | <div class="row">
| |
| − | <div class="col s12 m9 l10">
| |
| − | <div id="introduction" class="section scrollspy">
| |
| − | <p>Content </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div style="position: fixed" class=" col hide-on-small-only m3 l2">
| |
| − | <ul class="section table-of-contents">
| |
| − | <li><a href="#introduction">Introduction</a></li>
| |
| − | <li><a href="#structure">Structure</a></li>
| |
| − | <li><a href="#initialization">Intialization</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | <br/>
| |
| − | <br/>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <a class="waves-effect waves-light btn" onclick="$('.tap-target').tapTarget('open');">Open tap target</a>
| |
| − | <!-- Element Showed -->
| |
| − | <a id="menu" class="waves-effect waves-light btn btn-floating" style="right-align"><i class="material-icons">menu</i></a>
| |
| − |
| |
| − | <!-- Tap Target Structure -->
| |
| − | <div class="tap-target " data-activates="menu">
| |
| − | <div class="tap-target-content">
| |
| − | <h5>Title</h5>
| |
| − | <p>A bunch of text</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <a class="waves-effect waves-light btn-large" href="#">Wave</a>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − |
| |
| − | <a class="waves-effect waves-light btn" onclick="Materialize.toast('I am a toast', 4000)">Toast me!</a>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <!-- Dropdown Trigger -->
| |
| − | <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
| |
| − |
| |
| − | <!-- Dropdown Structure -->
| |
| − | <ul id='dropdown1' class='dropdown-content'>
| |
| − | <li><a href="#!">one</a></li>
| |
| − | <li><a href="#!">two</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#!">three</a></li>
| |
| − | <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
| |
| − | <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
| |
| − | </ul>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − |
| |
| − | <div id="structure" class="section scrollspy">
| |
| − | <p>Content </p>
| |
| − | </div>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <div class="carousel">
| |
| − | <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
| |
| − | <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
| |
| − | <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
| |
| − | <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
| |
| − | <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
| |
| − | </div>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − |
| |
| − | <ul class="collapsible popout" data-collapsible="accordion">
| |
| − | <li>
| |
| − | <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
| |
| − | <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
| |
| − | </li>
| |
| − | <li>
| |
| − | <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
| |
| − | <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
| |
| − | </li>
| |
| − | <li>
| |
| − | <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
| |
| − | <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
| |
| − | </li>
| |
| − | </ul>
| |
| − |
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <!-- Modal Trigger -->
| |
| − | <a class="waves-effect waves-light btn" href="#modal1">Modal</a>
| |
| − |
| |
| − | <!-- Modal Structure -->
| |
| − | <div id="modal1" class="modal bottom-sheet">
| |
| − | <div class="modal-content">
| |
| − | <h4>Modal Header</h4>
| |
| − | <p>A bunch of text</p>
| |
| − | </div>
| |
| − | <div class="modal-footer">
| |
| − | <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="col s12">
| |
| − | <ul class="tabs">
| |
| − | <li class="tab col s3"><a href="#test1">Test 1</a></li>
| |
| − | <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
| |
| − | <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
| |
| − | <li class="tab col s3"><a href="#test4">Test 4</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div id="test1" class="col s12">Test 1</div>
| |
| − | <div id="test2" class="col s12">Test 2</div>
| |
| − | <div id="test3" class="col s12">Test 3</div>
| |
| − | <div id="test4" class="col s12">Test 4</div>
| |
| − | </div>
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − |
| |
| − | <div id="initialization" class="section scrollspy">
| |
| − | <p>Content </p>
| |
| − | </div>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − |
| |
| − | <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
| |
| − | <ul>
| |
| − | <li style="opacity: 0;"><a href="#test1">Test 1</a></li>
| |
| − | <li style="opacity: 0;"><a class="active" href="#test2">Test 2</a></li>
| |
| − | <li style="opacity: 0;"><a href="#test4">Test 4</a></li>
| |
| − | </ul>
| |
| − |
| |
| − | <br/>
| |
| − | <br/> <br/>
| |
| − | <br/> <br/>
| |
| − | <br/>
| |
| − | <!-- Modal Trigger -->
| |
| − | <a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a>
| |
| − |
| |
| − | <!-- Modal Structure -->
| |
| − | <div id="modal1" class="modal modal-fixed-footer">
| |
| − | <div class="modal-content">
| |
| − | <h4>Modal Header</h4>
| |
| − | <p>A bunch of text</p>
| |
| − | </div>
| |
| − | <div class="modal-footer">
| |
| − | <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| | | | |
| | | | |
| | + | |
| | + | </body> |
| | </html> | | </html> |
