用户投稿所有的HTML元件的使用方式，大多可以由Ｗ3school习得 ;
但是，Ｗ3school没告诉我们的是为什么要用这个元件？
或者什么时候用这个元件？更或者怎样使用这个元件使用者才会觉得好操作？
延续part1与part2的主轴继续写下去！没有时间及比赛的压力，自我挑战看看能不能写出一系列文！
一般会採用 type="range" 或者 jQuery UI 中的 slider bar 元件，其目的
不外乎是希望使用者输入带有上下限的一系列数值，并避免空值的产生。
以Ｗ3School範例来看，预设数值为0~10 ; 当使用者拖曳滑块时
按下送出按钮后即可获得使用者相对于预设值移动产生的对应值！
而type="range"常用的属性如下：
step：设定滑动的增加量max：设定最大值min：设定最小值
完整的属性请参考这里。
再次强调，不论是part2介绍的下拉选单
或者本篇介绍的type="range"，因其均具有预设值特性，均能避免使用者输入空值！
再来就是这个元件在使用上真正遇到的困境：IE浏览器！
看看微软对于type="range"释出的测试页面：
<html> <head> <title>Range and progress example</title> <style type="text/css"> input[type=range] { padding-left: 0px; padding-right: 0px; } </style> <script type="text/javascript"> function changeValue() { document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value; } document.addEventListener('DOMContentLoaded', function () { document.getElementById("rangeCtrl") .addEventListener('change', changeValue, false); }, false); </script> </head> <body> <progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress bar.</progress> <br> <br> <input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50"/> </body> </html> IE与Chrome浏览器的显示画面如下：
IE直接丢出『抱歉！您的浏览器不支援progress bar。』
所以当客户要求开发者再IE上实现type="range"功能时，只好採用其他套件(ex: jQuery UI)
自己刻一个出来！然后『切记要告知客户这部分的额外开发成本』！
补上Safari浏览器的显示画面如下：
(据以前主管说法，Safari的原型似乎是从Firefox改来的，未求证！)
类似的元件还有 type="date"。
以上就是小弟的分享，欢迎版上大大及高手们针对『如何说服客户不该再使用IE浏览器』
能给些沟通上的意见！
微信扫一扫打赏
支付宝扫一扫打赏
