黄锦诚的个人博客--有志者是锦诚!

Tag 文档归类: javascript

  • 由标签云引发的random的简单应用

      在一些站点里常常会看到一些标签云的效果,特别是Wordpress本身就自带了这个功能和效果,其实这是一个很有趣的小效果,比齐刷刷的统一的颜色、统一的大小的一排文字排下来好看多了,所以这个小小的东西勾引起了我的兴趣,于是决定折腾一下,弄清楚他的原理。
    仔细分析一下,发现Wordpress里的标签云字体的大小是根据标签关联的文章数来决定大小的(如下图),不会因为每次的刷新而改变文字的大小,这个需要与程序的进行数据的记录和读取进行交互了,所以不在本次的讨论之列,本次所在实现的是仅仅前台脚本实现效果。
    (更多…)

  • iframe同域跨域高度自适应的实现

      页面嵌套iframe,相信很多人都会遇到这个问题,本人不喜欢iframe,但项目中遇到了必段要用到,那也没办法,只能折腾,这个是最近项目中用到的解决的个办法,其中的原理是定义一个相同的域名变量,本来只是为实现跨域的iframe高度自适应的,但经试验,该方法可以实现同域或不同域。具体可以自测。

    (更多…)

  • JS实现导航高亮方法

      导航是我们页面中一般都需要的一个元素,它可以说是一个站点必用的元素,没有了导航,会让人找不着北,但有时候,仅仅有了导航还不够,还需要在当前的页面中标明当前是在哪一个类别里面,这时候就有了不同的实现的方法,也就有了下文的一些介绍。

      通常,我们在做导航的时候,都是由程序直接输出当前的页面的的高亮状态的样式,我们只需要定义好输出的类的高亮的样式就可以了,这样是最直接有效也是最常用的方法。
    (更多…)

  • 一键复制文本框内容的两种方法

      项目已上线,近几天有点小闲,只是一些更新和维护的小工作,就到外网到处溜达,在一些网站上看到了一些可以一键复制文本框内容的小功能,觉得挺实用的,虽然只是一个很小的功能,但给人的体验却很好,就整理了一下,日后备用。

    click2copy

    (更多…)

  • 特殊字符模拟STEP步骤箭头效果实现

      最近项目整天改来改去,页面数据很多都是手工来添加的,所以一修改就要搞个半死,连续好多天晚上加班到十一点,浑身都累得没有一点气力了,苦命的伪码农啊。今年部门里招进来的算是比较久一点的人,也是受不了,提出要离去的申请了,估计最迟也是在月底了。唉,这种日子真不好过。

      弄一这个,搞一下那个,都快变成文员编辑了,受不鸟。

      这几天折腾弄了一个用◆这个特殊字符来折腾STEP步骤箭头的效果,就是那种一步一步的引导的那个效果,几经调试,才勉强实现效果,但兼容性和实现的效果上有些问题,主要是IE6这种快要退出历史舞台的古董级别的浏览器了(虽然我现在还是天天有在用来测试兼容性),不管了,也暂时没有时间弄了,先放上来,以后有时间再整理或再加强扩展吧。

      用纯特殊字符◆来模拟的效果思路实现的话是很简单,截取字符的尖角部分,再将两个小叠加效果,造成视觉上的统一就完事了,但过程中调试比较麻烦,且兼容性也有些问题,所以也不好控制,虽然说扩展性可能会强些,但效果在浏览器中去却不如人意,用图片做尖角的效果会更好些,方便控制,宽度也可以自适应,按理说是高度也是可以做成自适应的(以后有时间再做高度的自适应)。以下是模拟的效果效果在各个浏览器的对比,DEMO中有用模拟和用图片实现的效果,标准浏览器的效果是基本差别不大的,甚至你看不出来是模拟的,点击进入DEMO查看,点击打开

    (更多…)

  • 【翻译】JavaScript Syntax Highlighting Engine

    JavaScript Syntax Highlighting Engine–脚本语法高亮引擎
      最近在搞一个页面代码演示的DEMO,需要用到一些语法着色的脚本工具,所以才会有了本文。
    语法着色,相信很多写博客的同行或是CODER都会用到,各种各样形形式式的语法着色工具也试了不少,这些工具都有着不同的粉丝,本来工具这个就没有所谓的谁好谁坏的,只是每个人的出发点、需求和使用的习惯不同,所以也就有了不同的选择。
    本文翻译的是我最近做代码演示使用到的一个JS的语法着色工具—JavaScript Syntax Highlighting Engine,我选择了该工具的原因是,体积小,只有一个脚本文件和一个样式文件,但该工具也有一个缺点,就是只支持  JavaScript、CSS、XML、HTML四种语言,但对于一个搞前端开发的来说,这四种语言已经足够了。

      从项目的时间标注看,该项目是在2007/06/06 11:28建立的,但最后更新是在2008/09/03 19:04,到现在2011已经也有好几年没作更新了,虽然已经很好的,但是如果允许的话,还是希望看到再次更新。

      选择这个着色的原因也很简单,文件很小,也就14K的脚本加上2K的样式,且还可以自定义样式,已经很不错了。其他的着色文件虽然强大,但是也臃肿和麻烦,故最后通过比较还是选择了这个。

      下面是译文正文:

    脚本语法高亮引擎

      你曾经想在你的文章里进行语法着色尝试过多少次?我过去就手工尝试过在我我选择使用的一个Emacs文本编辑器上添加这个语法高亮。但效果很烂,因为它使得我的源码基本不能再次进行编辑。后来,我在UNIX的环境里开发了一些服务器端的语言用来进行语法着色,这是一种基于非常优秀的颜色的库的语言。在这个站点里可以用来高亮绝大部分的语言的演示页面。

    (更多…)

  • 前端工程师新手必读

    拥抱HTM5

      公司招了几个刚毕业的学生,作为重构的新手让我来带。

      首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会,对我工作的肯定和认可,让我带这样的一个重构团队,同时我也明白任务的艰巨,但我一定会将工作做好,不负公司对我的期望。(哈哈,好像从小到大,老师都是教育我们要这样先说的。)

      在网站的发展史上,初期的网站建设根本不需要网页重构这个职位,WEB1.0时代的网页,只需要程序员,一堆堆的表格嵌套就完成,或者美工进行配合完成,先由美工负责设计好,再用一些自动化的软件拉伸几下,直接将设计好的图就可以通过软件输出表格的布局了,根本不需要重构这个多余的职位。随着WEB2.0的到来和W3C的规范得到世人的认可,内容和样式的分离更方便进行开发和维护,传统的表格布局和内容混排的方式逐渐地被淘汰,美工已不能完全一手包办越来越复杂的效果和高要求的页面布局了。此因催生了一个新的职位——前端工程师。

      鄙人刚好作为一名WEB2.0成长起来的前端工程师,虽然说做的项目不多,但乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西,但也只希望为大家提个醒,最好能起到抛砖引玉的作用。

    (更多…)

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量