在html页面中编程滚动条（如音量控制），使用php / javasctipt / ajax技术生成更新调用

Question

In my home html page hosted on Linux/Apache server I would like to implement a scroll bar that produced ajax/PHP call to server upon update.

By scroll bar I mean a controller with sliding head between two values min and max, something like a volume control bar in windows.

Can you please suggest a starting point, or direct to an already working version?

Answer 1

You can use jquery slider: Demo: http://jsfiddle.net/lotusgodkk/GCu2D/133/

For gradient background:

JS:

    $(document).ready(function () {
        $('.checked').slider();
    });

From green to red CSS:

.checked {
        background: rgb(118, 206, 99);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(118, 206, 99, 1)), color-stop(100%, rgba(255, 0, 0, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to right, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76ce63', endColorstr='#ff0000', GradientType=1);
        /* IE6-9 */
        ;
    }

From red to green css:

        .checked {
        background: rgb(255, 0, 0);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(23, 130, 0, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#178200', GradientType=1);
        /* IE6-9 */
    }

HTML:

        <div class="checked"></div>

You can read more about it here: http://jqueryui.com/slider/ It provides the callback on slide,start events. They will be helpful to you.