jquery.guide.js の新しいバージョンはオンラインです

この記事では、jquery.guide.js オンライン操作ガイドの新しいバージョン (推奨) を紹介します。必要な方は参考にしていただければ幸いです。

1. jquery.guide.js をご利用ください

Web サイトの公開時や改訂時には、重要な操作がどこにあるのか、興味深いことが隠されているのかなどをユーザーに伝えるための操作ガイドが作成されます。これらはすべて直接オフになるか、すぐにスキップされますが、一部のユーザーにとっては依然として非常に便利です。

この種のプロンプトのより良いインタラクティブ効果は、次のような中空の半透明マスクを使用することで、視覚的な焦点が一目で明確になります:

私は昨年「Tencent Weiyun Black Mask Guide」という記事を書きました。 " 「マスクの CSS 実装の改善」では、単一のタグを使用して同様のインタラクティブな効果を実現する方法を紹介しています。その中で中心となるテクニックは、CSS の境界プロパティを使用することです。つまり、周囲の黒い半透明マスクは実際には半透明の境界線です。

その後、CSS のアウトライン属性を使用する、より良い実装方法を見つけました。アウトライン属性は要素のサイズを増加させず、元のレイアウトを破壊しません。非常に大きなアウトライン幅の値を設定するだけで済みます。位置決め要素は常に自然にくり抜かれ、上下左右の半透明の黒い領域のサイズを計算する必要はありません。

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

最近、たまたま同様のニーズを持つ改訂プロジェクトがあり、この原則に基づいて、黒い半透明のマスクの中空プロンプトガイド効果を実現するために特別に使用される jquery.guide.js という jQuery プラグインを作成しました。

インスタンスのデモのアドレス: デモのアドレスはここをクリックしてください

2. jquery.guide.js プラグインの利点

jquery.guide.js プラグインの利点は次のとおりです:

1.使用するには、CSS リソースを直接導入する必要はありません。
2. ブラウザのスクロールとズームの位置変更をサポートします。終了するための ESC キーなど。
4. 提示された要素へのページの非同期ガイドをサポートします。つまり、localStorage に基づいて 1 回だけプロンプトを表示する組み込みの処理。
6. IE8 ブラウザーと互換性があります。

次に、いくつかの怠惰な部分:

1. デフォルトでは、アウトライン属性が使用されるため、次の図のような効果を実現したい場合は、丸みを帯びた角はサポートされません。

、CSS の box-shadow 属性を使用して、jquery で半透明のマスク効果をシミュレートできます。以下に示すように、guide.js のソース コードでは、実際に誰でも使用できるようになります。ソース コードのコメントにあるように、角丸をサポートしたい場合は、上のアウトラインをコメント化し、次の 2 行のボックスを解放します。 -shadow と border-radius のコメントが役に立ちます。

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

このうち、box-shadow: 0 0 0 9999px は、インプレイスシャドウ拡張 9999px を意味し、ユーザーの観点からは、画面全体に広がる黒い半透明のマスクです。

CSS3 box-shadow と border-radius をサポートしていない IE8 ブラウザーに関しては、アウトラインの直角効果が引き続き使用されます。

2. Z インデックス レベルや半透明マスク レイヤーの透明度は、基本的に初心者向けのガイダンス プロンプトが 1 回限りであるため、パラメーターとして公開されません。 、JS のソースコードを直接変更します。

3. jquery.guide.js プラグインの構文と使用法

構文は次のとおりです:

$.guide(options);

このうち、オプションは配列であり、配列の項目は関連するパラメーターを含む一貫した形式のオブジェクトです。このオブジェクトの統一されたデフォルト値は次のとおりです:

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

使用すると、次のようになります:

•selector は、公開されたターゲット要素を空にする必要があるセレクターを表します。 selector は複数の要素に一致する可能性があり、この選択を使用して最初の要素をターゲット要素として一致させることができます。要素が一致しない場合は、パラメータ オブジェクト全体が無視されます。

•content は、中空領域に表示される追加のコンテンツを表し、HTML 文字列または jQuery ラッパー オブジェクトにすることができます。

•align は、表示されるコンテンツの配置を左揃え、中央揃え、右揃えのいずれかに指定します。オプションのキーワード値には、 left 、 center 、 right が含まれます。 center はデフォルト値です。

•offset は、ターゲット要素を下端から 5 ピクセル上に位置合わせする水平方向と垂直方向の距離を表します。

百聞は一見に如かず、デモ ページを開始するには、ここをクリックしてください: jQuery プラグイン jquery.guide.js はデモを使用します

デモ ページには合計 4 つのプロンプト要素が設定されています。関連する JS は次のように使用されます。 :

$.guide([{
  selector: '#target'
}]);

これ デモの便宜上、デモページは特別に処理されており、更新されるたびにプロンプ​​ト効果が表示されます。実際の使用ではそのような問題は発生しませんが、表示されるのは 1 回だけですので、心配する必要はありません。

4. 結論

これは素晴らしいことではないので、github には載せません。もし幸運にもそれを使用して問題が発生した場合は、コメントの形でフィードバックを提供してください。

関連する推奨事項:

jQuery プラグイン ImgAreaSelect はアバターのアップロード プレビューとトリミング機能を実装します

jQuery プラグイン imgAreaSelect 例の説明

jQuery プラグイン jquery.viewport.js の詳細な説明

以上がjquery.guide.js の新しいバージョンはオンラインですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。