Home Sign Up Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
sdjl
V2EX  ›  程序员

五一放假这几天猛写，一起来回忆这些年我们一起写的js

  •   
  •   sdjl · May 1, 2013 · 6886 views
    This topic created in 4780 days ago, the information mentioned may be changed or developed.
    之前在v2ex发了几个关于zarkfx项目的帖子， 想必再一个fx一个帖子的话必然会引起大家的反感了， 今天我直接一口气给大家介绍27个fx， 这些fx除了之前有介绍的几个以外都是五一放假这几天我在家里赶出来的， 还来不及测试ie的兼容性， 所以大家先用高级一点的浏览器看了

    accordion 手风琴导航效果
    http://zarkfx.com/auto_gen/accordion.html

    autocomplete 自动补全输入
    http://zarkfx.com/auto_gen/autocomplete.html

    bgimage 自适应屏幕尽可能多地显示背景图
    http://zarkfx.com/auto_gen/bgimage.html

    confirm 用简单的办法添加点击确认提示
    http://zarkfx.com/auto_gen/confirm.html

    cycle 非常强大的幻灯片效果
    http://zarkfx.com/auto_gen/cycle.html

    datepicker jquerui日期选择插件
    http://zarkfx.com/auto_gen/datepicker.html

    center 让某个元素居中显示，可以位于浏览器正中央， 或是位于某个div中间
    http://zarkfx.com/auto_gen/center.html

    ddpng 让png图片在ie6下实现半透明效果
    http://zarkfx.com/auto_gen/ddpng.html

    defaultvalue 用简单办法给select或radio input元素设置默认值
    http://zarkfx.com/auto_gen/defaultvalue.html

    elastic 让textarea元素根据输入文本的长度自动调整高度
    http://zarkfx.com/auto_gen/elastic.html

    firstchar 改变第一个字符的样式
    http://zarkfx.com/auto_gen/firstchar.html

    focusclean 鼠标点击input输入框后清空里面的提示文字
    http://zarkfx.com/auto_gen/focusclean.html

    fxdemo 在前端调试fx的工具
    http://zarkfx.com/auto_gen/fxdemo.html

    hoverpulse 鼠标放到某个img或div标签上面时放大元素
    http://zarkfx.com/auto_gen/hoverpulse.html

    keydown 用通俗的办法给元素绑定键盘事件， 比如ctrl+enter提交表单
    http://zarkfx.com/auto_gen/keydown.html

    lazyload 延迟加载图片，改善前端体验、节约带宽与减小服务器压力
    http://zarkfx.com/auto_gen/lazyload.html

    overlayer 用简单的办法实现遮罩层
    http://zarkfx.com/auto_gen/overlayer.html

    paging 用简单的办法实现前端页码
    http://zarkfx.com/auto_gen/paging.html

    position 把一个元素放到另一个元素的旁边，或跟随鼠标光标
    http://zarkfx.com/auto_gen/position.html

    scroll 滚动页面到顶部，或者某个指定的元素位置
    http://zarkfx.com/auto_gen/scroll.html

    staytop 当向下滚动页面时，让某个元素停留在顶部（常用于广告）
    http://zarkfx.com/auto_gen/staytop.html

    switch 用简单的办法实现在多个div之间切换显示
    http://zarkfx.com/auto_gen/switch.html

    toggle 控制某些元素的显示与消失，很常用
    http://zarkfx.com/auto_gen/toggle.html

    typelimit 限制输入的字数
    http://zarkfx.com/auto_gen/typelimit.html

    urlparameter 修改url中某个参数的值，而保持其它参数与当前url中的一致
    http://zarkfx.com/auto_gen/urlparameter.html

    widthshow 根据屏幕宽度显示或隐藏元素，常用于需要同时兼容电脑与手机不同设备的情况
    http://zarkfx.com/auto_gen/widthshow.html

    zeroclipboard 点击按钮复制文本到粘贴板
    http://zarkfx.com/auto_gen/zeroclipboard.html


    正如你所见，zarkfx致力于聚合网络中不错的开源js项目，然后修改它们的调用接口，实现统一的调用方式，统一的文档风格。

    作为前端开发者，我们时不时的要去使用这些功能，但是这些简单的功能往往需要我们花费大量的时间去学习如何使用别人的代码，甚至可能找不到可用的代码不得不自己去写。

    我个人认为把时间花在这些事情上面是不值的，除非你励志要做优秀的前端工程师，但是大多数人不是这样，他们只是不得不去实现这么一个功能而已。

    因此，我们团队根据自己的经验，发起zarkfx这个被这里的朋友们称之为“诡异”的项目，目的就是花最少的学习成本实现常用js的功能，同时照顾不懂js的朋友。

    如果你对这个项目有兴趣，不妨等我重构完成后你尝试用于你的实际项目中，然后根据实践我们一起来完善它吧 ：）
  • 元素
  • JS
  • fx
    37 replies  •  1970-01-01 08:00:00 +08:00
    jueying510
        1
    jueying510  
       May 1, 2013
    我来支持一下，能把常用的东西做成通用模块并乐于分享，这种精神值得肯定。
    thenewbie
        2
    thenewbie  
       May 1, 2013
    太强大了！举双手支持～～
    jasya
        3
    jasya  
       May 2, 2013
    目前还不习惯直接在标签上添加条件属性的写法
    <p fx="widthshow[rule=-800 hide, 801- show]" class="red">当浏览器宽度小于800时我就消失</p>

    不知道这种写法有什么好处吗
    metaclass
        4
    metaclass  
       May 2, 2013
    神一样的前端攻城师！
    guchengf
        5
    guchengf  
       May 2, 2013
    感谢！
    sdjl
        6
    sdjl  
    OP
       May 2, 2013
    @jasya 有好处，也有坏处，我就回答一下有什么好处
    1 你不用打开js文件编写js代码了，修改的时候也容易找到
    2 把命令式的逻辑代码变成描述性的表达代码， 更容易读懂，更容易维护。 工作交接的时候也更轻松， 想想你的项目中有太多的js文件和函数， 接收工作的新手会感到多么大的压力。
    3 当然，最重要的还是， 容易上手，容易读懂。
    squallsdjl
        7
    squallsdjl  
       May 2, 2013
    神一样的队友
    khowarizmi
        8
    khowarizmi  
       May 2, 2013   ❤️ 1
    mark！
    fregen
        9
    fregen  
       May 2, 2013 via Android
    这种写法不合jquery的习惯
    Feobe
        10
    Feobe  
       May 2, 2013
    不说了，帮顶，多好的开源精神。不过要做好用户多起来后，成倍增长的改进意见和升级建议~
    jasya
        11
    jasya  
       May 2, 2013
    @sdjl (*´v`)非常不错...感谢,找时间做几个fx pull上来
    sdjl
        12
    sdjl  
    OP
       May 2, 2013
    @jasya 好的， 期待！ 可以在github上fork， 有新fx的话发起pull request
    https://github.com/sdjl/zarkfx
    sdjl
        13
    sdjl  
    OP
       May 2, 2013   ❤️ 1
    @fregen 提高生产力才是硬道理
    jasya
        14
    jasya  
       May 2, 2013
    @sdjl po主po主

    看了下,http://zarkfx.com/write_new_fx.html#id1 感觉并没有很明白的交代如何编写QWQ

    <script src="https://gist.github.com/jasya/5500453.js"></script>

    找个一个最简单的来看,就问下confirm方法是alert弹窗的..但是...没有找到他定义的位置- -...
    jasya
        15
    jasya  
       May 2, 2013
    靠杯..我的错..confirm是原生的方法- -...没用过...sorry
    Yannis1990
        16
    Yannis1990  
       May 2, 2013
    楼主....

    测试demo出错：

    load fx cycle failed

    debug了一下

    textStatus是undefined，什么问题？
    xgdy
        17
    xgdy  
       May 2, 2013
    屌爆了
    楼主是牛人
    sdjl
        18
    sdjl  
    OP
       May 2, 2013
    @jasya 你说的QWQ是什么？

    @Yannis1990 请用高级浏览器， 比如firefox chrome safari等， 兼容性这几天继续处理。。。 这个也许是某些语法当前浏览器不能识别， 顺便问一下你用的是什么浏览器？ 我测试测试
    jasya
        19
    jasya  
       May 2, 2013
    @sdjl 表情- -

    你这个仓库好像没有所有fx 全部demo的地址呢.能添加上去吗,好像发现bug了-.-


    还有本地那个docs/demo的目录下的文件全部运行不了..导入脚本路径有点问题哟
    sdjl
        20
    sdjl  
    OP
       May 2, 2013
    刚才又发布了一个新的fx， 表单验证： http://sunp.eu.org/t/67517
    这个是我们原创fx中最复杂， 最有用的一个了



    @jasya 所有fx的列表地址为: http://zarkfx.com/index.html
    docs/demo目录下的样例是用于在文档中访问的， 可能需要通过nginx请求才行

    如果你是用linux的话， 可以先安装sphinx文档工具， 然后在docs下make就可以用fx js文件中的注释生成html文档，就像线上的文档一样。

    这里说明一下， 每个fx文件的前面会有一段注释，这个注释既是使用帮助，也是用来生成可视化文档的代码（使用sphinx文档程序生成），目前还没有提供压缩的版本 : )
    jasya
        21
    jasya  
       May 2, 2013
    @sdjl 晚上回家再看看,^^
    发现非常的贴心..真如所说不需要一点知识
    Scroll fx position: fixed;都是生成的
    Yannis1990
        22
    Yannis1990  
       May 2, 2013
    chrome 26.0.1410.64 m / windows

    晚上回家在 OS X上试试...
    Yannis1990
        23
    Yannis1990  
       May 2, 2013
    @sdjl 忘记@ 了，应该不是兼容性的问题， ff下已经试过了....一样的错误
    loading
        24
    loading  
       May 2, 2013
    这样的帖子怎能只收藏不给铜币
    sdjl
        25
    sdjl  
    OP
       May 2, 2013
    @Yannis1990 好的 等我重构完后集中测试兼容性 谢谢

    @loading 谢谢赞助：）
    Yannis1990
        26
    Yannis1990  
       May 2, 2013
    奇怪还是..报错,难道我的demo有问题?

    https://gist.github.com/yannisxu/5503103#file-zarkfxdemo-html
    sdjl
        27
    sdjl  
    OP
       May 3, 2013
    @Yannis1990 用jquery1.7.2吧 1.3.2可能有点问题
    AlloVince
        28
    AlloVince  
       May 3, 2013
    Web项目遵守规范是基本，你完全可以在html标签中使用data-fx=“”，而不要用fx=""这种奇怪的自定义标签
    sdjl
        29
    sdjl  
    OP
       May 3, 2013
    @AlloVince 我坚持节约自己的时间才是根本，如果为了遵守规范不得不每天多打这么多次“data-”那得多么憋屈啊，这种思维太教条化了，万一有一天fx和规范冲突了，那么只需要用正则表达式对所有文件替换一下就ok了

    不过你可以自己修改这个参数， 只需要打开zarkfx.js 文件， 然后在前面几行就可以找到配置， 改为你想要的值就行
    AlloVince
        30
    AlloVince  
       May 3, 2013
    @sdjl 如果你的项目只是自己玩玩那无所谓，如果你目标真的是面向大众，那么遵守规范才会有更多用户使用你的产品。至少我一看文档fx=""就直接点叉了
    sdjl
        31
    sdjl  
    OP
       May 3, 2013
    @AlloVince 嗯，你说的这个是有这种情况的， 不过这个问题要多考虑一下， 毕竟html是包容的现实主意，而不是规范化的理想注意。 如果写成data-fx的话，许多人会嫌麻烦的。
    sdjl
        32
    sdjl  
    OP
       May 3, 2013
    “现实主义”和“理想主义”。。。 两次都打错了~~~
    gouflv
        33
    gouflv  
       May 4, 2013
    看了下, 配置方式有点像bootstrap, 但是一个元素的fx里面的配置很多的时候, 一个字符串会非常长, 完全不利于查看(代码高亮)和维护, 所以建议一个元素上还是用 多个'data-'做配置吧
    ps: 说实话, 用fx这个属性一点都不像是前端开发写的
    sdjl
        34
    sdjl  
    OP
       May 4, 2013
    @gouflv 你的意思是 data-fx-scroll="***" data-fx-cycle="***" 这样写？

    同一个元素用多个fx导致代码比较长这个问题确实会导致编写麻烦， 目前我们主要在使用check的时候会遇到这个问题， 其它fx一般都不会用得太多。

    这些问题还需要多思考一下~~~
    1dian01
        35
    1dian01  
       May 5, 2013
    @sdjl 是否有空帮忙做个一个网站项目http://www.sunp.eu.org/t/67755#reply8
    sdjl
        36
    sdjl  
    OP
       May 6, 2013
    @1dian01 设计完成的话最好谈了， 你发设计给我我给你报一个参考价格吧。
    我邮箱 SDJLLYH的gmail.com
    JackyHua
        37
    JackyHua  
       May 7, 2013
    很好！膜拜
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3938 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 104ms · UTC 05:05 · PVG 13:05 · LAX 22:05 · JFK 01:05
    ♥ Do have faith in what you're doing.