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

[sdjl]

之前在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的朋友。

如果你对这个项目有兴趣，不妨等我重构完成后你尝试用于你的实际项目中，然后根据实践我们一起来完善它吧 ：）

[jueying510]

我来支持一下，能把常用的东西做成通用模块并乐于分享，这种精神值得肯定。

[thenewbie]

太强大了！举双手支持～～

[jasya]

目前还不习惯直接在标签上添加条件属性的写法
<p fx="widthshow[rule=-800 hide, 801- show]" class="red">当浏览器宽度小于800时我就消失</p>

不知道这种写法有什么好处吗

[metaclass]

神一样的前端攻城师！

[guchengf]

感谢！

[sdjl]

@jasya 有好处，也有坏处，我就回答一下有什么好处
1 你不用打开js文件编写js代码了，修改的时候也容易找到
2 把命令式的逻辑代码变成描述性的表达代码， 更容易读懂，更容易维护。 工作交接的时候也更轻松， 想想你的项目中有太多的js文件和函数， 接收工作的新手会感到多么大的压力。
3 当然，最重要的还是， 容易上手，容易读懂。

[squallsdjl]

神一样的队友

[khowarizmi]

mark！

[fregen]

这种写法不合jquery的习惯

[Feobe]

不说了，帮顶，多好的开源精神。不过要做好用户多起来后，成倍增长的改进意见和升级建议~

[jasya]

@sdjl (*´v`)非常不错...感谢,找时间做几个fx pull上来

[sdjl]

@jasya 好的， 期待！ 可以在github上fork， 有新fx的话发起pull request
https://github.com/sdjl/zarkfx

[sdjl]

@fregen 提高生产力才是硬道理

[jasya]

@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]

靠杯..我的错..confirm是原生的方法- -...没用过...sorry

[Yannis1990]

楼主....

测试demo出错：

load fx cycle failed

debug了一下

textStatus是undefined，什么问题？

[xgdy]

屌爆了
楼主是牛人

[sdjl]

@jasya 你说的QWQ是什么？

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

[jasya]

@sdjl 表情- -

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


还有本地那个docs/demo的目录下的文件全部运行不了..导入脚本路径有点问题哟

[sdjl]

刚才又发布了一个新的fx， 表单验证： http://v2ex.com/t/67517
这个是我们原创fx中最复杂， 最有用的一个了



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

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

这里说明一下， 每个fx文件的前面会有一段注释，这个注释既是使用帮助，也是用来生成可视化文档的代码（使用sphinx文档程序生成），目前还没有提供压缩的版本 : )

[jasya]

@sdjl 晚上回家再看看,^^
发现非常的贴心..真如所说不需要一点知识
Scroll fx position: fixed;都是生成的

[Yannis1990]

chrome 26.0.1410.64 m / windows

晚上回家在 OS X上试试...

[Yannis1990]

@sdjl 忘记@ 了，应该不是兼容性的问题， ff下已经试过了....一样的错误

[loading]

这样的帖子怎能只收藏不给铜币

[sdjl]

@Yannis1990 好的 等我重构完后集中测试兼容性 谢谢

@loading 谢谢赞助：）

[Yannis1990]

奇怪还是..报错,难道我的demo有问题?

https://gist.github.com/yannisxu/5503103#file-zarkfxdemo-html

[sdjl]

@Yannis1990 用jquery1.7.2吧 1.3.2可能有点问题

[AlloVince]

Web项目遵守规范是基本，你完全可以在html标签中使用data-fx=“”，而不要用fx=""这种奇怪的自定义标签

[sdjl]

@AlloVince 我坚持节约自己的时间才是根本，如果为了遵守规范不得不每天多打这么多次“data-”那得多么憋屈啊，这种思维太教条化了，万一有一天fx和规范冲突了，那么只需要用正则表达式对所有文件替换一下就ok了

不过你可以自己修改这个参数， 只需要打开zarkfx.js 文件， 然后在前面几行就可以找到配置， 改为你想要的值就行

[AlloVince]

@sdjl 如果你的项目只是自己玩玩那无所谓，如果你目标真的是面向大众，那么遵守规范才会有更多用户使用你的产品。至少我一看文档fx=""就直接点叉了

[sdjl]

@AlloVince 嗯，你说的这个是有这种情况的， 不过这个问题要多考虑一下， 毕竟html是包容的现实主意，而不是规范化的理想注意。 如果写成data-fx的话，许多人会嫌麻烦的。

[sdjl]

“现实主义”和“理想主义”。。。 两次都打错了~~~

[gouflv]

看了下, 配置方式有点像bootstrap, 但是一个元素的fx里面的配置很多的时候, 一个字符串会非常长, 完全不利于查看(代码高亮)和维护, 所以建议一个元素上还是用 多个'data-'做配置吧
ps: 说实话, 用fx这个属性一点都不像是前端开发写的

[sdjl]

@gouflv 你的意思是 data-fx-scroll="***" data-fx-cycle="***" 这样写？

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

这些问题还需要多思考一下~~~

[1dian01]

@sdjl 是否有空帮忙做个一个网站项目http://www.v2ex.com/t/67755#reply8

[sdjl]

@1dian01 设计完成的话最好谈了， 你发设计给我我给你报一个参考价格吧。
我邮箱 SDJLLYH的gmail.com

[JackyHua]

很好！膜拜