素材网 素材网

jQuery+HTML5滑块特效

下载资源()次

阅读次数()次

发布时间:2017-10-22

jQuery+HTML5滑块特效
分享到:

用法简介:

来源:xw素材网

jQuery+HTML5滑块特效。

文件引用:

<script>

    $(function() {

        var $document   = $(document);

        var selector    = '[data-rangeslider]';

        var $inputRange = $(selector);


        // Example functionality to demonstrate a value feedback

        // and change the output's value.

        function valueOutput(element) {

            var value = element.value;

            var output = element.parentNode.getElementsByTagName('output')[0];


            output.innerHTML = value;

        }


        // Initial value output

        for (var i = $inputRange.length - 1; i >= 0; i--) {

            valueOutput($inputRange[i]);

        };


        // Update value output

        $document.on('input', selector, function(e) {

            valueOutput(e.target);

        });


        // Initialize the elements

        $inputRange.rangeslider({

            polyfill: false

        });


        // Example functionality to demonstrate programmatic value changes

        $document.on('click', '#js-example-change-value button', function(e) {

            var $inputRange = $('input[type="range"]', e.target.parentNode);

            var value = $('input[type="number"]', e.target.parentNode)[0].value;


            $inputRange

                .val(value)

                .change();

        });


        // Example functionality to demonstrate programmatic attribute changes

        $document.on('click', '#js-example-change-attributes button', function(e) {

            var $inputRange = $('input[type="range"]', e.target.parentNode);

            var attributes = {

                min: $('input[name="min"]', e.target.parentNode)[0].value,

                max: $('input[name="max"]', e.target.parentNode)[0].value,

                step: $('input[name="step"]', e.target.parentNode)[0].value

            };


            $inputRange

                .attr(attributes)

                .rangeslider('update', true);

        });


        // Example functionality to demonstrate destroy functionality

        $document

            .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {

                $('input[type="range"]', e.target.parentNode).rangeslider('destroy');

            })

            .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {

                $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });

            });

    });


</script>


   

相关标签:

上一篇:移动端电脑端选项卡切换 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。