登录 |
  • 注册
  • Google JavaScript Style Guide

    2010年09月03日09:53:39 星期五 | 作者:marcian

    Home page:

    http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

    20 Free Web UI Element Kits and Stencils

    2010年07月26日16:39:36 星期一 | 作者:marcian

    地址:20 Free Web UI Element Kits and Stencils

    —————–分割线————————–

    非常好的资源,老外的设计非常的棒。

    100 个设计师必备的免费英文字体

    2010年07月07日18:13:28 星期三 | 作者:marcian

    来自Java Eye。

    ====================================

    1. Clean Fonts

    Delicious-Roman

    DiavloBook-Regular

    HattoriHanzo-LightItalic

    LT Oksana Bold

    Champagne & Limousines

    Vegur-Regular

    Caviar Dreams Bold

    Ageone

    Aldo SemiBold

    Zrnic

    Zero Threes

    Yanone Kaffeesatz Regular

    WendelinHalbfettKursiv

    SF Quartzite Bold Italic

    Padaloma Italic

    Monoglyceride

    Mabella

    Moloko

    Langó Italic

    Gordon Regular

    Good Times

    GeosansLight

    Cantarell Bold

    Garrison Cond. Sans BOLD

    SansSerifExbFLF-Italic

    SF Fourche SC

    Milford Condensed Bold Italic

    Aller Light Italic

    D3 Archism Italic

    Decker

    Cardiff Bold Italic

    Droid Serif Bold

    GalileoFLF-BoldItalic

    BodoniFLF-Bold

    Subway Regular

    Steinem-Italic

    Ogilvy Poster

    Gourmand Bold Italic

    Bedini Bold Italic

    Copper Penny DTP Normal

    2. Fancy Fonts

    karabinE

    JAMES HAN

    Arkitech-Light

    VTKS URBAN TIME bold

    Blaster Italic

    Zone Rider Ultra ExpItalic

    YouMurdererBB

    AddamsRegular

    D3 Isotopism

    Veggieburger

    Antigrav BB Italic

    Dotline Bold

    Vtks Desgaste

    Platonick NF

    EASYTROUBLE

    Cubiculo Gallery

    Rogers2

    NIGHTSTALKER-TRIAL

    SoupLeaf

    Fullogic

    Malgecito

    VAL

    OvalSingle

    Outlaw

    Anastasia Regular

    gothical

    TOSCA ZERO

    soma Regular

    Faith Collapsing

    Galga Bold CondensedItalic

    KILLED DJ

    Direktor Expanded Italic

    Angelic War

    VTKS News Label

    Aerovias Brasil NF

    VTKS ROCK GARAGE BAND

    Zorque

    You’re Gone

    Thundergod II

    Scurlock

    3. Script Fonts

    Jellyka Castle’s Queen

    Jellyka – Estrya’s Handwriting

    Jellyka, End_less Voyage

    the King & Queen font

    Vtks Beautiful Dreams

    akaDora

    Vtks Blank

    Goombella

    Katy Berry

    Windsong

    Rechtman-Script Medium

    JaneAusten

    Ariston

    WC ROUGHTRAD Bta

    LainieDaySH

    Timotheos

    Scratch Bold

    Toothbrush

    TschichLightFS

    curlyJoe

    ZK Javascript framework

    2010年07月01日09:37:23 星期四 | 作者:marcian

    用在b/s结构的产品上,应该还不错。

    官网:http://www.zkoss.org/

    Apple的前端框架

    2010年05月10日12:27:15 星期一 | 作者:marcian

    苹果的前端框架,介绍:http://www.appleinsider.com/articles/10/05/07/apple_developing_flash_alternative_named_gianduia.html

    这个框架可能被苹果用来替代Flash,不过Flash确实已经很久不关注了,现在有太多的前端框架可以实现大部分原来属于Flash的功能,而HTML5则进一步蚕食了Flash的领域,基于标准 javascript/css/html 的前端开发展示方式才是王道。

    JQuery tools

    2010年05月08日17:17:29 星期六 | 作者:marcian

    JQuery tools:http://flowplayer.org/tools/index.html

    jQuery 表格工具集

    2010年04月16日12:26:06 星期五 | 作者:marcian

    原文地址:

    http://www.noupe.com/javascript/jquery-html-table-toolbox.html

    JQuery tip

    2010年04月09日15:42:27 星期五 | 作者:marcian

    http://dave-earley.com/demos/tiper/

    JQuery的tip插件。

    JQuery sheet

    2010年04月04日10:47:29 星期日 | 作者:marcian

    可以模仿MS的Excel

    http://www.visop-dev.com/jquerysheet.html

    JQuery Easy UI

    2010年03月25日10:51:17 星期四 | 作者:marcian

    地址:http://jquery-easyui.wikidot.com/start

    和extjs相比,也许还不够强大,但这是免费的, 可以基于它做进一步的开发。

    也许可以把前端的JS开发框架统一到JQuery下,这对降低开发成本也有好处。

    FCKeditor和Java的集成

    2008年11月17日17:36:23 星期一 | 作者:marcian

    FCKeditor是应用比较广泛的一个富文本编辑器,支持多浏览器/多语言/多开发语言,当然也包括对Java的支持,FCKeditor和Java的集成比较简单,通过修改配置文件即可完成。

    配置:

    1:首先去FCKeditor的官网下载所需的JS/Java文件,地址:http://www.fckeditor.net . JS文件的最新版本已经是2.6.3,Java文件建议下在2.3版本。

    2:创建一个Java Web Project。

    3:在WebRoot下创建一个FCKeditor文件,将解压后FCKeditor的editor文件夹、fckconfig.js、 fckeditor.js、fckstyles.xml、fcktemplates.xml、fckpackage.xml拷贝进来。

    4:将解压后的Java文件中的web/WEB-INF/lib中的文件拷贝到/WEB-INF/lib中。

    5:将解压后的Java文件中的src/FCKeditor.tld拷贝到/WEB-INF/中。

    6:将解压后的Java文件中的web/WEB-INF/web.xml中的代码拷贝到/WEB-INF/web.xml中。

    7:创建一个upload文件夹,用来存放上传的文件。

    8:编辑fckconfig.js,修改以下属性。

    a:FCKConfig.SkinPath —皮肤路径

    b:FCKConfig.AutoDetectLanguage –自动检测语言,默认true。

    c:FCKConfig.DefaultLanguage   —默认语言,默认为en。

    d:FCKConfig.LinkDlgHideTarget   —是否隐藏Link窗口的target标签,默认false。

    e:FCKConfig.LinkDlgHideAdvanced    —是否隐藏Link窗口的advanced标签,默认false。

    f:FCKConfig.ImageDlgHideLink   —是否隐藏image窗口的link标签,默认false。

    e:FCKConfig.ImageDlgHideAdvanced    —–是否隐藏img窗口的advanced标签,默认false。

    f:FCKConfig.FlashDlgHideAdvanced   ——是否隐藏Flash窗口的advanced标签,默认false。

    g:CKConfig.LinkBrowser —是否显示Link窗口的服务器端浏览,默认true。

    h:FCKConfig.LinkBrowserURL —Link窗口服务器端浏览的URL。

    i:CKConfig.ImageBrowser —是否显示Image窗口的服务器端浏览,默认true。

    j:FCKConfig.ImageBrowserURL —Image窗口服务器端浏览的URL。

    k:CKConfig.FlashBrowser —是否显示Flash窗口的服务器端浏览,默认true。

    l:FCKConfig.FlashBrowserURL —Flash窗口服务器端浏览的URL。

    m:FCKConfig.LinkUpload  — 是否显示Link窗口的upload标签,默认true。

    n:FCKConfig.LinkUploadURL —Link窗口的uploadURL。

    o:FCKConfig.ImageUpload  — 是否显示Image窗口的upload标签,默认true。

    p:FCKConfig.ImageUploadURL —Image窗口的uploadURL。

    q:FCKConfig.FlashUpload  — 是否显示Flash窗口的upload标签,默认true。

    r:FCKConfig.FlashUploadURL —Flash窗口的uploadURL。

    9:编辑web.xml文件。

    a:添加taglib标签,将FCKeditor的标签库引入。

    b:编辑servlet-name为connector的servlet-mapping的url-pattern值,确保此值和 fckconfig.js中的LinkBrowserURL/ImageBrowserURL/FlashBrowserURL中connector参数的值一致。

    c: 编辑servlet-name为SimpleUploader的servlet-mapping的url-pattern值,确保此值和 fckconfig.js中的LinkUploadURL/ImageUploadURL/FlashUploadURL中不包括参数的部分一致。

    集成

    集成有三种方式js、Java代码、标签库。

    1:js集成:

    a:在页面引入fckeditor.js文件。

    b:在页面添加如下代码:

    <form action=”xxx.jsp” method=”post” target=”_blank”>
    <table border=”0″ width=”700″><tr><td>
    <textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”></textarea>
    <script type=”text/javascript”>
    var FCKeditor = new FCKeditor(’content’) ;
    FCKeditor.BasePath = “your path” ;
    FCKeditor.Height = 400;
    FCKeditor.ToolbarSet = “Default” ;
    FCKeditor.ReplaceTextarea();
    </script>
    <input type=”submit” value=”Submit”>
    </td></tr></table>
    </form>

    2:Java代码集成。

    a:引入com.fredck.FCKeditor.*库。

    b:添加如下Java代码:

    form action=”xxx.jsp” method=”post” target=”_blank”>
    <%
    FCKeditor FCKeditor = new FCKeditor( request, “content” ) ;
    FCKeditor.setBasePath( “your path” ) ;
    FCKeditor.setWidth(”500″);
    FCKeditor.setValue( “input” );
    out.println( FCKeditor.create() ) ;
    %>
    <br>
    <input type=”submit” value=”Submit”>
    </form>

    3:tag集成。

    a:引入tag库。

    b:添加如下代码:

    form action=”show.jsp” method=”post” target=”_blank”>
    <FCK:editor id=”content” basePath=”your path
    width=”700″
    height=”500″
    skinPath=”your path
    toolbarSet = “Default”
    >
    </FCK:editor>
    <input type=”submit” value=”Submit”>
    </form>

    纯JavaScript的带缩略图的图片幻灯

    2008年09月03日17:42:13 星期三 | 作者:marcian

    这是一个用纯粹的JavaScript实现的图片幻灯,效果与很多网站首页使用的基于Flash的图片幻灯效果相似。兼容IE6、IE7、Firefox、Chrome。JavaScript其实也能做很多事情。

    DEMO: 纯JavaScript的带缩略图的图片幻灯

    国外大站使用Javascript framework调查

    2008年06月25日10:23:10 星期三 | 作者:marcian

    Royal Pingdom最近发布了一份关于200个流行网站都采用了哪些Javascript框架的调查报告。这些网站分别是Alexa美国排名前100名Webware前100名的网站应用

    原文地址:http://royal.pingdom.com/?p=305

    未必全面,不过可以做个参考,JQuery真的很不错。

    JQuery UI库

    2008年05月09日08:35:27 星期五 | 作者:marcian

    JQuery UI 库,一直都比较喜欢JQuery,简单、优雅,虽然有时要写很多的$。JQuery在UI方面一直比较弱,大多数的UI实现来自第三方,不过现在情况有所改善,官方的JQuery的UI来了。

    JQuery  UI

    无刷新上传附件的DEMO

    2008年04月20日21:39:15 星期日 | 作者:marcian

    这是在 Sina 时做的一个邮件无刷新上传附件的DEMO,后来把这个DEMO贴在了 JaveEye ,我都把它忘得差不多了,今天无意中登录 JavaEye ,居然有人在用这个DEMO。决定整理一下,把它贴出来。

    方案选择:
    查阅了一些资料,目前实现实现无刷新上传主要有两种方案,即利用隐藏的iframe来模拟无刷新上传和利用xmlhttp分块上传文件。这两种方案中,利用隐藏的iframe来模拟无刷新上传用的最为普遍,实现起来也比较容易。而利用xmlhttp分块上传的方式,google的结果显示用的较少,特别是实用方面,而且代码实现复杂。考虑到要同时实现类似Gmail的附件添加方式,最终选择了利用隐藏的iframe来模拟无刷新上传的方案。

    利用隐藏的iframe来模拟无刷新上传的原理
    利用隐藏的iframe来模拟无刷新上传的原理比较简单,在页面中包含一个form和一个iframe,其中ifram设置为不可见,同时将form target属性设为iframe的名字,这样当上传的时候,刷新的就是iframe中的页面,而主页面则不会有任何变化。可以在iframe中的页面中编写上传后客户端要执行的javascript代码,这样可以轻松的实现对主页面的操作。

    类Gmail附件添加方式的实现
    Gmail的附件添加方式有着比较好的用户体验,原本希望可以通过阅读Gmail的代码来了解Gmail的解决方案,但是发现这个想法有些不靠谱。所以最终采用自己的方式来解决这个问题并实现了良好的浏览器兼容(IE和Firefox),对于Firefox,是通过利用javascript对DOM的操作,来动态的创建和删除文件选择框.对于IE,则是结合Javascript,DOM,CSS来实现所要求的效果。在两种浏览器下,均可以进一步扩展,来实现选择后即自动上传的效果。

    DEMO:无刷新上传附件的DEMO