chemzqm
- 浏览: 155086 次
- 性别:
- 来自: 北京
-
最新评论
-
科小新：
99999999999999999
[Ext扩展]两个来自Ext官方论坛的时间控件扩展，可选择时分秒 -
ldl_xz：
http://www.9958.pw/post/css_pos ...
兼容ie6、ie7、ff的css顶端固定位置定位 -
snnosnno：
有浏览器差异吖
[Ext扩展]两个来自Ext官方论坛的时间控件扩展，可选择时分秒 -
lian819：
感谢无私分享了, 必须赞一个啊
[Ext扩展]两个来自Ext官方论坛的时间控件扩展，可选择时分秒 -
Sweetme：
放进项目就行了，成功了。谢谢哦怒赞
[Ext扩展]两个来自Ext官方论坛的时间控件扩展，可选择时分秒
文章列表
玩过QQ开心农场的应该都见过，每次卖完东西都会闪出一个可以自动消失的提示，免去了alert提示用户点击确定的烦恼，用户的体验性更加的流畅。本脚本实现效果跟那个基本一样，如图：
本脚本基于专为网站开发的Ext-core，主体部分来自于Ext的example，本人根据需求进行了适量修改。
脚本特点：
1.跨浏览器，已测试ie6、firefox、chrome
2.基于绝对定位，无论窗体如何滚动，提示框都会出现在页面区域正中间
3.可以同时存在多个，
4.使用简单，只需要ghostTip('标题','提示信息');即可
版本更新：
2010-4-11 修改了元素居中的算法
贴下JS代码，其它文件 ...
简介：根据用户输入文本框的内容在下方弹出一个完整Email列表供用户选择；用户可以按上下键进行选择，可以按回车键选中，也可以用鼠标点击选中；附件是一个小例子
/**
* 根据用户键入内容生成下方提示邮箱列表，主要功能：
* 1.支持按键上、下键循环选择
* 2.支持回车选中内容
* 3.支持鼠标选中内容
* 4.失去焦点时获取当前选择内容
* 特点：
* 1.采用绝对定位，不用担心布局问题
* 2.基于ext-core 3.0支持主流浏览器
* BUG;
* 1.ie6下出现的滚动条时会挡住最下方提示内容
* 2.ie6、chrome不能通过拖 ...
概述：
它是一个基于node的轻量级web server。它可以监听你的css、js、html文件变化自动通知浏览器刷新页面，或者重新载入css文件。它最大的特点就是不用你手工修改html或者使用浏览器插件来建立前后端通讯，而是动态的在html中插入一段无干扰的JS。如果你是做一些前端的练习或者建立前端的测试页面，那么它就很有用了。
安装:
安装node 0.60+（自带npm）
http://nodejs.org/
安装livereload：npm install -g livereload1
运行：
到你项目的根路径下执行命令：livereload
然 ...
猛击进入
在webkit核心的浏览器上还能看到行星自转、公转，我觉得它真的很酷
前段时间参与了我的第一个互联网项目——公司主页改版，主要是负责前端的组件实现（html+js+css）。为了响应领导使用YUI的号召，项目中引入了YUI的延迟加载机制，再加以jquery做为底层库以及一些简单的UI组件，就构成了我们的UI组件库。实现过程没什么难度，不过使用过程却碰到不少问题。
1.页面加载中组件样式错乱。这是因为延迟加载样式造成的，如果css文件加载很快看不出什么来，但要是比较慢的话就会一上来就给用户带来页面凌乱的感觉。简单的解决办法就是把组件的css文件引用添加到页面中来，不过我觉得更好的解决方案是不对样式文件进行延迟加载，而是把组件样式所需的代码块拷贝到当前页面的css文 ...
chrome的网页截图扩展:
https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce?hl=zh-CN
操作方式跟QQ截图差不多，特点就是可以直接上传到网上并与他人分享，省去了保存到本地再上传的麻烦。
firefox的扩展open with：
https://addons.mozilla.org/en-US/firefox/addon/11097/
调试页面的时候不用再把同样的url粘来粘去了。oh，yeah！
chrome的扩展jsbeautifier：
http://code.google ...
1.YUI的延迟加载策略是否适用于我们的网站？
1)如果组件负责布局样式的话，组件样式的延迟加载会造成布局的错乱，这会延迟用户获取有用信息的时间，降低用户体验。
2)延迟加载会增加组件升级的成本。如果对组件进行重构的话其它适用该组件库的项目也需要同步重构，这个过程极有可能造成bug。
3)延迟加载会造成服务器请求数量过多，增加服务器负担。通常解决办法是使用combo的方式整合代码后再发布，这个过程在发布前进行，要修改html中资源文件的引用，很可能因为疏忽引入不必要的bug。
4)延迟加载会造成页面元素加载完成后部分功能暂时不可用，如果是用户一上来就想用的 ...
1.YUI(Ext)-chart其实Ext的chart组件来自于YUI2的chart组件，不过就是Ext做了一点自己的封装罢了，从它们的官网的示例和API你就会看出他们出奇的相似，话说YUI的chart组件也是基于另外一个开源项目。优点：纯JS配置，事件定义多，可以方便的与其它组件交互缺点：图表种类少（没有AreaChart导致我只能放弃）、配置不方便2.dv-charts一款使用xml进行配置的的chart组件,适合于需求简单的项目优点：简单易用、API很清晰缺点：没有明确提供JS接口，中文支持不好3.openflashchart2据说是一个人开发的，采用json进行配置，如果你喜欢用服务器语 ...
公司Linux自带2.4版本的python，尝试yum升级未果（下载到几个补丁）。遂下载Python3.1，根据readme安装完并设置好PATH命令行下输入python结果发现还是2.4版本的，焦头烂额之际想到是否可去卸载之前的python，搜索python文件发现新装的python可执行文件已改名为python3，于是在命令行输入python3，看到了python3的idle...
优点：
1.不用hack，易于理解和维护
2.可通过设置容器宽高来改变内部元素，免去定死宽高的烦恼
注意：
1.容器的高度不包括上下部分的高度
2.调整内部元素宽高需要调整外层div的padding属性
3.多出了2px的地方是因为设置了border属性,通常是没有的
<style type="text/css">
div {
border: 1px solid black;
}
</style>
<div style="margin: ...
总结起来只有六个字：难看、难用、难改
难看：YUI3暂时还没几个widget，就说YUI2的。我第一次看到的YUI组件是calendar组件，当时我就傻眼了，UI竟然可以做的如此难看 后来又看了YUI的Tree组件，发现不光是难看，叶子节点前面竟然还有可收缩的图标
难用：1.API不全，例如chart的刷新方法，我是看了源码找到_setRequest这个方法也解决的，还有很多组件的事件上面都没列出（这点就不举例了，实在太多了）2.API不好查，这点是跟Ext相比了，可能是因为Ext的API实在做的太牛X了吧，如果你也想做出那样的Doc，可以到googlecode上找到开源的Ext Doc ...
1.download YUI3.1.1 and YUI2in3(http://github.com/yui/2in3)
2.include the JS below before the YUI() function
YUI_config = {
groups: {
yui2: {
base: '/2in3/',//the path holding the modules
patterns: {
...
公司要做公网的网站，目前前端框架选定YUI，通过两天学习我发现YUI这个库理解起来一点不比Ext简单，里面很多比较复杂的函数，没有一两个月估计很难有个基本的理解。还是先从最简单的例子学起吧。
YUI().use('node' ...
YUI()函数负责生成一个YUI实例并返回，在参数里可以设置一些配置项，例如debug什么的，这里我们什么都没设置。'node'参数指明要加载的模块，通过控制台我们可以看到页面上会加载到node模块所需的所有js文件。
YUI().use('node' function(Y) ...
use函数的最后一个参数将做为回调函数，该回调函数第一个参数为YUI实例对象； ...
国内使用Ext的可谓不少，但是多数也只限与使用其中示例，真能把Ext理解透彻，尤其是能做到定制组件、内存优化的人恐怕就不多了。经常听到有人说Ext难学，我却觉得能不能学好主要还是在于基础，主要是JavaScript、Html、Css，只要你能把里面的基础概念都理解了，学习Ext也不是什么难事。以下几点来自个人经验以及官网blog上的建议。
打好基础，推荐http://www.w3school.com.cn/书籍方面个人比较推崇《JavaScript权威指南》（俗称犀牛书），这本书写的很细致，看完之后肯定能让你的认识上升一个层次。
英语阅读，Ext的资源有些是有中文版的，但是个人感觉中文版的质量 ...
Ext.form.TextField.override({
initComponent: Ext.form.TextField.prototype.initComponent.createInterceptor(function(){
if (this.allowBlank === false && this.fieldLabel) {
this.fieldLabel += '<font color=red>*</font>'; ...