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

2013-05-01 22:14:06 +08:00
 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的朋友。

如果你对这个项目有兴趣,不妨等我重构完成后你尝试用于你的实际项目中,然后根据实践我们一起来完善它吧 :)
6047 次点击
所在节点    程序员
37 条回复
jasya
2013-05-02 17:47:40 +08:00
@sdjl 晚上回家再看看,^^
发现非常的贴心..真如所说不需要一点知识
Scroll fx position: fixed;都是生成的
Yannis1990
2013-05-02 19:34:11 +08:00
chrome 26.0.1410.64 m / windows

晚上回家在 OS X上试试...
Yannis1990
2013-05-02 19:35:01 +08:00
@sdjl 忘记@ 了,应该不是兼容性的问题, ff下已经试过了....一样的错误
loading
2013-05-02 20:05:59 +08:00
这样的帖子怎能只收藏不给铜币
sdjl
2013-05-02 21:23:19 +08:00
@Yannis1990 好的 等我重构完后集中测试兼容性 谢谢

@loading 谢谢赞助:)
Yannis1990
2013-05-02 23:49:15 +08:00
奇怪还是..报错,难道我的demo有问题?

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

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

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

这些问题还需要多思考一下~~~
1dian01
2013-05-05 23:07:47 +08:00
@sdjl 是否有空帮忙做个一个网站项目http://www.v2ex.com/t/67755#reply8
sdjl
2013-05-06 11:08:07 +08:00
@1dian01 设计完成的话最好谈了, 你发设计给我我给你报一个参考价格吧。
我邮箱 SDJLLYH的gmail.com
JackyHua
2013-05-07 10:51:40 +08:00
很好!膜拜

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/67450

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX