JavaScript | IT北瓜

存档

文章标签 ‘JavaScript’

【转】JavaScript检查ActiveX控件是否已经安装过

2010年1月27日 IT北瓜没有评论

function detectPlugin(CLSID,functionName)
{
    var pluginDiv = document.createElement("<div id=\"pluginDiv\" style=\"display:none\"></div>")
    document.body.insertBefore(pluginDiv);
    pluginDiv.innerHTML = '<object id="objectForDetectPlugin" classid="CLSID:'+ CLSID +'"></object>';
    try
    {
        if(eval("objectForDetectPlugin." + functionName) == undefined)
        {
            pluginDiv.removeNode(true);//删除pluginDiv及其所有的子元素
            return false;
        }
        else
        {
            pluginDiv.removeNode(true);//删除pluginDiv及其所有的子元素
            return true;
        }
    }
    catch(e)
    {
        return false;
    }
}

这是通用的方法，只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。

以下是测试实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这是通用的方法，只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了</title>
</head>
<script language="javascript">
function openreg(){
    if(detectPlugin('A0F5EA74-8C04-4AF7-B7EA-DCB43F53ED45','CurVersion')==false)
    {
        alert("控件未安装");
    }
}
function detectPlugin(CLSID,functionName)
{
    var pluginDiv = document.createElement("<div id=\"pluginDiv\" style=\"display:none\"></div>")
    document.body.insertBefore(pluginDiv);
    pluginDiv.innerHTML = '<object id="objectForDetectPlugin" classid="CLSID:'+ CLSID +'"></object>';
    try
    {
        if(eval("objectForDetectPlugin." + functionName) == undefined)
        {
            pluginDiv.removeNode(true);//删除pluginDiv及其所有的子元素
            return false;
        }
        else
        {
            pluginDiv.removeNode(true);//删除pluginDiv及其所有的子元素
            return true;
        }
    }
    catch(e)
    {
        return false;
    }
}
</script>
<body>
<p>通过浏览器打开Topteam客户端----测试</p>
<p>
<input type="button" value="进入系统" onclick="openreg();"/>
</p>
</body>
</html>

分类: 计算机应用标签: ActiveX, JavaScript

10种新的、有前途的JavaScript框架【转】

2009年11月12日 IT北瓜没有评论

目前比较流行的JavaScript框架/库有jQuery，MooTools，Prototype，和YUI。但是除了这些流行的框架，还有很多很好的框架也值得我们去关注。以下列出的是10种被认为很有前途的JavaScript框架。

1. SproutCore

SproutCore强调自身的独特之处是，具有桌面应用程序的功能（bringing desktop application functionalities on the web.）。

SproutCore官网

SproutCore文档

SproutCore的Google Group

SproutCore 示例: Photos, Sample Controls

2. Spry

Spry是Adode的Ajax框架，Spry的其中一个最显著的特性是与Adobe的产品集成，如Dreamweaver，Flash和AIR。像其它的Adobe的产品一样，它已经有大量的文档。

Spry 示例: Photo Gallery, RSS Reader, Form Validation Widgets

3. JavaScriptMVC

JavaScriptMVC应用了模型-视图-控制器架构模式，把业务逻辑和表示分离，使得代码更加模块化。

JavaScriptMVC 示例: Error Demo, History Demo, Todo Demo

4. Qooxdoo

Qooxdoo是一个面向对象的Ajax应用框架。它使你能够使用JavaScript来构建应用程序，而不用关心HTML，CSS和DOM。而且它是一个很好的图形用户界面的工具（有点像YUI），内建支持键盘，拖动等功能。

Qooxdoo 示例: demo browser, Feed Reader

5. midori

midori是一个轻量的JavaScript框架。即使没有压缩，它也只有45KB，而相比之下，jQuery压缩后也有54KB。不过它的轻量并不意味着它缺乏复杂的JavaScript功能。Midori提供了包括跨浏览器的Ajax功能，CSS选择器等等这些JavaScript框架一般都具有的功能。

midori 示例: drag and drop, popups, toggle

6. Archetype JavaScript Framework

Archetype JavaScript Framework与Prototype有很多共同点。它有一个独立的管理系统，能够只初始化页面需要的组件。而且Archetype强调代码易读性，和HTML/CSS/JavaScript分离的最优方法。

Archetype 示例: Slidy Presentation

7. June Framework

June Framework从Core library中获取灵感，应用了模块设计模式。如果你使用MS Visual Studio 2008的话，你会爱上它提供的文档，因为它使用了Visual Studio的代码格式。

June Framework 示例: setOpacity, highlight, getKeyName

8. UIZE

UIZE（发音: you eyes）是另一个强调RIA的JavaScript框架。它提供了很多Widget，比如日期选择器，表格过滤器，进度条，颜色选择器等。

UIZE 示例: Slideshow With Wipes, Marquee and Image Port

9. SimpleJS

SimpleJS是一个简单，轻量的，但很特别的JavaScript框架。它提供了Ajax函数和动态效果。它使用一个很像jQuery和MooTools的插件系统，可以很容易地扩展这个框架。对只需要基本Ajax功能和动态效果的开发者来说，它是一个完美的解决方案。

SimpleJS 示例: 官网 http://simplejs.bleebot.com/ 右边导航的Functions下

10. Fleegix.js

Fleegix.js是一个很好的事件系统，使你能够很容易地监听，操作，触发DOM事件。它有一个功能，能够将JavaScript对象序列化为JSON格式(fleegix.jason.serialize)，也有一些丰富的动态效果。

总结：
这么多的JavaScript框架，肯定有一款适合你或者你的项目的。

本文转自：OurJs

原文地址：http://www.ourjs.cn/show.php?id=465

分类: JavaScript, 前端设计标签: JavaScript, JavaScript框架, 前端设计

ie7-js

2009年11月12日 IT北瓜没有评论

众所周知，万恶的IE浏览器向来对W3C标准的支持很让前端开发者头疼！

ie7-js是一个JavaScript库，使Microsoft Internet Explorer也能表现得像一个符合标准的浏览器。它修复了许多HTML和CSS问题，并且解决了在IE5和IE6下PNG图片的透明问题。

项目地址: http://code.google.com/p/ie7-js/
Demo地址: http://ie7-js.googlecode.com/svn/test/index.html

使用方法：

IE7.js——使得IE5-6与IE7兼容

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js——给IE5-7增加一些只有IE8才有的CSS特性

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]—>

PNG——只会修正以 *-trans.png 命名的PNG图像。可惜,透明的背景图片像不能使用background-repeat平铺,也不可以用background-position定位。

分类: JavaScript, 前端设计标签: ie7.js, ie8.js, JavaScript, 前端设计

9 个基于JavaScript 和 CSS 的 Web 图表框架【转】

2009年11月11日 IT北瓜没有评论

jQuery， MooTools， Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。

1. Flot

9 个基于JavaScript 和 CSS 的 Web 图表框架

图1

Flot 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8， Firefox 2.x+， Safari 3.0+， Opera9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE，因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。

2. JS Charts

9 个基于JavaScript 和 CSS 的 Web 图表框架
图2

JS Charts 是一个免费的基于 JavaScript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用XML 或 JavaScript 数组缓存数据。

3. TableToChart

TableToChart 是一个 MooTools 脚本，可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。

4. PlotKit

PlotKit 是一个 JavaScript 绘图库，支持 HTML Canvas 标签，也支持 SVG。

5. Yahoo UI Charts Control

9 个基于JavaScript 和 CSS 的 Web 图表框架
图3

YUI Charts Control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 DataSource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。

6. ProtoChart

9 个基于JavaScript 和 CSS 的 Web 图表框架
图4

ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库，这个库深受 Flot， Flotr， Plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 IE6/7， Firefox 2/3 以及 Safari，甚至支持iPhone.

7. EJSChart

EJSChart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。

9 个基于JavaScript 和 CSS 的 Web 图表框架
图5

8. fgCharting

fgCharting 是一个很出色的 jQuery 插件，支持多种图形。

9. Pure Css Data Chart

9 个基于JavaScript 和 CSS 的 Web 图表框架
图6

以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图，甚至不需要 JavaScript。

本文转自：锐商企业官方网站
原文地址：http://www.comsharp.com/GetKnowledge.aspx?Culture=zh-CN&ActivePageMenuName=TeamBlogTimothyPage&KnowledgeID=751&PrintFriendly=true&Keyword=9+%E4%B8%AA%E5%9F%BA%E4%BA%8EJavaScript+%E5%92%8C+CSS+%E7%9A%84+Web+%E5%9B%BE%E8%A1%A8%E6%A1%86%E6%9E%B6

分类: CSS, JavaScript, 前端设计标签: CSS, JavaScript, 前端设计, 图表

Background JavaScript UI 库（背光JS框架）

2009年11月11日 IT北瓜没有评论

今天无意中看到的一个JS UI框架，背光JS框架，做得很漂亮，请看下图：

分类: CSS, JavaScript, 前端设计标签: CSS, JavaScript, UI, 前端设计, 背光

js当图片不存在时显示默认图片

2009年9月19日 IT北瓜没有评论

在很多情况下，比如：做产品展示，我们都会显示一张产品的图片，但某个产品暂时没有图片时就显示一张预设好的默认图片。以前的做法通常是默认图片也跟产品的图片一样保存在数据库的表字段中作为该字段的默认值。但假如某一产品本来有产品图片的（默认值已经改变了），只不过由于什么原因该产品对应的图片被删除了，但数据库表字段依然保存着它的产品图片路径，这时候显示的时候找不到相应的图片文件，图片就会显示成一个“X”，这样很影响视觉效果。这种情况下我们就可以利用js来显示一张默认图片替换掉这个“X”，代码很简单：

<img src="pro-pic/123.gif" onerror="javascript:this.src='pro-pic/default.gif'" />

分类: JavaScript 标签: JavaScript, 图片不存在, 默认图片

（CSS专题）链接美化之去掉虚线框

2009年9月1日 IT北瓜没有评论

忙碌的一天就这么过了，但睡觉前还是要把北瓜Update一下的，另外，今晚收到一个喜讯，至于喜讯的内容嘛，这里就不公布啦！Ok，进入正题。

如果你自己做过网页，那么我想你一定知道当点击一个超链接的时候会出现一个矩形虚线框，个人觉得那样看着心里挺别扭的，也有些影响美观，以下就总结一下去掉虚线框的几种方法：

方法一：利用javascript的onfocus事件：

<a href="#" onfocus="this.blur();">链接</a>

假如你的页面引入了jQuery框架（PS：我最喜欢的js框架）则可以利用它的事件绑定机制：

$('a').bind('focus', function(){
    if(this.blur){ //如果支持this.blur
        this.blur();
    }
});

方法二：利用css样式：

a{
    blr: expression(this.onFocus=this.close());
} /* 只支持IE，过多使用效率低 */
a{
    blr: expression(this.onFocus=this.blur());
} /* 只支持IE，过多使用效率低 */
a:focus {
    -moz-outline-style: none;
} /* IE不支持 */
:focus {
    outline: none;
} /* for Firefox */

方法三：利用标签属性，仅支持IE：

<a href="#" hidefocus="true">链接</a>

方法四：利用Web行为

IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX控件）来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为：WebService行为。

将以下代码保存为.htc后缀的文件：

<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
    function quit(){
        this.blur();
    }
</script>

然后，在需要去除超链虚框的页面的<head>和</head>之间加入：

<style type="text/css">
    a {behavior:url("htc文件")}
</style>

如果页面已经有了style标签，则只需要将 a {behavior:url(”htc文件”)} 一句插入里面即可。

分类: CSS, JavaScript 标签: CSS, JavaScript, link, 美化, 链接

IT北瓜

存档