{"_id":"@ctmobile/ui-jdcategorytab-sd","_rev":"2-860d42a5f9b443245066800df5812f56","name":"@ctmobile/ui-jdcategorytab-sd","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ctmobile/ui-jdcategorytab-sd","version":"1.0.0","description":"支持移动端的UI组件-京东分类列表","main":"lib/jdcategorytab.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild --type buildpackage","link":"npm link @ctsj/build"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["JdCategoryTab","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0"},"devDependencies":{"@ctsj/build":"^1.0.0","iscroll":"^5.2.0"},"_id":"@ctmobile/ui-jdcategorytab-sd@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-kUtFb8eIn07aUicvbh/xPlQXhwx3bu+ZpHClr9mpLT6GL9IFgEgntekwETQZMsKrIw5zF7EtM2L9yxfxMuZ1HA==","shasum":"7031169828d5a3248d5938262908ce581dc75c75","tarball":"https://registry.npmjs.org/@ctmobile/ui-jdcategorytab-sd/-/ui-jdcategorytab-sd-1.0.0.tgz","fileCount":9,"unpackedSize":22584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMGtBCRA9TVsSAnZWagAAfwQP/0UWKdFaduT55VSJwgfF\nx4YD/TZ4YqWbA02o4NDcbtK7P/Kv+eCqH2aHFxDzvPBfqK9grY2W/LaPZESD\nhe/P2es3XEcQ9taqPseN9sw+tbxSUWdX9YdIkDkOTWhsyP7X+cChcOVhmm6/\nOPJodl96SIJ0eSP4tVvBdAjqCBGjX9CpIyXTos3ljm3W6fxr09qkhe5IajhT\npVQvYESe+wbz7iDjUX0c1Qbd365lcAwMYS+mg01NsPSqi4XBCbO1YQuiktIy\nZIZzkoauqU1zHpReCW1aPG5smajTzR7IgY/nur7QOuA5BJO4BjjDn3cUtFgj\n9f5/AUUeTWkhOnryV5Pvwt/z5baENdwxlUTiiQRaiLsgNNLi30Gw/Zui01oB\nBZAYWc6aqYYxihLgDG9KBdoMvk+2LMenKL8KO/OdEbbHS26tdPKCqfd9tjS1\nCR9v9A9H7dLpHZDQ2wsqkgCTATT6TFwmWGPNnIvIiCzfgJufBIMX7B02x17j\n5Or2gKrgeWmcso9QnpJEjgtYzXqDLiABEWKdUkzibFHYY3BxQkh9Z/4osl9w\ne1Dp06pEa5IfSH2o82b9k0nVscd8mU33344uN8HFnRxR5S17wDYcMi53BVqJ\nOqZP0fQTESMfPsjX1oPboT1bRKNNFTc8AS7wiI4VTPDEWubpMbfdp+tl0FSD\nWNCK\r\n=fBFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1SCeS/ASGuLGwryGUUjA1Hb+IdEJX7CqZzPEh4ifKwAiEA6fCIzTv+vlkBtcjplPcwl2vyylCiM2wVixLmMJ1OEWE="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-jdcategorytab-sd_1.0.0_1563454272489_0.12779637538626565"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctmobile/ui-jdcategorytab-sd","version":"1.0.1","description":"支持移动端的UI组件-京东分类列表","main":"lib/jdcategorytab.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild buildpackage","link":"npm link @ctsj/build"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["JdCategoryTab","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0"},"devDependencies":{"@ctsj/build":"^1.0.11","iscroll":"^5.2.0"},"_id":"@ctmobile/ui-jdcategorytab-sd@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-sNGbrzzQiEWiRwYKrO8rWMswzsWyvB3IezewDYHXVvowmDDpn3YFBNOyq7+H4LeeFI4p+IZmDxlD52cRiEFcbA==","shasum":"649e2e54bc39245c3b924647d3114fb5b139eb24","tarball":"https://registry.npmjs.org/@ctmobile/ui-jdcategorytab-sd/-/ui-jdcategorytab-sd-1.0.1.tgz","fileCount":6,"unpackedSize":17607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgePyCRA9TVsSAnZWagAAcgQP/ikjMvLVLqTwEvTH6l8R\nZU2ZGklC0OIsnf68O4buS+6n7gXccgMFNtNl/4cRs6n9Fzbzud9Euwz4Aq42\nBr3Z7bw84q9aWsCbPvujLiIa3kdo3Qtriypeu78LMPYDGm1spQZlJpW0GpNO\nGy9R/LkiW1TthNq7OCme5aDJFbdaZ3aI1J7szyafZGsVKQAxwD4SHL+Pdsys\nbJ/LbDTip9qquGVK048hTJQlGITeXEUejy2FfB1i+fWaNvjT7vE+zXSbyH45\nTtfFNi+9TUqNqnPHabzpGFA64upOwKNE1d/4/CpavjRUCO+rrB7ZKcMc6pgp\nlrqGZK72lMiSGmxLrGy56uE92uJGbR+zxY6r17R+GVJi9Gk4n0Ha6EZdss72\nyxQ+IpCqkukaBYhtNHnTfzUQpfnYato+y7AyBhE6HT1AHb2SFA7N4bypVTUL\n1zFqfZ8yofP+PvQI50z/MK46hKUWgdohFCmlLQIYphOQXekobn6A83sGiL4F\nByQIlRALYE3wI3VDwfcZWesgesPgGniAeK96cmKOZs9jqgEujvqCcKn1wz5s\nykGnJ60eVkaHvqtlWg9o+1oQP86LAexUCmr7AHxfNp0cFzxhpkq5xs/X/dEU\njwySOlbrNl64BTnA+BtGjPmGRIS/ssN35yqPt9Clc90jgCZN+Fb7W9lMLsmt\nz7Nm\r\n=kv/6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXEBXgABZ4a1fyqfMHyjFR1AZ0e0X+qYP1+ot/RXamkgIgSyS7i36gsOPvYnoWFKcgpbeag/VSZv3tVFu4ddvFZzc="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-jdcategorytab-sd_1.0.1_1568793585490_0.3248883162165823"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-18T12:51:12.302Z","1.0.0":"2019-07-18T12:51:12.630Z","modified":"2022-04-05T02:04:07.090Z","1.0.1":"2019-09-18T07:59:45.624Z"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"description":"支持移动端的UI组件-京东分类列表","homepage":"https://github.com/playerljc/CTMobile-UI#readme","keywords":["JdCategoryTab","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"author":{"name":"playerljc","email":"playerljc@163.com"},"bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"license":"MIT","readme":"# JdCategoryTab\r\n\r\n* [基本布局](#jdcategorytab-layout)\r\n* [初始化](#jdcategorytab-initial)\r\n* [例子](#jdcategorytab-demo)\r\n* [方法](#jdcategorytab-methods)\r\n* [事件](#jdcategorytab-events)\r\n  - [change](#jdcategorytab-events-change)\r\n\r\n## 基本布局\r\n\r\n常见的布局如下：\r\n\r\n```\r\n\r\n<div class=\"ct-jdcategorytab\">\r\n  <div class=\"ct-jdcategorytab-menu\">\r\n    <ul>\r\n\r\n      ...\r\n    </ul>\r\n  </div>\r\n  <ul class=\"ct-jdcategorytab-tab\">\r\n\r\n      ...\r\n  </ul>\r\n</div>\r\n\r\n```\r\n\r\n* ct-jdcategorytab - 代表是一个JdCategoryTab组件\r\n  - ct-jdcategorytab-menu - 代表菜单\r\n    + li - 代表菜单项\r\n  - ct-jdcategorytab-tab - 代表面板\r\n    + li - 代表面板项\r\n\r\n## 初始化\r\n\r\n```\r\n\r\n  import JdCategoryTab from @ctmobile/ui-jdcategorytab;\r\n  const jdcategorytab = JdCategoryTab(el);\r\n\r\n```\r\n\r\n## 例子\r\n\r\n#### html\r\n\r\n```\r\n\r\n<dl>\r\n  <dt>\r\n    <h3>基本</h3>\r\n  </dt>\r\n  <dd>\r\n\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>\r\n    <h3>动态添加</h3>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar\">\r\n        <button id=\"ct-jdcategorytab-dynamic-addbtn\">添加</button>\r\n      </div>\r\n    </div>\r\n  </dt>\r\n  <dd>\r\n\r\n  </dd>\r\n</dl>\r\n\r\n<dl>\r\n  <dt>\r\n    <h3>滚动到指定位置</h3>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar\">\r\n        <button id=\"ct-jdcategorytab-dynamic-scrolltopbtn\">置顶</button>\r\n        <button id=\"ct-jdcategorytab-dynamic-scrollbottombtn\">置底</button>\r\n      </div>\r\n    </div>\r\n  </dt>\r\n  <dd>\r\n\r\n  </dd>\r\n</dl>\r\n\r\n```\r\n\r\n#### js\r\n\r\n```\r\n\r\nimport $ from 'jquery';\r\nimport JdCategoryTab from '@ctmobile/ui-jdcategorytab';\r\n\r\nfunction add(index) {\r\n  return {\r\n    menu: $(<pre><code class=\"html\">`<li><a>菜单 ${index + 1} </a></li>`</code></pre>)[0],\r\n    tab: $(<pre><code class=\"html\">`<li>${index + 1}</li>`</code></pre>)[0]\r\n  }\r\n}\r\n\r\nfunction initMenuAndTab(jdel) {\r\n  const df1 = document.createDocumentFragment();\r\n  const df2 = document.createDocumentFragment();\r\n  for (let count = 0; count < 100; count++) {\r\n    const objs = add(count);\r\n    df1.appendChild(objs.menu);\r\n    df2.appendChild(objs.tab);\r\n  }\r\n  jdel.find('.ct-jdcategorytab-menu > ul')[0].appendChild(df1);\r\n  jdel.find('.ct-jdcategorytab-tab')[0].appendChild(df2);\r\n}\r\n\r\nwindow.onload = () => {\r\n  // 添加\r\n  $('#ct-jdcategorytab-dynamic-addbtn').on('click', () => {\r\n    let length = jdcategorytabDynamicJO.find(' > .ct-jdcategorytab-menu > ul > li').length;\r\n    const objs = add(length);\r\n    jdcategorytabDynamicJO.find(' > .ct-jdcategorytab-menu > ul').append(objs.menu);\r\n    jdcategorytabDynamicJO.find(' > .ct-jdcategorytab-tab').append(objs.tab);\r\n    jdcategorytabDynamic.refresh();\r\n    jdcategorytabDynamic.scrollTo(length);\r\n  });\r\n\r\n  // 置顶\r\n  $('#ct-jdcategorytab-dynamic-scrolltopbtn').on('click', () => {\r\n    jdcategorytabScrollto.scrollTo(0);\r\n  });\r\n\r\n  // 置底\r\n  $('#ct-jdcategorytab-dynamic-scrollbottombtn').on('click', () => {\r\n    let length = jdcategorytabScrolltoJO.find(' > .ct-jdcategorytab-menu > ul > li').length;\r\n    jdcategorytabScrollto.scrollTo(length);\r\n  });\r\n\r\n  const jdcategorytabBaseJO = $('#ct-jdcategorytab-base');\r\n  const jdcategorytabDynamicJO = $('#ct-jdcategorytab-dynamic');\r\n  const jdcategorytabScrolltoJO = $('#ct-jdcategorytab-scrollto');\r\n\r\n  initMenuAndTab(jdcategorytabBaseJO);\r\n  initMenuAndTab(jdcategorytabDynamicJO);\r\n  initMenuAndTab(jdcategorytabScrolltoJO);\r\n\r\n  const jdcategorytabBase = JdCategoryTab(jdcategorytabBaseJO[0]);\r\n  const jdcategorytabDynamic = JdCategoryTab(jdcategorytabDynamicJO[0]);\r\n  const jdcategorytabScrollto = JdCategoryTab(jdcategorytabScrolltoJO[0]);\r\n}\r\n\r\n```\r\n\r\n## 方法\r\n\r\nscrollTo( index time easing) - 滚动到指定索引处\r\n\r\n* index-number 滚动到的索引\r\n* time-number 滚动所需时间\r\n* easing-Object动画类型(quadratic,circular,back,bounce,elastic)\r\n\r\nrefresh() - 刷新\r\n\r\non(type, handler) - 注册事件\r\n\r\n* type-string 注册事件的类型,包括[change]\r\n* handler-Function 注册事件的回调函数\r\n\r\n## 事件\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| change |  菜单切换 |\r\n\r\n```\r\n\r\nimport $ from 'jquery';\r\nimport JdCategoryTab from '@ctmobile/ui-jdcategorytab';\r\n\r\nwindow.onload = () => {\r\n  const jdcategorytabBaseJO = $('#ct-jdcategorytab-base');\r\n  const jdcategorytabBase = JdCategoryTab(jdcategorytabBaseJO[0]);\r\n  jdcategorytabBase.on((index,target,tab) => {\r\n    console.log(index,target,tab);\r\n  });\r\n}\r\n\r\n```\r\n","readmeFilename":"README.md"}