城市选择插件picker源码

<!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>
posted @ 2017-08-04 17:15 欧辰0312 阅读(468) 评论(0) 收藏举报
刷新页面返回顶部
欧辰0312

城市选择插件picker源码

公告
