<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Picker by ustbhuangyi</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="../docs/stylesheets/normalize.css" media="screen"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="../docs/stylesheets/github-light.css" media="screen"> <link rel="stylesheet" type="text/css" href="../docs/stylesheets/stylesheet.css" media="screen"> </head> <body> <section class="page-header"> <h1 class="project-name">Picker</h1> <h2 class="project-tagline">h5 picker inspired by ios UIPickerView</h2> <a href="https://github.com/ustbhuangyi/picker" class="btn">View on GitHub</a> <a href="https://github.com/ustbhuangyi/picker/zipball/master" class="btn">Download .zip</a> <a href="https://github.com/ustbhuangyi/picker/tarball/master" class="btn">Download .tar.gz</a> </section> <section class="main-content"> <h3>单列筛选器</h3> <div id="picker1">点击选择</div> <h3>两列筛选器</h3> <div id="picker2">点击选择</div> <h3>三列选择器</h3> <div id="picker3">点击选择</div> <h3>变化选择器</h3> <div id="picker4">每次点击数据源变化</div> <h3>城市联动选择器</h3> <div id="picker5">每次点击数据联动</div> <footer class="site-footer"> <span class="site-footer-owner"><a href="https://github.com/ustbhuangyi/picker">Picker</a> is maintained by <a href="https://github.com/ustbhuangyi">ustbhuangyi</a>.</span> <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span> </footer> </section> </body> <script src="../dist/picker.min.js"></script> <script> var data1 = [ { text: '剧毒', value: 1 }, { text: '蚂蚁', value: 2 }, { text: '幽鬼', value: 3 }, { text: '主宰', value: 4 }, { text: '卡尔', value: 5 }, { text: '宙斯', value: 6 }, { text: '巫医', value: 7 }, { text: '巫妖', value: 8 }, { text: '神谕者', value: 9 }, { text: '撼地神牛', value: 10 }, { text: '蓝胖子', value: 11 }, { text: '水晶室女', value: 12 }, { text: '莉娜', value: 13 }, { text: '斯拉克', value: 14 }, { text: '斯拉达', value: 15 } ]; var data2 = [ { text: '输出', value: 'a' }, { text: '控制', value: 'b' }, { text: '核心', value: 'c' }, { text: '爆发', value: 'd' }, { text: '辅助', value: 'e' }, { text: '打野', value: 'f' }, { text: '逃生', value: 'g' }, { text: '先手', value: 'h' }, ]; var data3 = [ { text: '梅肯', value: 's' }, { text: '秘法鞋', value: 'ss' }, { text: '假腿', value: 'sss' }, { text: '飞鞋', value: 'ssss' }, { text: '辉耀', value: 'sssss' }, { text: '金箍棒', value: 'ssssss' } ]; var picker1El = document.getElementById('picker1'); var picker2El = document.getElementById('picker2'); var picker3El = document.getElementById('picker3'); var picker4El = document.getElementById('picker4'); var picker1 = new Picker({ data: [data1] }); picker1.on('picker.select', function (selectedVal, selectedIndex) { picker1El.innerText = data1[selectedIndex[0]].text; }); picker1.on('picker.change', function (index, selectedIndex) { console.log(index); }); picker1.on('picker.valuechange', function (selectedVal, selectedIndex) { console.log(selectedVal); }); var picker2 = new Picker({ data: [data1, data2] }); picker2.on('picker.select', function (selectedVal, selectedIndex) { picker2El.innerText = data1[selectedIndex[0]].text + ' ' + data2[selectedIndex[1]].text; }); picker2.on('picker.change', function (index, selectedIndex) { console.log(index); }); picker2.on('picker.valuechange', function (selectedVal, selectedIndex) { console.log(selectedVal); }); var picker3 = new Picker({ title: '我们都爱打dota', data: [data1, data2, data3] }); picker3.on('picker.select', function (selectedVal, selectedIndex) { picker3El.innerText = data1[selectedIndex[0]].text + ' ' + data2[selectedIndex[1]].text + ' ' + data3[selectedIndex[2]].text; }); picker3.on('picker.change', function (index, selectedIndex) { console.log(index); }); picker3.on('picker.valuechange', function (selectedVal, selectedIndex) { console.log(selectedVal); }); picker1El.addEventListener('click', function () { picker1.show(); }); picker2El.addEventListener('click', function () { picker2.show(); }); picker3El.addEventListener('click', function () { picker3.show(); }); var data = [data1, data2, data3]; var index = 0; var picker4 = new Picker({ data: [data[index]] }); picker4.on('picker.select', function (selectedVal, selectedIndex) { picker4El.innerText = data[index][selectedIndex[0]].text; }); picker4.on('picker.change', function (index, selectedIndex) { console.log(index); }); picker4.on('picker.valuechange', function (selectedVal, selectedIndex) { console.log(selectedVal); }); picker4El.addEventListener('click', function () { index++; index = index % 3; picker4.show(function () { picker4.refill([data[index]]); }); }); </script> <script type="text/javascript" src="city.js"></script> <script type="text/javascript" src="index.js"></script> </html>