{"_id":"@autofe/carpicker","_rev":"7-a6b3e485d9ec49b2f48d23b820c4cdce","name":"@autofe/carpicker","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@autofe/carpicker","version":"0.1.0","keywords":["library","autohome","carpicker"],"author":{"name":"jpuncle","email":"zhangxingkai@autohome.com.cn"},"license":"MIT","_id":"@autofe/carpicker@0.1.0","maintainers":[{"name":"jpuncle","email":"jack_zhxk@163.com"}],"homepage":"https://github.com/athm-fe/carpicker#readme","bugs":{"url":"https://github.com/athm-fe/carpicker/issues"},"dist":{"shasum":"6d6af32d913a213ffe55f39c185b83057fc128ed","tarball":"https://registry.npmjs.org/@autofe/carpicker/-/carpicker-0.1.0.tgz","integrity":"sha512-bq85RhvCWls8LoLNKM3QbeNTQDI2E/ure9cLh0ZvTJeEd6HX2hfCOTDcfgdwZOF42bYwpSE+JbjTVYJ8rdFdfg==","signatures":[{"sig":"MEUCIQDsroTNCJLjYGZIv2cDAzCJTcPOFyxHBtl5AzeRXEOgqgIgKbl/EVOnMtXaw/Eo26HaEALxdfmzD1AbL3rC+JmUqsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/carpicker.js","files":["lib","dist"],"module":"src/index.js","gitHead":"049ea26245823c8afb3035f1cc3b5d70fead1be3","scripts":{"lint":"eslint lib test","test":"echo \"Error: no test specified\" && exit 1","build":"npm run lint && rollup -c ./rollup.config.js","minify":"uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/carpicker.min.js dist/carpicker.js","release":"npm run build && npm run minify"},"_npmUser":{"name":"jpuncle","email":"jack_zhxk@163.com"},"repository":{"url":"git+https://github.com/athm-fe/carpicker.git","type":"git"},"_npmVersion":"5.6.0","description":"A Carpicker library based on jQuery","directories":{},"_nodeVersion":"8.6.0","dependencies":{"jquery":"^3.2.1"},"devDependencies":{"eslint":"^4.15.0","rollup":"^0.54.0","uglify-js":"^3.3.7","babel-core":"^6.26.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","babel-preset-autofe-app":"^1.2.0","rollup-plugin-node-resolve":"^3.0.2"},"_npmOperationalInternal":{"tmp":"tmp/carpicker-0.1.0.tgz_1517886100936_0.5169361887965351","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@autofe/carpicker","version":"0.2.0","keywords":["library","autohome","carpicker"],"author":{"name":"jpuncle","email":"zhangxingkai@autohome.com.cn"},"license":"MIT","_id":"@autofe/carpicker@0.2.0","maintainers":[{"name":"jpuncle","email":"jack_zhxk@163.com"},{"name":"mercysnake","email":"lonjas@163.com"}],"homepage":"https://github.com/athm-fe/carpicker#readme","bugs":{"url":"https://github.com/athm-fe/carpicker/issues"},"dist":{"shasum":"479a512382b0f67ec6b3db49037e153a7afd32c1","tarball":"https://registry.npmjs.org/@autofe/carpicker/-/carpicker-0.2.0.tgz","fileCount":7,"integrity":"sha512-ZN+VhVFyNQJLgDOc3w5WQSrQkdcMBAUI7/NMNHm5wHPhf9DpRXtgwdXGTiscDXiZvcQ3wnD+RLxw4tZJbbNY9A==","signatures":[{"sig":"MEUCIAtf5suTGtR/5uvaxwbWc20z/KxcQPAL2CCrJ/F1dZpsAiEA0uK3TXDwV0QEU0/u0IxxI8Znac0ufaNhVQ3aLYtXTCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44365},"main":"dist/carpicker.js","files":["lib","dist"],"module":"src/index.js","gitHead":"c07ad85fe49b082602961b15af26325e06c38f10","scripts":{"lint":"eslint lib test","test":"echo \"Error: no test specified\" && exit 1","build":"npm run lint && rollup -c ./rollup.config.js","minify":"uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/carpicker.min.js dist/carpicker.js","release":"npm run build && npm run minify"},"_npmUser":{"name":"mercysnake","email":"lonjas@163.com"},"repository":{"url":"git+https://github.com/athm-fe/carpicker.git","type":"git"},"_npmVersion":"5.3.0","description":"A Carpicker library based on jQuery","directories":{},"_nodeVersion":"8.4.0","dependencies":{"jquery":"^3.2.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^4.15.0","rollup":"^0.54.0","uglify-js":"^3.3.7","babel-core":"^6.26.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","babel-preset-autofe-app":"^1.2.0","rollup-plugin-node-resolve":"^3.0.2"},"_npmOperationalInternal":{"tmp":"tmp/carpicker_0.2.0_1518145753900_0.4011650418412396","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-02-06T03:01:41.058Z","modified":"2026-01-14T03:50:10.979Z","0.1.0":"2018-02-06T03:01:41.058Z","0.2.0":"2018-02-09T03:09:14.027Z"},"bugs":{"url":"https://github.com/athm-fe/carpicker/issues"},"author":{"name":"jpuncle","email":"zhangxingkai@autohome.com.cn"},"license":"MIT","homepage":"https://github.com/athm-fe/carpicker#readme","keywords":["library","autohome","carpicker"],"repository":{"url":"git+https://github.com/athm-fe/carpicker.git","type":"git"},"description":"A Carpicker library based on jQuery","maintainers":[{"email":"jack_zhxk@163.com","name":"jpuncle"},{"email":"lonjas@163.com","name":"mercysnake"}],"readme":"# Carpicker\n\n## HTML\n\n选择品牌、车系、车型下拉框有三种形式\n* 品牌、车系、车型共用一个下拉框\n* 品牌、车系共用一个下拉框，车型单独使用一个下拉框\n* 品牌、车系、车型各自使用下拉框\n\n\n```html\n<!-- 品牌、车系、车型共用一个下拉框 -->\n<div class=\"athm-select\" id=\"js-select-simple\" data-toggle=\"carpicker\">\n  <div class=\"athm-select__selected\" data-select-picker>\n    <span class=\"athm-select__text\" data-select-value>选择品牌</span>\n    <span class=\"athm-select__icon\">\n      <i class=\"athm-iconfont athm-iconfont-arrowdown\"></i>\n    </span>\n  </div>\n  <div class=\"athm-select__option\" data-select-dropdown>\n    <div class=\"pop-wrapper\">\n      <!-- 区别主要在这里，剩下的工作就交给了样式实现 -->\n      <div class=\"brand\" data-select-brand></div>\n      <div class=\"series\" data-select-series></div>\n      <div class=\"spec\" data-select-spec></div>\n    </div>\n  </div>\n</div>\n\n<!-- 品牌、车系共用一个下拉框 -->\n<div class=\"athm-select\" id=\"js-select-brand\" data-toggle=\"carpicker\">\n  <div class=\"athm-select__selected\" data-select-picker>\n    <span class=\"athm-select__text\" data-select-value>选择品牌</span>\n    <span class=\"athm-select__icon\">\n      <i class=\"athm-iconfont athm-iconfont-arrowdown\"></i>\n    </span>\n  </div>\n  <div class=\"athm-select__option\" data-select-dropdown>\n    <div class=\"pop-wrapper\">\n      <div class=\"brand\" data-select-brand></div>\n      <div class=\"series\" data-select-series></div>\n    </div>\n  </div>\n</div>\n\n<!-- 单选品牌下拉框 -->\n<div class=\"athm-select\" id=\"js-select-brand2\" data-toggle=\"carpicker\">\n  <div class=\"athm-select__selected\" data-select-picker>\n    <span class=\"athm-select__text\" data-select-value>选择品牌</span>\n    <span class=\"athm-select__icon\">\n      <i class=\"athm-iconfont athm-iconfont-arrowdown\"></i>\n    </span>\n  </div>\n  <div class=\"athm-select__option\" data-select-dropdown>\n    <div class=\"pop-wrapper\">\n      <div class=\"brand\" data-select-brand></div>\n    </div>\n  </div>\n</div>\n```\n\n### JavaScript\n\n因为选择品牌、车型、车系涉及到数据来源及数据结构，所以在调用的时候增加了一些配置项\n* 首页，针对不同数据来源及数据结构，我们需要自己写方法获取数据及处理数据结构\n* 在选择品牌及车系之后执行下一步的方法\n\n```javascript\n$('#select').carpicker(options);\n```\n```javascript\nvar dataCar = {\n  getBrandData: function() {\n    var carBrand = [];\n    brandSereisData.forEach(element => {\n      var item = {\n        'id': element.I,\n        'name': element.N,\n        'letter': element.L,\n        'list': element.List\n      }\n      carBrand.push(item)\n    });\n    return carBrand;\n  },\n  getSeriesData: function(key, callback) {\n    var carSeries = [];\n    brandSereisData.forEach(element => {\n      if (element.I == key) {\n        element.List.forEach(ele => {\n          var item = {\n            'id': '',\n            'name': '',\n            'list': [],\n            'brandId': key\n          };\n          item.id = ele.I;\n          item.name = ele.N; \n          ele.List.forEach(series => {\n            item.list.push({\n              'id': series.I,\n              'name': series.N\n            })\n          })\n          carSeries.push(item);\n        })\n        return;\n      }\n    });\n    if (callback && typeof callback === 'function') {\n      callback(carSeries)\n    };\n    return;\n  },\n  getSpecData: function(key, callback) {\n    var carSpec = [];\n    if (specData && specData.List.length > 0) {\n      specData.List.forEach(ele => {\n        var item = {\n          'id': '',\n          'name': '',\n          'list': []\n        };\n        item.id = ele.I;\n        item.name = ele.N; \n        ele.List.forEach(spec => {\n          item.list.push({\n            'id': spec.I,\n            'name': spec.N,\n            'price': spec.P\n          })\n        })\n        carSpec.push(item)\n      })\n      if (callback && typeof callback === 'function') {\n        callback(carSpec);\n      };\n      return;\n    }\n  }\n}\n$('#js-select-brand').carpicker({\n  selectLevel: 'series',\n  onInitPicker: dataCar.getBrandData,\n  onBrandPicker: function (id) {\n    dataCar.getSeriesData(id, function (data) {\n      // 全部车系项\n      var seriesItem = {\n        'show': true,\n        'link': true,\n        'url': '//www.autohome.com.cn/'\n      }\n      $('#js-select-brand').data('fe.carpicker').setSeries(data, seriesItem);\n    })\n  },\n  onSeriesPicker: function (id) {\n    dataCar.getSpecData(id, function (data) {\n      $('#js-select-spec').data('fe.carpicker').setSpec(data);\n    });\n  }\n```\n\n## Options\n\n参数可以通过 data attributes 或者 JavaScript 两种方式来配置.\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\nselectPicker | string | `'[data-select-picker]'` | 触发容器\nselectValue | string | `'[data-select-value]'` | 值容器\nselectDropdown | string | `'[data-select-dropdown]'` | 下拉容器\nselectedClass | string | `'selected'` | 选中选项使用的样式类.\ndisabledClass | string | `'disabled'` | 下拉框禁用状态样式类.\nactiveClass | string | `'active'` | 下拉框激活状态样式类.\nselectLevel | string | `'brand'` | 选择到指定级 <br> `'brand'` `'series'` `'spec'`\nselectNav | Boolean | `false` | 是否显示导航 <br> 为 true 会自动创建\nonInitPicker | function | `null` | 初始化完成,用于渲染品牌数据\nonBrandPicker | function | `null` | 选择品牌项执行\nonSeriesPicker | function | `null` | 选择车系项执行\nonSpecPicker | function | `null` | 选择车型项执行\n\n## Methods\n\n### `.carpicker(options)`\n\n初始化当前 DOM 内容为一个下拉框, 可以接受参数进行配置.\n\n```javascript\n$('#select').carpicker({});\n```\n\n### `.carpicker('show')`\n\n手动打开对话框.\n\n```javascript\n$('#select').carpicker('show');\n```\n\n### `.carpicker('hide')`\n\n手动关闭对话框.\n\n```javascript\n$('#select').carpicker('hide');\n```\n\n### `.carpicker('toggle')`\n\n手动打开或者关闭.\n\n```javascript\n$('#select').carpicker('toggle');\n```\n\n### `.carpicker('disable')`\n\n禁用.\n\n```javascript\n$('#select').carpicker('disable');\n```\n\n### `.carpicker('enable')`\n\n非禁用.\n\n```javascript\n$('#select').carpicker('enable');\n```\n\n### `.data('fe.carpicker').setValue({})`\n\n设置值\n\n### `.data('fe.carpicker').getValue()`\n\n获取值\n\n### `.data('fe.carpicker').setSeries(data, obj)`\n\n渲染车系数据并显示\n`obj` 为控制「全部车系」链接的选项\n\n```js\n// 全部车系项\nvar obj = {\n  'show': true,\n  'link': true,\n  'url': '//car.autohome.com.cn/price/brand.html'\n}\n```\n\n\n### `.data('fe.carpicker').setSpec(data, array)`\n\n渲染车型数据并显示\n`array` 以数组形式传递车型 id 在渲染时如果当前车型 id 参数于 array 中会将当前项做禁用处理 \n\n### `.data('fe.carpicker').destroy()`\n\n销毁当前对象\n\n\n## Event\n\nEvent Type | Description\n---------- | -----------\ninit.fe.carpicker | 下拉框初始化时触发.\nshow.fe.carpicker | 当 `show` 方法被调用, 此事件会立即触发.\nshown.fe.carpicker | 下拉框已呈现完毕时触发.\nhide.fe.carpicker | 当 `hide` 方法被调用, 此事件会立即触发.\nhidden.fe.carpicker | 下拉框已隐藏完毕时触发.\nchange.fe.carpicker | 当值发生变化时触发. 回调函数接受参数为 `event` , 当前选项值 `data` (`{text: '', value: ''}`) 和当前选项 `$item` 。\n\n```javascript\n$('#select').on('show.fe.carpicker', function (e) {\n  // 阻止下拉框打开\n  e.preventDefault();\n});\n```\n\n# End\n\nThanks to [Bootstrap](http://getbootstrap.com/)","readmeFilename":"README.md"}