/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
1.0.0-beta
test/html/chips.html
122 строки
4 KB
Chang Alan
added some namespacing to chip events
22 окт 2016, 05:20
22 окт 2016, 05:20
7c1b410
Код
Авторство
О чём код?
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <title>Materialize - Documentation</title> <!-- Favicons --> <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"> <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"> <!-- Android 5 Chrome Color --> <meta name="theme-color" content="#EE6E73"> <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" /> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />--> <!-- <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>--> <link href="../../../css/prism.css" rel="stylesheet" /> </head> <body> <body> <br> <div class="container"> <div class="row"> <div class="col s12"> <a id="newData" class="waves-effect waves-light btn">Add new tag data</a> <a id="getData" class="waves-effect waves-light btn">Get current tag data</a> </div> </div> <form> <div class="row"> <div class="col s6 offset-s6"><b class="white-text">Default:</b></div> </div> <div class="row"> <div class="input-field col s6"> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> </div> <div class="input-field col s6"> <div class="chips chips-data"></div> <label for="chips">Tags</label> </div> </div> </form> <form class="modified"> <div class="row"> <div class="col s6 offset-s6"><b class="white-text">Modified proposal:</b></div> </div> <div class="row"> <div class="input-field col s4"> <i class="material-icons prefix">phone</i> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> </div> <div class="input-field col s4"> <i class="material-icons prefix">bookmark</i> <div class="chips first"></div> <label for="chips-1">Tags</label> </div> <div class="input-field col s4"> <i class="material-icons prefix">bookmark</i> <div class="chips second chips-data"></div> <label for="chips-2">Tags</label> </div> </div> </form> </div> </body> <!-- Scripts--> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../../bin/materialize.js"></script> <!-- <script src="js/velocity.min.js"></script>--> <!-- <script src="js/leanModal.js"></script>--> <script type="text/javascript"> $( document ).ready(function() { $('.chips:not(.chips-data)').material_chip({ data: [{ tag: "Tag" }] }) $('.chips.chips-data').material_chip({ data: [{ tag: 'Apple', }, { tag: 'Microsoft', }, { tag: 'Google', }], placeholder: 'Enter a tag', secondaryPlaceholder: '+Tag', }) $('#newData').click(function () { $('.chips.chips-data').material_chip({ data: [{ tag: 'New Data 1', }, { tag: 'New Data 2', }, { tag: 'New Data 3', }], placeholder: 'Enter a tag', secondaryPlaceholder: '+Tag', }) }); $('#getData').click(function () { console.log($('.chips.chips-data').material_chip('data')); }); }); </script> </body> </html>