Nolan's Blog

a PHP JS UI APP developer

Javascript

Plupload Event parameter

Init(up) // After plupload initialization

PostInit(up) // After Init

QueueChanged(up) // Before FilesAdd or FilesRemove

BeforeUpload(up, file)

Error(up, err)

FileFiltered(up, file) // Before Fileadded

Fileadded(up, files)

FileRemoved(up, files)

FileUploaded(up, file, res)

UploadComplete(up, files) // After all files uploaded

UploadFile(up, file) // After one file upload start

UploadProgress(up, file)

继续阅读》

HTML 5 little cookbook

Tag

Voice input :


<input type=”text” x-webkit-speech />

Get picture form Camera :


<input type=”file” accept = “image/*; capture=camera” />
<input type=”file” accept = “video/*; capture=camcorder” />
<input type=”file” accept = “audio/*; capture=microphone” />

Send sms to people :


<a href="sms:18005555555?body=Text%20goes%20here">Send SMS</a> 

Tel somebody :


<a href="tel:18005555555">Call us at 1-800-555-5555</a>

继续阅读》

, , ,

Bower: A Javascript package manager

What’s Bower?

HomePage : http://bower.io/
GitHub : https://github.com/bower/bower

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management,while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

bower

Why to use Bower?

We often need jQuery and some Plugins in our project. Sometime we need a new plugin with a new version jquery, sometime we need update our project something for a new idea like HTML5? Mobile?
So we want to update it! but which packages should be updated and which version should be choose for us.
Bower did it.

继续阅读》

, ,

UI 如何自己打造一个web scrollbar

嘛,最近 Chrome 升级了. 不知道大家有没有发现, 我是今天刚升级的, 开始还蛮不适应, 以为开了什么特别的模式.
不过 Chrome 倒是把 Mobile 模拟放到了一个更方便地方(debug输出区标签).
除此之外,就是 scrollbar 进行的大变更, 更像移动端的设计了~ 可喜可贺.多少年了,那个占了20px的滚动条终于消失了!

scrollbar

看! 右侧那个小小的滚动条,和wordpress的感觉更融合了,好棒!! google给你1024个赞~~
那好,趁着这次机会,我就翻出我那个厚厚的小笔记,分享一下scrollbar的设计与实现吧…

继续阅读》

, , , , ,

JS 修复/汉化NicEdit 并提供下载

NicEdit官网:NicEdit.com – WYSIWYG Content Editor, Inline Rich Text Application

NicEdit

NicEdit 是一款极轻量级的web编辑器.一个美国小帅哥22岁时候写的(07年,嘛..13年就28岁了).
嘛,我也差不多22岁的时候开始用它?这也算缘分的话…笑:)
由于作者工作了..官网对NicEdit已停止更新,而最近浏览器对协议的改变又出现不少的bug.
所以对它进行了修复,标准汉化,功能缩减和扩展.
提供衍生版1.0

延生特性:
NicEdit 作为一个超小切灵活的编辑器,适合用于评论\聊天\微博等功能使用.
但并不适合大型应用,因为过多的功能必然导致使用更多的dom操作,而这些又会引入更多的兼容语句,让它变得臃肿…
介于此,这次主要改变如下:

  1. 没有扩展 BBcode/XHtml/Upload 等功能,该部分官方功能已存在兼容问题或异常.但仍可继承此类功能.
  2. 修复 removeEvent ,清除不完整造成的内存泄露.
  3. 修复 Chrome 出现的 rangeCount 错误.
  4. 修改Enter后自动追加 Div. 已改为默认 p, 如果 Shift+Enter 则为 br.
  5. 增加完整的中文汉化, 使用标准的 __(s) 函数.
  6. 增加表情 nicEditorSmiley 扩展. 参数设置为
    new NicEdit({smiley : {path:’./smiley/default/’, iamges:[“1.gif”,”2.gif”], size:{width:”21px”,height:”21px”}});
    // path.图像路径, images.表情文件名, size 图片大小(可为空).
  7. 对字体大小/字体样式,提供了参数设置 fontSize / fontFamily, 数组结构,参考原结构.
  8. 修改了字体颜色及背景色选择, 提供了更常用的颜色表.
  9. 提供了 basePath 参数, 设置该参数后,表情及图表均可以此目录为根目录设置. eg : new NicEdit({basePath:””});
  10. 修改了默认图标及部分样式,更好看…:P

 感谢vitalif提供的资料支持.

继续阅读》

, , ,

JS 提高Web程序效率的经验

1. 尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。使用设置 innerHTML的方法来替换 document.createElement/appendChild()方法。

2. eval()有问题, new Fuction()构造函数也是,尽量避免使用它们。

3. 拒绝使用 with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。

4. 使用 for()循环替代 for…in循 环。因为 for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。

继续阅读》

,

JQuery 发布一个自写日历插件: icalendar [已更名zdatepicker]

最近项目繁多。。。废话少说。。。

发布一个刚完成的日历插件
重要特性如下:
1.样式与主程序完全分离,采用标准的class定义.
2.提供多月份显示
3.提供多选/区间/禁用区间功能.支持动态获取数据.
4.支持触发事件及触发对象的改变.
5.支持多窗口共存.
6.支持数据格式定义.
7.支持特殊日期文字自定义.


icalendar

查看DEMO >>

继续阅读》

, , , ,

Js中各个高宽属性

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

继续阅读》

, , ,

jQuery.Event 兼容性属性及方法

jQuery的事件系统规范了事件对象按照W3C标准。

本次活动的目的是保证被传递到事件处理程序。从原来的事件大多数属性都复制过去,归到新的事件对象。
jQuery.Event构造

暴露的jQuery.Event构造,可以用来当调用触发器。新的运营商是可选的。

检查触发器的文档,以了解如何结合自己的事件对象。

例如:


// 创建没有“新”的经营者一个新的jQuery.Event对象。
var e = jQuery.Event("click");

// 创建与“新”运营商(可选)一个新的jQuery.Event对象。
var e = new jQuery.Event("click");

继续阅读》

, ,

JavaScript类的声明

1.工厂模式

a.
工厂模式可能是很多开发人员使用的一种模式,简单的说这种方法先定义“地基”,然后在往上面扔(绑定)各种功能和属性。下面的代码可能看起来会非常的熟悉:


var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
	alert(this.color);
}

oCar.showColor();

b.
当然,既然包装成一个类,就要重用它(上面的方法从语法上说仅仅是变量)。可以使用返回特定对象的工厂函数(factory function)将其封装起来:


function createCar() {
	var oCar = new Object;
	oCar.color = "red";
	oCar.showColor = function() {
		alert(this.color);
	}
	return oCar;
}

oCar = createCar();
oCar.showColor();

继续阅读》

, ,

Powered by WordPress.org.