Iosselect: A js picker project that implements the select drop-down box for IOS in H5. iosselectpicker

Iosselect: A js picker project that implements the select drop-down box for IOS in H5. iosselectpicker

Specific documentation and demo can visit github: https://github.com/zhoushengmufc/iosselect

 

Mobile browsers have different select display styles. In ios, they are similar to native picker. Different Android browsers have different display styles, we need a picker component to unify the display of various browsers on each end.

Iosselect is a picker component in webapp, which can easily implement various selector effects. For example, select the region selection time and date.

The following is an address selector demo that can be accessed: http://zhoushengfe.com/iosselect/demo/three/area.html

You can view the demo:

Address Selector

Time Selector

Multiple iosselect interfaces are available for multiple scenarios.

You can customize the dependency to determine whether there is any association between different levels.

You can customize the selection level. You can select layers 1-5.

You can customize the height of each item and specify the number of display items. Seven items are displayed by default.

Mobile rem applications are common. Whether you are px or rem, iosselect is not a problem at all.

Static data can be provided, or data can be obtained using methods. synchronous and asynchronous methods are supported.

Iosselect is developed based on iscroll5 and has no dependencies. Therefore, neither react, angular, vue, nor zepto jquey is a problem.

New IosSelect (level, data, options) level: cascade level. Required data: [oneLevelArray [, twoLevelArray [, threeLevelArray, [fourLevelArray, [fiveLevelArray] in addition to arrays, you can also use the options: container: parent element of the component to pass in the css3 selector, for example '. callback, such as A' or '# a': Required title for the callback function after selection: optional title in the selection box. If this parameter is not set, the title itemHeight is not displayed. Optional, default 35 headerHeight: optional title bar height; default 44 cssUnit: css unit. Currently, px and rem are supported. Default: px addClassName: optional additional class names of components for custom style relation: [1, 1, 0, 0]: [whether the first level 2 is associated, the second level 3 is associated, the third level is associated, and the fourth level is associated], which is not associated by default, that is, the default value is [0, 0, 0, 0] oneLevelId: Level 1 Selected id optional twoLevelId: Level 2 Selected id optional threeLevelId: Level 3 selected id optional fourLevelId: level 4 selected id optional fiveLevelId: Level 5 selected id optional showLoading: If your data is asynchronously loaded, you can use this parameter to set to true. The drop-down menu will show the loading effect itemShowCount: the number of component display options can be 3, 5, 7, and 9. The default value is 7.

　　

Rich APIs:

Native JS implementation applies to all frameworks:

Specific documentation and demo can visit github: https://github.com/zhoushengmufc/iosselect

Tags: js picker, picker, address selection, time selection, date selection, datepicker, addresspicker, timepicker