存档

‘Web前端技术’ 分类的存档

Swiffy可将Flash转为HTML5

2013年7月1日 3 条评论

苹果对于Flash的态度很明确,对比HTML5,后者无疑更为苹果所偏爱。日前,与苹果亦敌亦友的谷歌日前发布了一套基于网页的工具“Swiffy”,这套针对设备能够将.SWF格式的Flash文件转化为HTML5,用谷歌自己的原话来说就是“让没有Flash播放器的设备(例如iPhone以及iPad)也能享受Flash内容”。

flash转化成html5
阅读全文…

分类: HTML5 标签: ,

JS/CSS压缩工具

2013年5月11日 1 条评论

谷歌JS压缩工具 Closure Compiler Application

1、下载地址:http://closure-compiler.googlecode.com/files/compiler-latest.zip
2、使用方法:
把解压到的compiler.jar放到一个文件夹下比如放在d盘文件夹名为js_dir 创建一个hello.js放在同目录下,然后cmd操作命令如下
java -jar compiler.jar –js hello.js –js_output_file hello-compiled.js
当然要先使用d: cd is_dir 进入文件夹.
生成的 hello-compiled.js就是我们的想要的文件,可能程序在cmd 框会输出warnning和可能出现bug的地方,及时修改掉就OK了.当然这只是简单模式simple还有高级模式.
线上使用地址:http://closure-compiler.appsp0t.com/home

雅虎JS/CSS压缩工具 YUI Compressor

下载地址:http://yuilibrary.com/download/yuicompressor
使用方法方法与谷歌的相同,命令有点不同
java -jar yuicompressor-2.4.7.jar –type css –charset utf-8 -o dest.css src.css
–type 类型js/css
–charset 编码
dest.css目标文件
src.css源文件

个人觉得谷歌js压缩比雅虎的效率要高一点,css压缩只有用雅虎了,因为谷歌还没出来.

解决div被flash遮挡的问题

2013年4月6日 没有评论

问题描述

页面中有一个flash,在页面最顶部有一个浮动的在线客服div,客服的div被下面的flash所遮挡

解决方法

只需要在flash标签中加入以下两个参数即可

<param name="wmode" value="Opaque">
<param name="wmode" value="transparent">

利用jQuery实现DIV弹出效果

2012年12月9日 没有评论

背景

       现在很多网站都流行DIV弹出式的对话框或是信息显示框,因为使用jQuery可以不费大力气实现这种效果,这里就向大家描述一下jQuery DIV弹出效果实现代码。下面请看本文的详细介绍。

jQuery DIV弹出效果实现代码

       现在很多网站都流行这种DIV弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
       先上个效果图,可以点击Close按钮或是在遮罩层上任意处点击,就可以关闭DIV弹出层。
       
阅读全文…

如何提高Web开发的效率使页面组件化

2012年11月28日 没有评论

       Web页面开发逐渐的组件化,如何提高其开发效率,提高代码的重用率,及开发效率,是公司最关心的,下面就从几个方面简单的说明下如何以组件化的方式提高页面的开发效率

初级组件化

利用ajax相关技术,尽量使页面局部化,局部的更新,粗线条组件化

高级组件化

可以通过DHX,EXT这种现有的组件进行开发,提高页面的重用率及开发效率
阅读全文…

jQuery Plugin Poshy Tip 使用

2012年7月12日 没有评论

项目到了后期,发现前端的提示信息不统一,解决思路如下:

1.回顾系统中tip出现的场景:表单验证提示信息、数据列表中随填随显

2.确定问题域:多条提示信息层叠、信息显示风格不统一

3.结论:找出一款合适的tip插件进行整合快速的响应项目的需要

google关键词:jquery tooltip,检索了好多tip插件,最终选择了Poshy Tip,理由如下:

1.多种不同的外观。

2.同时可以作为 Form Tooltips使用

3.可以自定义气泡出现的位置

先来一个直观的认识:

Poshy Tip

Poshy Tip tooltip jquery

详细的参数说明如下:


$.fn.poshytip.defaults = {

// 提示内容默认为元素的标题,可以使指定的字符串、元素、回调函数、jquery对象

content:'[title]',

// 指定的tips class样式

className:'tip-yellow',

//按照像素计算背景图片和显示内容的内边距

bgImageFrameSize:10,

showTimeout:500,// 延时多久开始显示

hideTimeout:100,// 延时多久开始隐藏

timeOnScreen:0,// 自动隐藏之前延时多久

//显示方式 支持'hover'鼠标划入、'focus' 获取焦点、'none'手动显式调用

showOn:'hover',

liveEvents:false,// 支持live  事件  同样可以对未来元素进行影响

alignTo:'cursor',// 和谁进行对齐 ('cursor' 鼠标, 'target' 目标元素)

// 水平方向对齐方式 可选参数:

//('right', 'center', 'left', 'inner-left', 'inner-right')

alignX:'right',

// 垂直方向对齐方式 可选参数:

//('bottom', 'center', 'top', 'inner-bottom', 'inner-top')

alignY:'top',

offsetX:-22,// 水平偏移量

offsetY:18,// 垂直方向偏移量

//hover显示方式下,允许鼠标离开元素仍然显示提示信息

allowTipHover:true,

// 提示信息随着鼠标移动  只在满足hover显示方式下,对齐方式为alignTo:'cursor' 才有效

followCursor:false,

fade:true,// 使用动画

slide:true,// 使用slie效果

slideOffset:8,// slide 动画的偏移量

// 动画显示的时间间隔 如果不想动画效果,设置为0即可

showAniDuration:300,

// 动画隐藏的时间间隔 如果不想动画效果,设置为0即可

hideAniDuration:300

};

核心方法


.poshytip('show')    手动显示tip

.poshytip('hide')    手动隐藏tip

.poshytip('update', content, [ dontOverwriteOption ] )  手动更新tip

.poshytip('disable')  tip不可用

.poshytip('enable')   tip可用

.poshytip('destroy')  销毁tip

官方网址:

http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

jquery 如何监听div内容的变化

2012年7月10日 3 条评论

我们做电子商务,javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题:如何监听div内容的变化。

先给出最终代码(后续进行相关分析):

var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
    alert('element now contains: ' + $(e.target).html());
});

解决问题的思路如下:

我们先回顾一下jQuery事件中的change()方法定义和用法:

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

但是问题出现了关于div内容的改变change方法中只字不提,我们如何处理那?

后续百度关键词: jquery div 内容发生变化:无果;

继续,bing关键词:jquery how to listen div change 找到一篇相关文档http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly
粗略的明白是采用自定义事件的方式去处理问题,采纳代码如下:

$('#laneconfigdisplay').bind('contentchanged', function() { 
  // do something after the div content has changed 
  alert('woo'); 
});
// 这样会调用上面的函数
$('#laneconfigdisplay').trigger('contentchanged'); 

但是contentchanged是什么内容没有说明,继续追溯
bing关键词:jquery how to listen div change 找到一篇相关文档
继续,bing关键词:jquery contentchanged 找到一篇相关文档http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
这篇文章详细说明了contentchanged内容定义,采纳代码如下:

jQuery.fn.watch = function( id, fn ) { 

    return this.each(function(){ 

        var self = this; 

        var oldVal = self[id]; 
        $(self).data( 
            'watch_timer', 
            setInterval(function(){ 
                if (self[id] !== oldVal) { 
                    fn.call(self, id, oldVal, self[id]); 
                    oldVal = self[id]; 
                } 
            }, 100) 
        ); 

    }); 

    return self; 
}; 
jQuery.fn.unwatch = function( id ) { 

    return this.each(function(){ 
        clearInterval( $(this).data('watch_timer') ); 
    }); 

};

创建自定义事件

jQuery.fn.valuechange = function(fn) {     
    return this.bind('valuechange', fn);  
};
jQuery.event.special.valuechange = {        
    setup: function() {         
       jQuery(this).watch('value', function(){  
            jQuery.event.handle.call(this, {type:'valuechange'});  
        });        
     },
     teardown: function() {   
       jQuery(this).unwatch('value'); 
     } 
}; 

貌似这样的解决是完美的但是后续再继续查看到时候,发现有更简洁的方式,代码如下:

var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
    alert('element now contains: ' + $(e.target).html());
});

感觉这应该是我需要代码,do it !fine