随笔分类 - [10]JS
-
真爱生命,远离js、css版本号
摘要:被折腾的日子 以前不觉得js、css版本号的处理是个问题,直到最近被折磨的吐血,才发现往往不是问题的地方恰好就是问题所在。 以前接触的项目js和css一直都是放在项目下面的js和css文件夹下,没有版本号,风平浪静,现在的项目,为js和css单独搭建了一台服务器,好像还有什么nginx,竟然能把所有的js和css缓存起来,你说缓存会失效吧,他总是不在我想要的时候失效,出现bug总是因为缓存失效。 项目之前是用一个可配置的版本号来处理这个问题,版本号放在 appSettings里面,这样出了几个小问题 1 修改版本号时需要iis重启 2好几台服务器,appSettings 不能批量上传,谁也不敢 阅读全文
-
Win8风格的Web启动界面
摘要:Win8风格的Web启动界面主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。页面布局HTML<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type= 阅读全文
-
joomla
摘要:最近比较忙,没有时间写一些joomla教程,今天抽空来说说如何扩展上传图片的同时生成缩略图,这样就不用在显示图的时候设置宽度高度,而且可以让页面加载很快,对于图片展示类型网站和模版类网站,我想都是需要这样一个实用的功能的吧.joomla1.5版本没有自带这个功能,今天我就来实现,并且在上传的时候自动存入数据库.在数据库里面,我们用当前时间戳来保存图片名字,这样不会有重命名问题.如果你想保存原名字,那么你可以存入数据库。对于图片我们只保存一张图片文件的名字,缩略图我们使用前缀_时间戳来保存,时间戳和大图是一样的.这样可以减少一个字段。好了原理就是这样。 对于上传来的图片,我们需要进行处理,例如我 阅读全文
-
【NodeCC】nodejs版本的脚本压缩和compo工具
摘要:对于前台开发而言,为了降低文件大小,js文件和css文件的压缩和组合几乎是默认的规矩。我们利用YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。 甚至 yui compressor 本身都已经支持 多文件的批量压缩。但是,为了更好的处理这些机械化的事情,我们通常还是需要脚本来辅助,让这些工作可以更好的自动化,可配置化。网上有很多类似的脚本工具,或者有的也已经编译成了可视化的工具来使用。我自己以前也写过python版本的,也用过同事写的类似的脚本,基本也都是python版本的。鉴于大多数前端的攻城师们对js更为熟悉,所以,这里也提供一个简易的nodej 阅读全文
-
jQuery Tools Scrollable使用的限制
摘要:在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似jQuery Tools。这是一个基本demo地址:http://jquerytools.org/demos/scrollable/index.html项目中使用了3个Tab,简称TabA,TabB,TabC,每个Tab下面对应一张图片,图片上有很多hot point,用户点击hot point之后,显示一个overlay。上面的图片是使用Scrollable制作的,上面的图片时一系列的,可以点击previous和next按钮来显示上一张 阅读全文
-
360 Degrees Viewer – WordPress Plugin
摘要:在今天的文章中,我们已经聚集了jQuery插件,允许你创建一个360度旋转图片.这些插件,主要用于在网上购物网站显示各个角度详细的外观.这个技术的产品是一点点付出努力,但结果是惊人的。360 Panorama for jQueryDemo&Source360/3D Spin & Zoom JavaScript PlayerDemo&SourceReel 1.1.4Demo&SourceMultiple 360 Images On One PageDemo&Source360 Degrees Product ViewDemo&SourceSprit 阅读全文
-
测试是否支持DOMAttrModified
摘要:如果不支持propertychange事件,就使用这个,或者更高端的MutationObserver.?var root = document.documentElement supportDOMAttrModified = root.addEventListener ?(function() {var fn, f = false, id = root.id;fn = function() {root.removeEventListener('DOMAttrModified', fn, false);supportDOMAttrModified = true;root.id = 阅读全文
-
jQuery Colorbox插件
摘要:一. Colorbox插件介绍jQuery Colorbox是一款非常好的内容播放插件。它集弹出层、幻灯片播放功能于一身,不仅于此,它还支持其它的内容格式:例如html, flash, iframe等,这些内容的显示方式都是Ajax的。更难能可贵的是,在压缩后它只有10K的大小,使用这款插件不会给你的网页带来过多的负担,而且还能实现很棒的视觉效果,为用户体验增色不少。本文已经同步至我的个人博客站点:积累吧|jQuery Colorbox插件Colorbox项目的主页地址是:http://www.jacklmoore.com/colorbox项目主页中提供了5种不同样式的Example:Exam 阅读全文
-
Node.js 技術
摘要:關於本書這是一本關於 Node.js 技術的開放源碼電子書,我們使用 GitHub 維護電子書內容,並交由 ContPub(Continuous Publishing)系統自動線上發佈。本書提供 PDF、EPUB、MOBI 及 HTML 等格式,您除了可以在網站檢視本書所有內容,也可以將電子書下載至閱讀器保存。本書的線上閱讀網址,與 GitHub 資料同步更新。http://book.nodejs.tw/如果您想要取得本書的其他格式,可以從 ContPub 的電子書專頁下載最新版本。http://contpub.org/read/nodejs-wiki-book本書適合 Node.js 初學者 阅读全文
-
自定义提示框(alert、confirm 可自定义标题 内容 图标 取消按钮)
摘要:声明:本例子是基于自定义confirm对话框做的修改效果:源代码示例下载【主函数】1、msgbox(title,text,func,cancel,focus,icon)参数说明:title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。cancel :弹出对话框是否显示取消按钮,为空 阅读全文
-
RequireJS
摘要:RequireJS由James Burke创建,他也是AMD规范的创始人。RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞(blocking)的情况发生。好,以一个简单示例开始。新建一个目录,结构如下目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。index.html如下?1234567891011<!doctype html 阅读全文
-
javascript性能优化-repaint和reflow
摘要:repaint(重绘),repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。何时发生:1. DOM元素的添加、修改(内容)、删除( Reflow + Repaint)2. 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)3. 应用新的样式或者修改 阅读全文
-
写一段最短的代码,用上js所有关键字
摘要:群里的题目:void function() {//abcd do break;while(typeof delete this);for(var a;;)if (true) with(null)try{}catch(a){}finally{} else throw new 1;switch(1 in 1 instanceof 1) {case false:default:}return;};谢谢@闹闹爷的提醒,搞了个改进版new function() {do break;while(typeof delete this);for(var a;void 0;)continueif (null)w 阅读全文
-
mass Framework css模块 v3
摘要:本模块最大的亮点是完美解决了一个世界难题,在IE678下模拟CSS3 transform 2D。CSS3 transform 2D归根结底就是矩阵变换的问题,大家都知道利用IE的矩阵滤镜来解。但里面的坑太多,一旦发生旋转或扭曲,然后再进行位移,之前所有的JS库都是计算错误的。本来将一步步带你揭开这谜底。要实现css transform 2D,就要动用到一个CSS3新属性——transform。但在本文写作之时,还没有任何一个浏览器支持w3c所说的那个标准属性,都是带前缀。因此mass Framework,使用了一个叫cssName的方法,取得所有能用的私有实现名。transform在框架可能用 阅读全文
-
Knockout 2.1版本
摘要:Knockout.JS2.1现在已经发布了! 源代码可以在这里下载here. 这个版本主要是对2.0版本进行了一些bug修复,以及性能优化。下面是主要的新特性:CommonJS andAMD support【支持异步定义组件,以及配合requireJS异步加载viewModel、进行绑定】Great performance improvements to templating - use cloned DOM nodes when possible rather than parsing strings into elements. 【模板的性能优化:尽可能的使用复制DOM节点的方式而不是往D 阅读全文
-
jquery contentShown
摘要:jQuery 版本要求: 1.4 以上。功能介绍: 它不仅仅只是一个幻灯类型的插件。对于一些简单的新闻轮显,tab页,甚至更加复杂的多tab切换都能够很好的支持。jquery contentShown 的前身是 jquery imageShown,新版的content shown 插件很多方法都被重写或者被合并,以提供更高的性能,特别是在loop设置为true的状态下,性能提升较大。同时解决已发现的bug。提供了更加友好的变量名称。同时提供多个接口供开发者外部使用,回调函数的执行逻辑更加合理,现在的回调函数执行时, 你可以通过插件提供的api来暂停正在进行的当前动画,当回调函数执行完毕之后你. 阅读全文
-
free computer books
摘要:http://freecomputerbooks.com/淘宝前端技术系列课程分享 前几天在淘宝UED(http://ued.taobao.com/blog/)上看到了几篇不错的文章,且都有PPT,里面总结的很不错,因此分享给大家,主要针对的是初级前端开发者。这一系列课程由浅入深的介绍前端技术的关键部分,对HTML/CSS/JavaScript、包括浏览器渲染过程和JS引擎原理、常用工具等知识都有详细的讲解。一、淘宝前端技术巡礼 这一讲主要介绍了淘宝前端的技术发展。 原文地址:前端技术系列课程(No.1) – 淘宝前端技术巡礼 PPT如下: PPT地址:http://www.slid... 阅读全文
-
老程序员从头开始学JQuery的读书笔记
摘要:从事软件设计开发十多个年头了,Delphi、C#、Asp.Net/WinForm、Silverlight/WPF等各种语言或技术,在实际的项目中也都曾使用过,可以算是老程序员了。 一直都没有认真对待过JQuery,可能当初认为这种Javascript脚本框架很难流行,个人也一直认为BS系统的软件的界面,单只是依赖于这种轻量级的框架是很难追赶上Windows窗体的步伐,无论从开发效率还是最终的用户体验。Ajax在我看来其实也只是个噱头,在没有Ajax这个词的时候,许多开发人员可能已经用原生的Javascript这么做了,只是没有这个名词与框架的概念。加上SilverLight/WPF的推出,.. 阅读全文
-
如何让【推荐】【反对】层跟随滚动条移动
摘要:今天下午有时间阅读【汤姆大叔的博客】,发现他的博客风格的确很专业,说起来也真惭愧啊,我现在终于得到了专职前端的岗位,自己博客风格还是那么土里吧唧的,这个和我工作十分不相称。不过我还是很喜欢自己现在博客的风格,很简洁,有点谷歌百度的风格,我不想大改自己博客的风格,但是如果发现别人博客里有好东西我就加到自己的博客里。比如【汤姆大叔的博客】里那个可以跟随滚动条一起滚动的【推荐】【反对】层就很不错。我已经将这段代码加入到了我自己博客里,这里我就讲讲我是怎么把这段代码找到,最后如何嵌入到自己博客里的。 我的工具是firefox+firebug插件。 首先打开【汤姆大叔的博客】的一篇博客:http:/.. 阅读全文
-
中文前端UI框架Kit---揭开高级事件管理的神秘面纱
摘要:从今天这章开始,我将会着重介绍KitJs的事件管理的内容,尽量用浅显的语言给大家揭露主流的js框架是如何在内部实现自己独立的事件管理功能的。kitjs Demo地址:http://xueduany.github.com/KitJs/KitJs/index.htmlSource Code:https://github.com/xueduany/KitJs(一)普通的Dom事件我们一般可以通过支持在HTML写上事件<a onclick=”alert(1)”>测试</a>或者取到dom对象后绑定document.getElementById(‘a’).onclick=func 阅读全文