2024-05
12

不得不修改套件脚本

By xrspook @ 11:33:56 归类于: 烂日记

之前说到,级联下拉菜单的select2插件当它觉得下面的空间不足的时候,就会把下拉菜单变成上拉菜单。我不知道设计者到底是怎么想的,我也不知道为什么使用的人为什么不觉得这个操作不太对,可能是我比较古板吧。我没有限定那个网页的最大高度,所以实际上这个网页的高度是无限的,不存在空间不足的问题。以我的水平也没办法去了解这个select2插件到底是如何判断空间到底是不是不足。

一开始我用的是mini版本,就是所有代码都挤在一起,之前我觉得标准版本跟mini版的区别在于mini版里面没有了注释、回车、缩进,仅此而已,但是当我在mini版里面找不到网友提到的某个东西的时候,我就怀疑是不是除了上面我提到的以外,min版跟标准版还有其它的区别。要在min版密集的字符里面找到某些东西非常的困难,哪怕你已经不是用肉眼去找,而是使用搜索功能,所以我又下载了一个标准版,结果发现原来二者真的有区别,区别还不少。在搜索标准版的时候,我找到了判断是否空间不足需要转换上拉下拉的各种操作,但是在mini版里面完全没说清楚,而且所有的变量都非常简洁,只有一个字母,你根本猜不出那到底是什么。

所以我首先是在标准版里进行我想要的修改,结果发现可以了,但是我却没办法在mini版里找到完全一致对应的部分。标准版跟mini版体积差了一倍,但实际上标准版也不过是150KB而已,很小。我尝试过直接把标准版拿去压缩,结果出来的东西好像vscode不太承认,虽然在mini版里还没有找到修改的方法,但起码我有标准版的修改方案。

除了下拉菜单以外,还有第三层选项搜索栏的自动对焦的问题。只要打开第三层菜单,光标就会自动的对焦到搜索栏,这就意味着手机的虚拟键盘会马上弹出。这会大大降低了手机屏幕的高度。如果虚拟键盘不弹出,你直接可以从下拉菜单里面选择的那些东西你不得不麻烦地把虚拟键盘最小化掉。这个操作跟聚焦搜索框会扩大屏幕字体一样,让人烦恼。所以我要做的是当我点击第三层菜单的时候,下拉列表有搜索框,但是光标不聚焦在那里,这就意味着,如果第三层菜单只有几个选项,用户可以直接点击选项,不会有虚拟键盘的弹出。在我们现在整理的数据当中,第三层菜单绝大多数选项都只有几个,可以直接一目了然展示完毕,极少需要调用到滚动下拉菜单。之所以要在第三级菜单里面做一个搜索框,是因为有那么极少数的选项数量很多的,会在10个以上,会让那个地方出现滚动的下拉菜单。因为选项很多,如果可以有对选项进行搜索的功能,显然会方便很多,所以我的目标是第三层选项有搜索框,但弹出的时候搜索框不聚焦,但你可以手动点击搜索框,然后在里面输入获取你想要的结果。这个东西说起来好像挺简单,但实际上要真的做到,还真不只是输入框自动聚焦的问题。后来,我在毫无办法之下,又去研究select2标准版的时候才发现,让我无论如何设置输入框都不能解决的原因是让输入框那么顽固的东西不在输入框本身那里。最后我替换了一些写着focus的东西,终于,第三层带有输入框的下拉菜单在打开的时候焦点不再自动固定在输入框那里了。

我也不想修改select2脚本本身,我尝试过很多方法实现我想要的效果,但最终宣告失败,所以我也就只能手动修改标准版。套件使用起来的确很舒服,但未必跟你的项目完全匹配,当你要做微调的时候,可能会碰壁很多次才最终能实现你的效果。

有话要说

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress