[b]新版本更新:鼠标上下拖动选择内容:http://hiuman.iteye.com/blog/2353563[/b]
(如有错敬请指点,以下是我工作中遇到并且解决的问题)
一开始搜这个内容的时候,搜索结果基本都是不沾边的。
很多都是日历选择器,最接近的就是这两种。
一对比之下,自然是选右侧的,简洁大方,美观。
(图1是17素材里面找到的,图2好像是博客园)
然而,看了一眼它引入的js,就找到它的官网,搜mobiscroll即可。这个网站里面有很多很好的例子,有各式各样的选择。
恕我愚昧,我不会将这个插件和我的网页结合在一起,我就放弃了。(倒腾了一天T.T)
= = = = = = = = = = = = = = = = 代 码 = = = = = = = = = = = = = = = =
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
还找到过jqueryMobile的swipe,看到效果还可以,以为可以上下拖动/滑动的,百度+倒腾了好久才发现不可以,心塞塞的。
还有什么jqueryUI的Draggable,这仅仅是拖动啊喂。等等等等....反正转了很多弯掉进很多坑。
后来想着搜拖动和拖拽不行,那就搜日历选择器吧。然后就有各式各样出名网站的日历选择器的插件……
想着去加的群里问问,结果问到的结果是:很简单啊,js做就好了。.....不就一个轮播吗。....
想到轮播的拖拉就搜了Swiper,这个也是不错的插件。我没试这个插件,不知道能不能上下拖动的。
( 什么gui,依旧帮不上忙)然后跑去问后台的大神,他说:这个打不了,那是andri原生的控件效果,网页模仿起来超难的,你让你们的大神想办法吧,这个像模仿手机那种滑动选择东西的控件很难弄的。
快要放弃了的时候,我打算去找日历选择器的共同点,就是都是叫datepicker。(无奈脸)
然后就干脆搜picker了。发现了framework7,(看了它的样式,一脸找到宝藏的幸福脸),然后看着看着发现了MSUI(SUI),它是基于framework7写的,就跑进去看了。
因为framework7要写ios,android两种才可以。(两个效果差不多)
= = = = = = = = = = = = = = 看 这 里 = = = = = = = = = = = = = =
SUI是淘宝团队开发的。效果还不错。就用这个了。效果图:
(引入的文件略,一共五个,不知道怎么写的可以看它网站的 [ 开始使用 ] )
代码比较简单:
<input type="text" id='picker'/>
<script>
$("#picker").picker({
toolbarTemplate: '<header class="bar bar-nav">\
<button class="button button-link pull-left">按钮</button>\
<button class="button button-link pull-right close-picker">确定</button>\
<h1 class="title">标题</h1>\
</header>',
cols: [
{
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
}
]
});
</script>
最后:
还找到了类似效果的,比如MUI的picker,Dcloud的。这个跟SUI他们的差不多的。
- 大小: 47.5 KB
- 大小: 4.5 KB
- 大小: 5.6 KB
- 大小: 9.4 KB
分享到:
相关推荐
在这个特定的问题中,我们聚焦于"MUI picker无法滑动和选项遮挡问题修复"。 MUI的Picker组件是一个常见的选择器控件,用于展示一系列可滚动的选项。然而,在实际使用中,开发者可能会遇到以下两类问题: 1. **无法...
2. **高度可配置**:VuePicker允许你自定义选项、样式、事件等,以满足不同场景的需求。例如,你可以设置选择器的列数、每列的选项、默认选中项等。 3. **响应式**:作为Vue.js的一部分,VuePicker自然支持响应式...
6. **样式可定制**:daterangepicker提供了丰富的CSS样式选项,可以与各种UI框架(如Bootstrap)完美融合,也可以根据设计需求进行个性化定制。 7. **事件监听**:支持多种事件监听,如打开日历、关闭日历、日期...
在Android开发中,`NumberPicker` 是一个非常实用的组件,通常用于实现用户选择数字的交互,例如设置日期、时间或者进行数值选择。本篇文章将深入探讨如何自定义`NumberPicker`,特别是如何修改选中内容的颜色和其他...
4. **调整配置**:根据项目需求,可能需要调整daterangepicker的配置选项,如默认日期、日期格式等。 5. **测试**:在多种设备和浏览器上进行测试,确保汉化效果无误。 daterangepicker还支持自定义回调函数,可以...
在Android开发中,NumberPicker和TimePicker是两个常用的组件,用于用户输入数字或者选择时间。在某些场景下,为了满足特定的设计需求或者提供更个性化的用户体验,开发者可能需要对原生组件进行自定义。本篇文章将...
let title = "选项\(row + 1)" let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 16), .foregroundColor: UIColor.white // 设置文本颜色为白色 ] return ...
在Android开发中,`NumberPicker` 是一个非常实用的组件,常用于让用户选择一个数值,例如设置数量、选择年份或调整音量等。在这个"Android的一个NumberPicker demo"中,我们将深入探讨如何创建和使用这个组件,以及...
微信小程序的Picker组件是开发者在构建用户界面时经常会用到的一个功能组件,它主要用于实现下拉选择器的效果,让用户能够从一系列预设的选项中选取一个或多个值。在这个特定的场景中,我们讨论的是一个关于省市二级...
在uni-app框架中,lb-picker选择器是一种常用的交互组件,用于实现用户在多个选项中进行选择的功能。这个组件是基于JavaScript和Vue.js技术构建的,适用于移动应用开发,特别是那些需要用户输入特定信息如日期、时间...
在Swift编程中,UI设计和交互是至关重要的部分,其中包括选项卡时间picker(Tab Bar Time Picker)、UIPickerView、UIWebView以及UIImageView。这些组件在构建iOS应用时扮演着不同的角色,下面将详细介绍它们的使用...
在移动端应用开发中,Picker组件通常用于实现用户选择操作,如日期、时间或者选项列表的选择。本项目聚焦于创建一个不依赖任何外部框架或库,仅使用原生JavaScript编写的移动端横向滚动picker组件。Vue.js作为轻量级...
在Android开发中,`NumberPicker` 是一个非常实用的组件,常用于让用户在一组数字或预定义选项中进行选择,例如在本例中用于实现星座选择。`NumberPicker` 提供了一个上下滚动的界面,用户可以通过点击上下箭头或者...
总的来说,“city-picker”城市选择插件是一个集成了数据管理、用户交互和视觉设计的工具,它简化了开发者在项目中实现城市选择功能的过程,同时也提供了丰富的自定义选项以满足各种需求。通过合理地运用HTML、CSS和...
Bootstrap Selectpicker 提供了丰富的 API 和配置选项,你可以根据需求调整其行为,如更改下拉框的宽度、设置分隔符、禁用特定选项等。查看官方文档(即使链接暂时不可用,通常也能在 GitHub 页面找到)以获取完整的...
此外,city-picker还支持自定义配置,如设置默认值、禁用某些选项或更改语言等。例如,你可以这样设置默认值: ```javascript $("#cityPicker").cityPicker({ value: ['北京市', '海淀区', '中关村大街'] }); ``` ...
jQuery Date Range Picker提供了丰富的配置选项来定制其行为,例如设定默认日期范围、更改日期格式、设置时间间隔等: ```javascript $('input[name="date_range"]').daterangepicker({ startDate: '2022-01-01', ...
在微信小程序开发中,`picker-view`组件是一个常用的选择器,可以用于实现用户在预设的选项中进行选择。在创建一个自定义日期选择器时,开发者常常需要处理年、月、日的显示与选择,同时还要考虑到闰年、大小月的...
Bootstrap时间插件daterangepicker是前端开发中常用的组件,主要用于选取日期范围。在版本4.0及以上,这个插件提供了一种优雅的方式来展示和选择日期区间,同时满足了用户对交互性和自定义的需求。本篇文章将深入...