从网上搜了一个滑动条的组件,使用方法如下:
<div class="box"> <input type="text" name="P_defaultPageSize" id="abc" size="3" value="${domain.defaultPageSize}"> <script type="text/javascript"> var t = new SlideBar(); t.maxValue = "100"; t.defaultValue = ${domain.defaultPageSize}; t.onmoving = function(){ $f("abc").value = this.title = Math.floor(this.value); }; t.write(); </script> </div>
其中的css控制代码如下:
<style type="text/css"> body {font-size:14px} .slidebox { height:24px; width:213px; overflow:hidden; position:relative;} .lineBox { padding:0 6px;} .slidebox .line {background:url(js/slidebar/bg2.gif) repeat-x left bottom; width:100%; height:20px; cursor:pointer} .slidebox .cursor { position:absolute; z-index:20; top:0px; left:0px; height:21px; width:11px; overflow:hidden; background:url(js/slidebar/cursor.gif) no-repeat; cursor:pointer; filter:alpha(opacity=90); opacity:0.9} </style>
文件在附件当中,其中包括一个例子