现版本活字格暂时还不支持直接修改分页导航按钮中输入框的高度。我这边暂时有两个方案，您可以选一种您需要的~方案一
直接修改 CSS 样式表实现对分页导航按钮中 input 输入框属性的调整：
代码：
- .test input {
- /* test 为分页导航按钮单元格 CSS 类名 */
- height: 20px;
- /* 输入框高度 */
- width: 50px;
- /* 输入框宽度 */
- font-size: 30px;
- /* 字体大小 */
- }
首先我们给页面上的分页导航按钮起一个 CSS 类名，我这里就命名为 test；
然后将这段代码保存至 设置-自定义Javascript/CSS-新建文件，
现在我们只需要保证代码中类名与分页导航按钮的 CSS 类名一致，就可以达到控制输入框属性的目的了，不论是您需要的高度还是其他属性如宽度字号等，都可以直接在代码中编辑数值来修改，如果需要修改其他属性，就在代码中添加相应声明就可以了~
比如我代码中高度为 20px，实际效果如下：
此时只有类名为 "test" 的分页导航按钮会实现变化，其他的都是默认属性。如果我们需要不同分页导航按钮配置不同的属性，只需要在代码中把整个选择器与类复制一份到下面，分别进行设置就可以了。比如我下面这段代码：
- .test1 input {
- height: 20px;
- width: 50px;
- font-size: 30px;
- }
- .test2 input {
- height: 50px;
- width: 50px;
- font-size: 30px;
- }
优点：修改简单，可以给不同分页导航按钮分别设置不同属性，同时方法通用，可以应用在各种对象的属性设置中。
缺点：不是特别灵活，具体属性需要在代码中手动修改，无法与按钮图片高度适配。
方案二
通过给页面添加加载时的 Javascript 命令实现分页导航按钮输入框与按钮高度的一致：
代码：
- let height = $("[fgcname='testlr']").children(1).children(1).children(1).css("height");
- let width = $("[fgcname='testlr']").children(1).children(1).children(1).css("width");
- $("[fgcname='testlr']").find("input").css("height",height);
- $("[fgcname='testlr']").find("input").css("width",width);
- $("[fgcname='testlr']").css("height",parseInt(height)*2);
其中testlr为分页导航按钮单元格名称。
具体做法为：
在需要实现此功能的页面中编辑页面加载时命令，添加一个 Javascript 命令并将代码复制进去；
然后给页面中需要实现此效果的分页导航按钮单元格命名，与代码中一致（此处我命名为 testlr）；
在单元格设置中调整图片尺寸为50，启动后，可以看到输入框的高度也变为50：
如果需要给同页面其他分页导航按钮也添加此设置，就在编辑页面加载时命令中新建一条 Javascript 命令，然后将代码复制进去并改为不同的单元格名称即可。
如果要给其他页面进行此配置，就在新页面中添加页面加载时命令，方法同上。
优点：除了修改名称不需要在代码中进行额外配置，在高度需要变化时只需要修改按钮图片大小。
缺点：单条代码只能修改一个分页导航按钮，多个不同的的分页导航按钮需要多次配置，同时每个页面都需要单独配置。
总结：
两种方案各有利弊，您可以根据需要自行取用。
但是两种方案都涉及到代码编写，如果对代码不是特别熟悉，可能使用起来不够灵活。为了用好活字格，还是建议您抽空可以学习下最基础的前端编码知识，对于活字格的使用也能更加得心应手，而且本帖的代码其实是非常通用的，了解原理稍作修改就可以应用在其他各种场景当中~
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图