五一放假这几天猛写,一起来回忆这些年我们一起写的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的朋友。

如果你对这个项目有兴趣,不妨等我重构完成后你尝试用于你的实际项目中,然后根据实践我们一起来完善它吧 :)
6076 次点击
所在节点    程序员
37 条回复
jueying510
2013-05-01 23:31:05 +08:00
我来支持一下,能把常用的东西做成通用模块并乐于分享,这种精神值得肯定。
thenewbie
2013-05-01 23:40:06 +08:00
太强大了!举双手支持~~
jasya
2013-05-02 00:05:48 +08:00
目前还不习惯直接在标签上添加条件属性的写法
<p fx="widthshow[rule=-800 hide, 801- show]" class="red">当浏览器宽度小于800时我就消失</p>

不知道这种写法有什么好处吗
metaclass
2013-05-02 04:38:46 +08:00
神一样的前端攻城师!
guchengf
2013-05-02 08:10:24 +08:00
感谢!
sdjl
2013-05-02 09:19:12 +08:00
@jasya 有好处,也有坏处,我就回答一下有什么好处
1 你不用打开js文件编写js代码了,修改的时候也容易找到
2 把命令式的逻辑代码变成描述性的表达代码, 更容易读懂,更容易维护。 工作交接的时候也更轻松, 想想你的项目中有太多的js文件和函数, 接收工作的新手会感到多么大的压力。
3 当然,最重要的还是, 容易上手,容易读懂。
squallsdjl
2013-05-02 10:24:54 +08:00
神一样的队友
khowarizmi
2013-05-02 10:27:38 +08:00
mark!
fregen
2013-05-02 10:28:26 +08:00
这种写法不合jquery的习惯
Feobe
2013-05-02 10:30:23 +08:00
不说了,帮顶,多好的开源精神。不过要做好用户多起来后,成倍增长的改进意见和升级建议~
jasya
2013-05-02 10:56:33 +08:00
@sdjl (*´v`)非常不错...感谢,找时间做几个fx pull上来
sdjl
2013-05-02 12:48:12 +08:00
@jasya 好的, 期待! 可以在github上fork, 有新fx的话发起pull request
https://github.com/sdjl/zarkfx
sdjl
2013-05-02 12:49:30 +08:00
@fregen 提高生产力才是硬道理
jasya
2013-05-02 14:17:10 +08:00
@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
2013-05-02 14:29:18 +08:00
靠杯..我的错..confirm是原生的方法- -...没用过...sorry
Yannis1990
2013-05-02 14:46:19 +08:00
楼主....

测试demo出错:

load fx cycle failed

debug了一下

textStatus是undefined,什么问题?
xgdy
2013-05-02 15:00:05 +08:00
屌爆了
楼主是牛人
sdjl
2013-05-02 17:09:11 +08:00
@jasya 你说的QWQ是什么?

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

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


还有本地那个docs/demo的目录下的文件全部运行不了..导入脚本路径有点问题哟
sdjl
2013-05-02 17:30:21 +08:00
刚才又发布了一个新的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文档程序生成),目前还没有提供压缩的版本 : )

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

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

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

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

© 2021 V2EX