input range實現可滑動的滾動條

2021-08-18 05:02:45 字數 2763 閱讀 9454

專案要求在移動端實現可滑動的進度條，用純div+css實現，感覺流暢性不夠好，最後決定用type=range進行改造

<


pclass="progress">


<


inputtype="range"id="accidentrange"min="0"max="200"step="5"value="0">


<


spanclass="fill">


span>


<


labelclass="current">0


label>


p>
css**如下：

.progress
input[type=range]
input[type=range]:focusinput[type=range]::-webkit-slider-thumb


.fill
.current
其中type=range是基本的滑動條樣式，在此重寫了滾動條和滑塊thumb的樣式，
fill是滑塊拉動後左側的顏色填充區域，current是在滑塊上方顯示當前拉動的值。
新建乙個rangeslider.js，**如下：


$.fn.rangeslider =function(cfg);


var$input =$(this);


varmin =this.slidercfg.min;


varmax =this.slidercfg.max;


varstep =this.slidercfg.step;


varcallback =this.slidercfg.callback;


$input.attr('min', min)


.attr('max', max)


.attr('step', step);


$input.bind("input",function(e)


$input.next().css(); //將fill的寬度置為上面計算好的值


$input.siblings('.current').css();  //同上


$input.siblings('.current').html(this.value);


if($.isfunction(callback)) 


});};


頁面js呼叫如下


$(function());最終實現效果如下：










				
可橫向或部分橫向滑動的列表實現
先看下效果 首先需要構造乙個header部分，header部分分為固定header和滑動header，滑動header採用橫向scrollview實現 private void bindheader rightheader new linearlayout context for string st...

				
Android可滑動的開關效果
閒著沒事，把之前寫的乙個demo放上來分享下。就是乙個開關，實現可滑動和動畫效果。不是切換。好了，先上圖 直接把自定義的這個view 放上來，有注釋應該很好理解 首先是布局 接著是這個view的 繼承自linearlayout package com.lxb.switchdemo import an...

				
仿ios 可滑動的ScrollView
本人在開發過程中頁面效果由於使用android本身控制項無法達到ios那種可拉伸的view,感到很不爽,因為ios總是可以滑動,避免再新增功能時重新布局的麻煩,所以整了一下,顯示了可拉伸的view,終於可以與ios保持一致了.建立乙個自定義view userdefinescrollview 繼承sc...