Web デザインを簡素化する 5 つの知られていない JavaScript ライブラリ-jsチュートリアル-php.cn

このまとめでは、最新の魅力的な Web サイトの開発を本当に簡素化できる 5 つの JavaScript ライブラリを見ていきます。これから説明するライブラリは、jQuery や YUI などのライブラリとは異なります。それらはより小さく、より専門化されています。しかし、彼らはその分野で最善を尽くし、独自の機能を提供します。

1. DD_BeratedPNG を使用して IE6 で PNG を修正する

作成者: ドリュー・ディラー
ライセンス: MIT
目的: IE6 のアルファ透明 PNG を修正する
サイズ: 6.86kb (圧縮後)
互換性: IE6 のみ
デモを見る

AlphaImageLoader

フィルターに頼らずに IE6 でアルファ透明 PNG を使用できるようにするという唯一の目的で作成されました。 IE6 で PNG を使用してみた人なら誰でも、非常に基本的な範囲までは機能するものの、背景画像の繰り返しなどは問題外であることを知っています。 AlphaImageLoader フィルタを使用しても、背景画像でしか機能しないため、IE6 の PNG 問題の半分しか解決できません。

に入るためには

ライブラリには、ライブラリターゲット (PNG src 属性を持つもの) に単純な CSS セレクターを提供するためのメソッド (修正) があります。 5 个简化网页设计的晦涩 JavaScript 库

5 个简化网页设计的晦涩 JavaScript 库

Cufon では任意のフォントを使用できます

作成者: シモ・キヌネン

ライセンス: MIT
目的: Flash を使用せずに非標準フォントを埋め込む
サイズ: 17.8kb (圧縮)
互換性: すべて (IE6 を含む、すべての一般的なベンダーのすべての共通バージョン)
デモを見る
ダウンロード＃＃＃
タイポグラフィは、業界の他の分野と比較して、Web 開発の進歩がほとんど見られない分野です。 Web 開発者は、ほとんどの訪問者のコンピュータにインストールされている可能性が高い、少数の「Web セーフ」フォントセットに依存する必要があります。画像ベースとフラッシュベースのソリューションが登場しましたが、どちらも使用するには欠点があります。

Cufon は、サードパーティのプラグインを必要とせず、ブラウザーの組み込み機能を使用してブラウザーに表示できる強力で高速なソリューションを開発者に提供します。 Cufon フォントは、ネイティブ IE 実装で VML として使用したり、他のより強力なブラウザで

要素として使用したりできます。驚くべきことに、純粋な CSS を使用して、色やサイズなど、置換テキストのさまざまなスタイルを設定することもできます。

＃＃＃使用法＃＃＃

リソースにリンクする必要があります:

リーリー

つまり、これは、Cufon にどの要素を置き換えるかを指示するだけの例です:

リーリー

この API は、同じページで複数のフォントを使用し、IE のパフォーマンスを向上させるための他のソリューションを提供します。このセクションでは「任意のフォントを使用する」と呼んでいますが、埋め込み用にライセンスが付与されているフォントのみを使用する必要があることを覚えておいてください。次のスクリーンショットは、置換されたタイトルを示しています: <script> </script>

3. 5 个简化网页设计的晦涩 JavaScript 库任意のブラウザで Firebug を使用する

作成者: マイク・ラトクリフライセンス:BSD スタイル

＃＃＃ダウンロード＃＃＃
Firebug は間違いなく、Web 開発に利用できる最も優れた資産の 1 つです。もちろん、私は Web 開発を行うときに毎日これを使用しており、他の多くの人にとっても同様にプラグインとして選ばれているのは知っています。 Firebug の優れたパフォーマンスの残念な副作用は、他のブラウザの同様のツールと比較すると見劣りすることです。たとえば、IE でのレイアウトの問題や CSS エラーのトラブルシューティングは、無駄な作業になる可能性があります。
そこで Firebug Lite が登場します。これは、Firebug インターフェイスの主要な機能のほとんどを再作成し、他のすべてのプラットフォームに最適なデバッガを提供するシンプルな JavaScript ライブラリです。レイアウトの修正とブラウザ間の問題の解決が再び簡単になりました。
Firebug Lite の最大の利点の 1 つは、使用を開始するために何もダウンロードしたりインストールしたりする必要がないことです。Firefox 以外のブラウザで作業しているページをデバッグしたい場合は、SRC スクリプトを含めるだけで済みます。オンラインバージョンを指すファイル。Can:

以上です。他のブラウザで Firebug Lite を実行すると、ページに Firebug Lite が表示されます。オフラインで使用する場合は、スクリプトファイルと CSS ファイルをダウンロードして、他の JS または CSS ファイルと同様に使用する必要があります。次のスクリーンショットは、Safari での Firebug Lite を示しています:

5 个简化网页设计的晦涩 JavaScript 库

4. 使用 Raphael JS 渲染交互式 3D 形状

创建者：德米特里·巴拉诺夫斯基
许可：麻省理工学院
用途：在页面上绘制 SVG 形状
大小：58.4kb（压缩后）
兼容性：全部（来自所有常见供应商的所有常见版本，包括 IE6）
View Demo
下载

好吧，这个库并不是那么小，但这是有原因的；该库可以做很多事情，并向网页添加完整的 SVG 控制。说实话，它的威力是非常强大的。想象一下能够在网页上绘制平滑的曲线并动态创建自定义形状 - 拉斐尔做到了。

您可以制作完全跨浏览器的圆角，没有图像（除了库实际绘制的图像之外），您可以为任何图像创建褪色反射，动态旋转图像等等。由于所有路径都是使用 SVG 元素绘制的，因此您可以将 JavaScript 事件附加到它们，以便人们可以在鼠标悬停或单击（或任何其他 JS 事件）时与图像进行交互。可能性是无限的，API 提供了多种不同的方法，使使用该库成为一种乐趣。

用法

该库当然必须链接到：

<script type="text/javascript" src="raphael.js"/>

ログイン後にコピー

就是这样，没有其他依赖项。现在我们可以开始创建 SVG 形状：

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

ログイン後にコピー

该库易于使用，在本示例中我们仅使用了其功能的一小部分。使用此功能的页面应如下所示：

5 个简化网页设计的晦涩 JavaScript 库