V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Kaiyuan
V2EX  ›  分享创造

bootstrap.footnotes.js 改良,不再依附 Bootstrap

  •  
  •   Kaiyuan ·
    Kaiyuan · 2013-06-12 18:08:36 +08:00 · 3084 次点击
    这是一个创建于 4173 天前的主题,其中的信息可能已经有所发展或是发生改变。
    很久之前找到一个很喜欢的注释提示的效果,不过是依赖 Bootstrap,对于不用 Bootstrap 的网站很无奈。

    bootstrap.footnotes.js: http://taitems.github.io/UX-Lab/BootstrapFootnotes/index.html

    后来就自己查手册,上 Google 制作了一个仅依赖 jQuery 版本,而且除了元素上方弹出注释之外,添加了其他三个方向的窗口。


    昨天做了调整,可以自动根据元素位置在原本注释弹出方式不适用的时候自动切换到其他方向弹出注释。
    例如,原本是设置上方弹出注释,当页面滚动到一定时候上方不够空间显示注释窗口自动切换成在元素下放弹出。
    Demo: http://kaiyuan.github.io/footnotes.js/sup.html
    Github: https://github.com/Kaiyuan/bootstrap.footnotes.js

    注意的是,可能我变量的命名太随便,或许会和其他插件或者你们写的变量有冲突。

    我现在还不了解实时获取当前窗口高宽,所以当浏览器改变窗口大小时候没有刷新页面没能正确判断合适方式显示注释。



    前两天仿照 http://elenagreta.com/ 上的画框做了一个 CSS3 版本 http://cdpn.io/BIbru
    4 条回复    1970-01-01 08:00:00 +08:00
    kk71
        1
    kk71  
       2013-06-12 19:27:10 +08:00
    顶一下~
    vixvix
        2
    vixvix  
       2013-06-12 22:10:36 +08:00
    感谢后再赞一个。
    yueyoum
        3
    yueyoum  
       2013-06-13 15:10:34 +08:00
    cool !
    davepkxxx
        4
    davepkxxx  
       2013-06-13 15:29:01 +08:00
    收藏了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5908 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 02:13 · PVG 10:13 · LAX 18:13 · JFK 21:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.