zoukankan      html  css  js  c++  java
  • [原创]首次制作JQueryUI插件-Timeline时间轴

    特点:

    1. 支持多左右滚动,左右拖动。

    2. 时间轴可上下两种显示方式。

    3. 支持两种模式的平滑滚动/拖动。

    4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能)。

    5. 支持hover辅助线。

    6. 支持多级缩放、鼠标滚轮缩放。

    依赖:

    jquery 1.11

    jquer-ui 1.10

    jquery-mousewheel

    兼容:

    Chrome、Firefox、IE8(没有圆角和阴影效果)

    已知问题:

    刻度图片和拖动画布时的鼠标图标可能会失效。原因是这个是写在js里设置的url,而url可能定位不准,不过在DEMO中因为路径是对的没有此问题。截止写这篇文章,刻度图片的问题已经解决,但上传的源代码还木有哦 - -|||。

    比较有价值的点:

    1. 平滑滚动/拖动的Advance模式,这里用到了一些小技巧,通过计算鼠标按下和松开的时间和距离(拖动),或者计算鼠标按下的持续时间(滚动),获得一个加速度,最后计算惯性距离,通过动画实现平滑,基本的初中物理学知识拿粗来用一下还是可以的哈哈。

    2. 多级缩放时参考了一些响应式的设计思想,刻度条的刻度、文字等会有不同表现。

    3. 行压缩算法,这个可能并不能算很高效的算法,毕竟我只能按照正常思维设计算法,然后再来优化。

    4. 刻度计算算法,这个还有优化空间。

    5. 因为第一次做JQuery-UI的插件,标准插件的开发方法和过程对我自己来说也是宝贵的经验。

    6. 一些用户体验学的经验和设计自己感觉还比较满意,比如乱序动画等增加视觉效果、物理学平滑滚动等增加使用便捷度。

    7. 最后骂一下坑爹的IE8,因为你如此奇葩,我特意为你准备了一个可爱的function叫“_fixIE8Height”,泥煤的!

    8. 最后的最后这个是给公司做的,所有在时间非常有限的情况下,还是有点定制,后续如果我自己想用,还会改不少东西。代码仅供学习参考,请勿用于实际项目。

    下载timeline-1.0

  • 相关阅读:
    SPOJ 694 (后缀数组) Distinct Substrings
    POJ 2774 (后缀数组 最长公共字串) Long Long Message
    POJ 3693 (后缀数组) Maximum repetition substring
    POJ 3261 (后缀数组 二分) Milk Patterns
    UVa 1149 (贪心) Bin Packing
    UVa 12206 (字符串哈希) Stammering Aliens
    UVa 11210 (DFS) Chinese Mahjong
    UVa (BFS) The Monocycle
    UVa 11624 (BFS) Fire!
    HDU 3032 (Nim博弈变形) Nim or not Nim?
  • 原文地址:https://www.cnblogs.com/sohobloo/p/3627613.html
Copyright © 2011-2022 走看看