10个值得推荐的Material Design前端框架

material-icons

当好的设计原理融合了科技创新,会发生什么?这正是谷歌所做到的——Material Design。

简单的说,Material Design是一种可视化的设计理念,汇集了经典设计原理和现代科技的技术规范。Material Design设计语言和与之相关的工具材料都越来越流行。

在这篇文章中,我汇总了一些非常棒的Material Design Web前端框架,也提供了这些框架的截图和demo链接。这些前端框架的设计元素齐全,按钮、表单、布局及常用JS特效代码基本上都有,支持Responsive Design,还有的可以结合Bootstrap使用,相当不错,下面来看看介绍,并挑选一款你喜欢的Framework来制作你的新项目吧。

“四舍六入五成双”算法学习

“四舍六入五成双”又称为“四舍六入五凑偶”,是一种比较精确比较科学的计数保留法。从统计学角度来说,这种算法要比传统的“四舍五入”更精确。在大量运算时,它使舍入后的结果误差的均值趋于零,而不是像四舍五入那样逢五就入,导致结果偏向大数。

上述算法的规则如下:

根据需要保留的有效位数,其后的数字应该进行舍入。
当有效位数后一位的数字≤4时,其后的数字直接舍去;
当有效位数后一位的数字≥6时,其后数字舍去并进1;
当有效位数后一位的数字=5时,要分两种情况:

  • 5后面一位的数字如果不等于0,则舍5进1;
  • 5后面一位数字如果等于0,又要分两种情况:
    • 5的前面如果是奇数,则舍5进1;
    • 5的前面如果是偶数,则舍5不进;

CSS中text-overflow的用法

text-overflow是CSS3中的一项特性,目前处于草案阶段。最新版的W3C文档中未包含该属性。目前,大多数浏览器已经能较好地支持这一属性。

text-overflow适用于块级元素,它定义了如何处理溢出的文本以及溢出文本的显示方式。text-overflow有两个值:clip和ellipsis。从字面意思可以看出,clip即对溢出文本进行裁切;ellipsis的意思是省略号,在这里表示对溢出文本进行裁切后,显示省略号(’…’, U+2026 HORIZONTAL ELLIPSIS)。

在页面重构过程中,我们经常会遇到列表项文本过长问题。通常的处理方法是由程序判断字数,然后进行截取。我曾经写过《帝国CMS标题截取自动添加省略号的解决办法》。用这种方法的缺点是实际输出的文本是不完整的,搜索引擎抓取的话,抓到的文本就是不完整的,不利于SEO。另外,在中英文和特殊符号混排的文本中,利用字数控制有时候并不是特别可靠,不同的编码类型下,字数更加难以确定。

text-overflow有效地解决了文本溢出的处理问题。首先,它只是控制显示给用户的截取效果,而实际代码中输出的依然是完整的文本。其次,text-overflow是用定义的宽度来控制是否截取的,而非根据字数截取。这能很好地保证页面布局不被异常的文本打乱。

DedeCMS获取顶级栏目名称的方法

在用DedeCMS做网站过程中,遇到多层级的栏目分级,为了少写几个模板,经常会需要调用顶级栏目名称。Dede自带的{dede:field name='typename' /}可以获取当前栏目的上级栏目名称,不能满足要求。

下面这个方法可以实现在任意级别(二级、三级甚至是四级)的栏目中获取到顶级栏目名称。代码如下:

在include/common.func.php的最后加入:

//获取顶级栏目名
function GetTopTypename($id)
{
    global $dsql;
    $row = $dsql->GetOne("SELECT typename,topid FROM dede_arctype WHERE id= $id");
    if ($row['topid'] == '0')
    {
        return $row['typename'];
    }
    else
    {
        $row1 = $dsql->GetOne("SELECT typename FROM dede_arctype WHERE id= $row[topid]");
        return $row1['typename'];
    }
}//如果你修改了数据表前缀,请将代码中的dede_改为相应的表前缀

JavaScript中的四舍五入方法

之前,我是一个JavaScript小白,对jQuery的理解也仅限于基本功能的使用。最近在看《JavaScript DOM编程艺术》,算是在自学一点儿基础知识。实例中有一个函数需要对结果进行四舍五入,保留小数点后一位数字。然后就查阅了W3School的参考文档,发现Number对象有一个toFixed()方法,完全符合我的要求。

toFixed(num)只有一个参数num,用来规定需要保留的小数位数,取值在0~20之间,超出这个范围则抛出异常。当然,如果调用这个方法的对象不是一个Number时也会抛出异常。

var num = 10/3;
alert(num.toFixed(2));

执行上面的代码,可以看到输出的结果是3.33

DedeEIMS转DedeCMS步骤教程

DEDE CMS

自从2010年至今(2010.1-2011.8),我们公司官方网站(www.bloglord.net)一直使用dedeEIMS作为网站核心引擎。作为网站管理人员,对EIMS从浅显了解到深入改造,一路走来不容易啊。

企业网站要服务于市场,随着公司发展、市场扩大,需求提高,对官网的要求越来越高。我们是一家靠网站带来客户的公司,网站的好坏直接影响客户的转化率和客户的信任度。此外,网站的SEO也越来越得到重视(我们靠SEO带来优质的流量,目前还在学习中),随着对SEO的和UEO的研究发现,dedeEIMS的功能越来越不能满足现在的需求,一直期盼着官方能升级,可惜未果。

说句公道话,对于一个要求不高的基础企业网站来说,dedeEIMS所提供的功能足够了。如果网站要做大,重视SEO和UEO,需求增多,EIMS显得捉襟见肘了。公司计划近期将网站引擎升级到dedeCMS。

===============直接看升级的从这里看===================

浏览器渲染原理

浏览器
Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验。简单地说,页面渲染就是浏览器将HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的:

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
  11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

^^^^^^^^^^^^^^^^^ 看,那忧伤的分割线 ^^^^^^^^^^^^^^^^^

一个逗号引发的JavaScript血案


这两天重构了一个商城模板的首页,在最后完成时,我按照惯例进行兼容性测试。通常我测试的浏览器一般是IE系列(6、7、8、9)、Firefox和Chrome。网页在Firefox和Chrome中正常显示,IE8和IE9也正常。但在IE6和IE7中出现了一个奇怪的Bug,最终花费几个小时,请朋友帮忙,终于找出罪魁祸首,原来是我使用的一个名为soChange的jQuery插件,因为我多加了一个逗号,因此我将本文命名为一个逗号引发的JavaScript血案。

更换DedeCMS的编辑器为百度UEditor

百度UEditor
用过DedeCMS的人可能都有一个感觉,自带的可视化编辑器太差劲了。Dede在5.6版之前用的编辑器是FCKEditor,5.7之后改成了ckeditor,实际还是FCK,只是这个编辑器改名了而已。用这个编辑器粘贴从Word复制过来的文字时,会产生大量的垃圾代码,既不利于排版,也不太美观。

今天我来介绍一下如何将Dede默认的编辑器换成百度的Ueditor编辑器。

一款jQuery实现的二级导航菜单

jQuery - write less, do more.
网上用jQuery写的二级导航菜单非常多,功能和样式多种多样,但是我找了好久,没有找到自己想要的。

我想实现的效果主要有几点:

  1. 当前父栏目高亮,子栏目显示;
  2. 鼠标移到其他父栏目时,该父栏目下子栏目显示,且当前栏目取消高亮;
  3. 子栏目横向排列;

前一段时间自学了jQuery,发现jQuery确实很强大,而且也很好用。于是我尝试自己来实现这个导航。经过一番摸索和折腾,终于是做出来了。效果如下图:

共 2 页12