jQuery自定义响应式时间轴样式代码



140 559 187



特效描述:jQuery自定义 响应式时间轴样式,jQuery自定义时间轴,响应式时间轴,时间轴样式

代码结构

1. 引入CSS

<link href="css/start/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href="css/swan.timeline.min.css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/swan.timeline.min.js"></script>
<script src="data/testdata1.js"></script>
<script src="data/testdata2.js"></script>
<script src="data/testdata3.js"></script>

3. HTML代码

    <fieldset class="options">
        <div>
            <label>开始时间:</label>
            <input type="text" id="startTime" value="2014/1/1" />
        </div>
        <div>
            <label>结束时间:</label>
            <input type="text" id="endTime" value="2016/12/31" />
        </div>
        <div>
            <label>显示箭头:</label>
            <input type="checkbox" id="showArrow" checked="checked" />
        </div>
        <div>
            <label>时间尺度位置:</label>
            <select id="timeScalePosition">
                <option value="bottom" selected="selected">底部</option>
                <option value="top">顶部</option>
            </select>
        </div>
        <div>
            <label>自动调整时间:</label>
            <select id="autoAdjustTime">
                <option value="none" selected="selected">None</option>
                <option value="both">Both</option>
                <option value="start">Start</option>
                <option value="end">End</option>
            </select>
        </div>
        <div>
            <label>平滑滚动:</label>
            <select id="smoothScroll">
                <option value="off">Off</option>
                <option value="basic">Basic</option>
                <option value="advanced" selected="selected">Advanced</option>
            </select>
        </div>
        <div>
            <label>指南:</label>
            <select id="guides">
                <option value="none">None</option>
                <option value="both" selected="selected">Both</option>
                <option value="start">Start</option>
                <option value="end">End</option>
            </select>
        </div>
        <div>
            <label>显示指南标签:</label>
            <input type="checkbox" id="showGuidesLabel" checked="checked" />
        </div>
        <div>
            <label>显示滑块:</label>
            <input type="checkbox" id="showSlider" checked="checked" />
        </div>
        <div>
            <label>变焦:</label>
            <input type="range" id="zoom" value="5" min="1" max="10" />
        </div>
        <div>
            <label>测试数据:</label>
            <select id="testData">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <button id="refresh">刷新</button>
    </fieldset>
    <div id="timeline"></div>
    <script>
        var timeline;
        $().ready(function () {
            $('#autoAdjustTime').on('change', function (event) {
                var value = $(this).val();
                $('#startTime').attr('disabled', value === 'both' || value === 'start');
                $('#endTime').attr('disabled', value === 'both' || value === 'end');
            });
            $('#guides').on('change', function(event) {
                $('#showGuidesLabel').attr('disabled', $(this).val() === 'none');
            });
            $('#zoom').on('change', function(event) {
                if (timeline) {
                    timeline.timeline('zoom', $(this).val());
                }
            });
            $('#refresh')
                .on('click', showTimeline);
            showTimeline();
        });
        function showTimeline() {
            var testData = $('#testData').val();
            //$.getJSON(testData, function (data) {
            //    var options = {};
            //    options.startTime = $('#startTime').val();
            //    options.endTime = $('#endTime').val();
            //    options.showArrow = $('#showArrow')[0].checked;
            //    options.timeScalePosition = $('#timeScalePosition').val();
            //    options.autoAdjustTime = $('#autoAdjustTime').val();
            //    options.smoothScroll = $('#smoothScroll').val();
            //    options.guides = $('#guides').val();
            //    options.showGuidesLabel = $('#showGuidesLabel')[0].checked;
            //    options.showSlider = $('#showSlider')[0].checked;
            //    options.zoom = $('#zoom').val();
            //    options.data = data;
            //    timeline = $('#timeline').timeline(options);
            //});
            var options = {};
            options.startTime = $('#startTime').val();
            options.endTime = $('#endTime').val();
            options.showArrow = $('#showArrow')[0].checked;
            options.timeScalePosition = $('#timeScalePosition').val();
            options.autoAdjustTime = $('#autoAdjustTime').val();
            options.smoothScroll = $('#smoothScroll').val();
            options.guides = $('#guides').val();
            options.showGuidesLabel = $('#showGuidesLabel')[0].checked;
            options.showSlider = $('#showSlider')[0].checked;
            options.zoom = $('#zoom').val();
            options.data = testData === '1'
                ? testdata1
                : testData === '2'
                ? testdata2
                : testdata3;
            timeline = $('#timeline').timeline(options);
        }
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 滑动星星打分 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 其他 图片拖动 图片拖拽 时间轴 竖直时间轴 横向时间轴 文本框 text文本框 下拉框 select下拉菜单 select美化 select美化框 颜色选择 颜色选择器 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到