分类 Web Front End 下的文章

首先看一下 goog.dom.htmlToDocumentFragment 的实现代码:

goog.dom.htmlToDocumentFragment_ = function(doc, htmlString) {
      var tempDiv = doc.createElement('div');
      if (goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT) {
        tempDiv.innerHTML = '
        ' + htmlString;
        tempDiv.removeChild(tempDiv.firstChild);
      } else {
        tempDiv.innerHTML = htmlString;
      }
      if (tempDiv.childNodes.length == 1) {
        return /** @type {!Node} */ (tempDiv.removeChild(tempDiv.firstChild));
      } else {
        var fragment = doc.createDocumentFragment();
        while (tempDiv.firstChild) {
          fragment.appendChild(tempDiv.firstChild);
        }
        return fragment;
      }
    };

这个方法利用一个临时 Div 容器来生成 Dom 片段,因为<tr>标签本身不能在<div>标签内使用,所以这个函数不能返回单独地<tr>标签。

在使用 Google Closure Library 时,要注意一点。 goog.require() 所请求的内容,不能被同一个 script 标签内的 js 代码所使用,例如下面这种做法就是错误的

<script src="closure-library/closure/goog/base.js"></script>
<script>
// 不要这样写
goog.require('goog.dom');
var newHeader = goog.dom.createDom('h1');
</script>

如果你这样做,会有一个 cannot read property 'xxx' of undefined 类似的错误。除非 goog.dom.createDom() 在此前已经被请求,不然是无法使用它的。 正确的做法是这样:

<script src="closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
</script>
<script>
var newHeader = goog.dom.createDom('h1');
</script>

也可以这样

goog.require('goog.dom');
function sayHi() {
 var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
 'Hello world!');
 goog.dom.appendChild(document.body, newHeader);
}

这样的话,只需要在其他 script 标签或者文件中调用 sayHi() 函数即可。 参考 Getting Started with the Closure Library

在写弹出菜单插件时,需要实现点击弹出菜单以外的区域时关闭菜单的功能。 发现了一种比较简单地实现这一事件的方法。

$(document).mouseup(function(e){
 var _con = $(' 目标区域 '); // 设置目标区域
 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
 some code... // 功能代码
 }
});
/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

因为自己要用,所以写了一个弹出菜单插件

jQueryPopMenu

simple responsive popup menu, it’s a jQuery plugin.

Demo

http://gucheen.github.io/jQueryPopMenu/

Link

https://github.com/gucheen/jQueryPopMenu

Intro

这是一个基于 jQuery 的弹出菜单插件。有基本的自适应特性。可以设置包括背景色、菜单按钮大小、圆角或者直角等。
:Demo页面中的所有icon都基于FontAwesome,并非必须。可以自行更改。

jQuery.popmenu-1

jQuery.popmenu-2

Info

Version 1.0
基于jQuery 2.0.3 构建。 Chrome, Safari, Firefox, Opera 可用。无IE支持。

Usage

使用 $(' #target ').popmenu(); 调用。 参数包括:

{
 'controller': true, //设定是否使用控制按钮,设置为false,菜单将一直显示
 'width': '300px', //菜单总宽度
 'background': '#34495e', //菜单背景色
 'focusColor': '#1abc9c', //菜单按钮hover时颜色
 'borderRadius': '10px', //边角弧度,设置为0,为直角
 'top': '50', //上移距离,向上移动多少就设置为多少
 'left': '0', //左移距离,设置同上
 'iconSize': '100px' //菜单按钮大小,目前是正方形设计(宽高相同)
}
//以上参数数值为默认值
//使用时无需受Demo影响,按钮可以是纯文字,内容排版自行安排设计。

注:控制按钮对应 .pop_ctrl,即名字为 pop_ctrl 的class,使用class是为了方便同时使用多个菜单,各菜单间无影响。

大多数关于Emmet的文章和教程都是在说明它对HTML的处理能力,但是今天我们要来关注一下Emmet的CSS部分。准备好来增强你的CSS手写能力了吗?让我们开始吧!

:在你阅读下面的部分之前,建议你先对CSS有一定的了解。


Emmet是什么?

Emmet采用文本缩写的方法,集合了不同的缩写,并且扩展为对应的html/xml/css。访问 下载页面 ,并为你的编辑器安装Emmet。

在使用Emmet编写代码时,输入适当的缩写,然后按下Emmet的功能键。在Sublime Text中,是TAB键。你正在处理的文件的语法将决定使用哪些缩写。

为什么要使用Emmet?

Emmet使用符合常识的缩写来简化编写代码的过程。它可以起到多大的作用,取决于你投入了多少时间去学习它的来龙去脉。

Emmet(以前叫做Zen Coding )是一个面向Web开发者的工具,它可以大大加快你的HTML和CSS的工作流程。
它不仅可以节省你的时间,还可以使编写代码的过程更加轻松愉快。只要输入很少的字符,然后看着它们神奇地扩展为格式完美的代码!如果产生了一些错误,撤销按钮可以将扩展后的代码变回原本的缩写形式,这样你就可以再次编辑并且将它扩展。

我同时还发现Emmet让我更加轻松地记住了代码。缩写毫无疑问更加易于记忆。 text-transform:对应 “tt” 和 text-align:justify; 对应 “taj” 。可以看到这会有多大的帮助。你将开始学习新的CSS属性并且只需要记住它的缩写。你甚至不需要担心分号和空格,Emmet为你解决这些事情!


Emmet和CSS

让我们来看看Emmet的CSS缩写的基本构成,以及它如何加快工作流程。

属性(Properties)

CSS对属性赋予相应的值,如 font-size,margin,padding,等等。

css-best-property-value

取自学习CSS的最佳方法

Emmet对每个已知的CSS属性定义了一个缩写。因此, border-bottom 就是 bdb , border-top 就是 bdt 。下面这个例子是 font-size ,也就是 fz 。

键入缩写之后,按下功能键(我的配置,TAB)和Emmet会神奇地将缩写扩展为有效的CSS,并且将光标移动到你会需要继续输入的地方。

Properties

值(Values)

现在我们已经了解了属性,是时候添加一个值了。这是通过键入缩写与所需的值的组合来完成的。例如,fz18 将会输出 “font-size: 18px; 。你不需要输入”px”,因为Emmet会默认添加它。如果一个项目没有单位(如 font-weight ),Emmet也足够聪明地知道不要添加 px。

Values

单位(Units)

如果你并不都是使用像素怎么办?em , rem , % , ex ,和 px 这些单位都可以在Emmet中使用。每个单位也有一个缩写形式(虽然这看起来可能有点极端):

  • px → 默认
  • p → %
  • e → em
  • r → rem
  • x → ex
    要使用一个单位,只需值的末尾加上单位的缩写。下面的例子是用单位 em 定义一个字体大小

Units

多个单位(Multiple Units)

某些属性,比如 margin ,允许多个值。要用Emmet做到这一点,就用破折号(-)分隔每一个值。来看看下面这个例子,它给 body 定义 margin 的四个值。

Multiple Units

颜色(Colors)

Emmet要求你在前面加上# ,而不是将加到值的末尾。所以 # 紧跟在你的属性后面,在值的前面。不同的字符数输出不同的十六进制代码。来看一些例子:

  • #1 → #111111
  • #e0 → #e0e0e0
  • #fc0 → #ffcc00
    下面是定义 body 颜色的一个例子,使用 #111 ( c#1 ):

Colors

!important

尽管 !important 标签不应该经常使用,Emmet 还是提供了它,为防万一。添加一个感叹号 ! 到你的缩写,像这样:

!important

多个属性(Multiple Properties)

现在,我们对Emmet的CSS功能的有了一个基本的了解,是时候开始把它们结合起来。像类似类似处理HTML的方式,你可以给它们每一个都添加一个加号(+)。请记住,如果你遇到了问题,你可以随时撤销并修改字符串。

写出你的所需的每一个属性和值,用 + 分隔它们,然后按下功能键来查看结果。

下面是为 body 定义不同的 margin 和 padding 的一个例子。

Multiple Properties

例子

记住,你可以组合或者独立地使用所有这些缩写。这不是关于怎样一次就使用Emmet写出正确地代码,只是让你更容易编写你的CSS。为了总结这些很酷的GIF动画,这里有个一个例子,快速创建一个 class 为panel 的 div。

例子

结论

Emmet是一个强大的工具。被一些人称为“高速”的编码工具,它可以让你花更少的时间一遍又一遍地写同样的代码,而无需手动创建自己的代码段。Emmet的灵感来自于CSS选择器,并且可以在所有主流的编辑器中使用,以适应任何开发者的工作流程。

请记住,你添加到你的工作流的任何新工具都会有一个学习曲线,但不要花费比你需要弄清楚它是如何为你工作这个过程更多的时间。定期查看文档是一个很好的复习,同时Emmet提供了一个 cheat sheet ,囊括了所有可用的功能。这是为了帮助你少一些思索,同时写更多的代码而建的!

相关链接

Original Page : Turbo-Charge Your CSS With Emmet