滑动条是由全新表单样式的展现和运用,滑动条的运用如何利用CSS3的样式去控制滑动条的位置,大小值的设置,首先要定义函数的变化,给予这个滑动条以变量的存在!下面是一段来自HTML5研究小组的源代码:
var initSlider = function() {
$('input[type=range]').each(function() {
var $input = $(this);
var $slider = $('
class="' + $input.attr('class') +
'">
var step = $input.attr('step');
$input.after($slider).hide();
$slider.slider({
min: $input.attr('min'),
max: $input.attr('max'),
step: $input.attr('step'),
change: function(e, ui) {
$(this).val(ui.value);
}
});
});
};
下面是我在看《html5用户指南》中关于一段简单的的代码,表示就是将一个表单名定义为tap的1到11的滑块条
name=tap>
我在这里复制的这段代码,里面定义了几个变量$,使得我们的min max有了变化,使得页面更加变得活跃了!
在HTML5中date和time都会去验证一个精准的日期和时间!
step控制的是输入渐进的程度,也就是误差的大小,当step=any可以允许任何精度选择一天中的任何时间!
我们对于这些HTML5的代码也是可以由CSS3来定义样式化的
{windth:500px;color=red;font-family:cursive;font-size:2em}
给range定义为500像素宽,颜色为红色,并设置字体和字大小,来控制和样式化我们的range滑块条,让他更加的漂亮和优化得更好!