MDUI中出现按钮(Button、Input等)样式错乱的解决方法

MDUI中出现按钮(Button、Input等)样式错乱的解决方法

        在使用MDUI制作Input按钮时使用了MDUI的“mdui-btn”、“mdui-ripple”类名,本来应该出现下图1所示效果,但是实际上却变成了很丑的默认样式(图2)。

图1
图2

以下为原代码:

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">文件名:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="提交">
</form>

为了解决这一问题,我在MDUI的官方讨论群里寻求帮助,通过一位群友的帮助,最终实现了对该按钮的美化并保留了原本的功能。以下为该群友提供的方案:

<input type="text" size="20" placeholder="图片路径" name="upfile" id="upfile" />
<input type="button" value="浏览图片" onclick="path.click()" />
<input type="file" id="path" style="display: none;" onchange="upfile.value=this.value" />

可以看到,该方案是使用一个Button按钮和一个隐藏的Input按钮实现的,并且还增加了显示选取文件的目录功能。

通过隐藏Input按钮,使其不显示出来,避免了MDUI的类名对该按钮不起作用产生的默认样式,再通过一个显示在页面上的增加了MDUI类名的Button按钮去触发隐藏的Input按钮。

具体实现则是在Button按钮上增添了Onclick事件,通过Onclick事件中的JS的click()方法点击id为path的Input按钮,这样便间接实现了原有功能,同时又美化了外观。

此外,当Input按钮完成了文件选取的步骤后,又通过JS中的onchange()事件改变id为upfile的Input输入框的value值,这样便呈现出该文件在用户设备上的目录。

图3 群友提供的方案效果

到了这里就清楚了,功能和外观已经全部实现了预期效果,美中不足的是显示文件目录的Input是可以点击更改的,虽然这并没有什么用,但是这无疑会误导用户产生不好的体验,因此我又对其进行了一番改造,使它适应了自己的需求。以下为改造后的代码:

<div class="mdui-chip"><span class="mdui-chip-title">上传图片(可选)</span></div>
<input type="file" id="file" name="file"style="display:none" onchange="filedir.value=this.value"> 
<div class="row">
<div class="mdui-col-xs-4">
<input type="button" value="浏览图片" onclick="file.click()">
</div>
<div class="mdui-col-xs-8">
<input type="text" size="20" placeholder="图片路径" disabled name="filedir" id="filedir">
</div>

我使用了disabled的属性来禁止用户输入显示文件目录的文本框,该属性是html默认提供的属性。同时我还使用了MDUI提供的网格布局来进行美化,而由于文本框占用了额外的高度,为了使按钮和文本框对齐,我只好用了一个<br>标签。同时我又增添了一个由MDUI提供的纸片组件来提示用户上传图片。以下是效果图:

图4 PC端的效果
图5 移动端的效果

至此,已经完美解决了所有需求,附上该群友的QQ:1175161483,感谢这位群友的帮助!

一条留言

  1. I enjoy reading through a post that can make men and women think.
    Also, thank you for permitting me to comment! http://www.bookcrossing.com/mybookshelf/Jimgriffin/

发表评论