仓酷云

标题: CSS教程之安装Firefox的Jetpack扩大的步骤 [打印本页]

作者: 小女巫 时间: 2015-1-15 23:34
标题: CSS教程之安装Firefox的Jetpack扩大的步骤
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造poluoluo文章简介：上面让我们一同来看看怎样一步步创立你的第一个Firefox的Jetpack扩大.
Firefox的Jetpack可让我们很轻松地创立Firefox插件，仅经由过程已把握的前端妙技（HTML/CSS/JS），估量让人更镇静的一点——Jetpack还集成了jQuery框架。
AdobeAir也好，WebOS也好，Jetpack也好，最少让我们一定一点，前真个代价将会在时机中愈来愈年夜的被展示。
上面让我们一同来看看怎样一步步创立你的第一个Firefox的Jetpack扩大：
第一步：安装Jetpack插件
Jetpack插件地点：https://jetpack.mozillalabs.com/install.html
安装完成Jetpack插件后，你就能够经由过程在地点栏中输出about:jetpack来会见Jetpack当地界面了。

第二步：创立planabc.js文件。
planabc.js的具体代码为：
jetpack.statusBar.append({
html:<imgsrc="http://www.planabc.net/favicon.ico"/>,
width:16,
onReady:function(widget){
$(widget).click(function(){
jetpack.tabs.focused.contentWindow.location="http://www.planabc.net/";
});
}
});
jetpack.statusBar.append将实行JavaScript工具（该JavaScript工具有四个属性：html、url、width和onReady）。

html属性：界说初始的HTML，将显现在形态栏。此样例中，将显现一个复杂的IMG元素。
url属性：界说将在形态栏上显现的内部HTML内容的URL。此样例中，未利用该属性。
width属性：界说内容在形态栏上的宽度（单元：像素）。此样例中，界说为16像素，也就是IMG元素自己的宽度。
onReady属性：界说被挪用的函数（一旦形态栏被创立，此函数将会被挪用）。因为Jetpack集成了jQuery框架，以是能够间接利用jQuery的属性和办法。在此样例中界说了如许一个函数，当点击该Jetpack扩大时，我们将修正jetpack.tabs.focused.contentWindow.location属性为http://www.planabc.net/。jetpack.tabs.focused.contentWindow.location工具相称于window工具，你能够会见经由过程JavaScript会见网页。

网页制造poluoluo文章简介：上面让我们一同来看看怎样一步步创立你的第一个Firefox的Jetpack扩大.

第三步：测试planabc.js代码。
经由过程在地点栏中输出about:jetpack会见到Jetpack当地界面，点击Develop标签，然后将planabc.js文件中的代码拷贝到页面上的输出框中。点击“tryoutthiscode”按钮，你将会看到一个新的icon呈现在Firefox窗口的右下角。
Develop十分便利在代码部署前，在Firefox中测试你的代码。

第四步：部署Jetpack扩大。
创立一个复杂的页面，在页面的HEAD元素内增加以下的LINK元素：
<linkrel="jetpack"href="planabc.js"name="怿飞的博客"/>
HTML文件源码以下：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>MozillaJetpack案例</title>
<linkrel="jetpack"href="planabc.js"name="怿飞的博客"/>
</head>
<body>
<ahref="http://www.planabc.net/2009/10/13/
build_firefox_extensions_with_jetpack/">《怎样创立Firefox的Jetpack扩大》</a>
</body>
</html>
最初，将HTML文件和planabc.js文件都上传到服务器。
第五步：安装Jetpack扩大。
在Firefox中扫瞄该HTML页面时，Jetpack插件将会在屏幕的最上方显现一个安装条，点击“install”按钮。将会提醒安装不受信托的特征，点击“IknowwhatI’mdoing.InstallIt!”按钮。
安装完成和第三步测试一样，将会看到一个新的icon呈现在Firefox窗口的右下角。假如此时你发明形态栏有2个不异的新icon，那意味着本来的测试代码仍然还在about:jetpack页面的Develop标签页中，清空输出框的代码便可打消。
前往到about:jetpack页面，点击InstalledFeatures标签，将在列表中显现有新安装的Jetpack扩大。
测试Demo：http://www.planabc.net/lab/jetpack/planabc/

一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

作者: 分手快乐 时间: 2015-1-25 08:07
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 只想知道 时间: 2015-2-2 20:10
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 柔情似水 时间: 2015-2-8 06:16
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 海妖 时间: 2015-3-7 13:57
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 小妖女 时间: 2015-3-15 07:57
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 冷月葬花魂 时间: 2015-3-22 00:10
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

欢迎光临仓酷云 (http://ckuyun.com/)