序文:
同社の開発プロジェクトでは、Emoticonプラグインの使用が必要なため、Baiduに長い間行われています。多くのEmoticonプラグインは、多くのJSファイルを参照する必要があり、使用する既製のデモはありません。いくつかのプラグインは多くの写真を参照しており、各絵文字を再度リクエストする必要があります。このような機能については、多くのJSとIMGを紹介する努力の価値はありません...
したがって、ブロガーは、将来的に簡単に使用できるように、小さな「Expressionプラグイン」をコーディングしました。
関数
関数:式に対応する文字形式を背景に渡し、背景は文字列を返し、フロントエンドは文字列を対応する式に解析してページに表示します。
使い方:
オプションで必要なパラメーターを構成します
var option = {emojiarray:['Angry']、// emoji文字列の配列を入力します。 'emojicontainer'、//絵文字を保存するコンテナオブジェクト: 'send'、//情報を送信するボタンidemojitranslatecls: 'emoji-comment'、// emojiに変換する必要があるコンテナクラス名(img) emoji(option); text.init();おおよその効果のスクリーンショット:(UIは彼らのニーズに応じて美化できます)
[送信]をクリックした後、背景に送信されたデータは次のとおりです。
Emoticonプラグインの3つの原則:
•表現を表示する方法は?
CSSスプライト(画像統合テクノロジー)は、最初に背景アイコンを設定し、次に各小さなアイコンの位置、幅、高さを定義し、表示する表現を表示します。この期間中に遭遇する問題:表示された式のサイズを制御する方法は?私が最初に考えたのは、バックグラウンドサイズの方法ですが、その位置を再定義することは非常に「物理的」です。その後、未来が暗いとき、私はプロパティ変換を見つけました:スケール(1.5);現在の要素スケーリング比を制御するために、ハハ、コードの1行が行われます〜式を大きくても小さくしたいのですが、サイズに満足していませんか?すべてのコードを完成させます•入力ボックスに絵文字を表示する方法は?
最初は入力のTextareaを選択しましたが、入力ボックスにEmoticonの「追加」を配置すると、アイコンは表示されませんでした。後で、私はDIVを試してから「追加」してから、式を正常に表示できることを発見しましたが、Divはテキストを入力できませんでした。
予備的なアイデア:入力リスニングを使用して、Textarea値をリアルタイムでDIVに追加します。同様に、これはありがたいです〜探求し続けます...
その後、多数の属性を発見しました。 contentedable = "true"、そして喜んでContentedableを選択しました。
最初はSpanを使用してEmoticonアイコンをホストしますが、DivまたはSpanタグで画像を配置すると、デフォルトでコンテンツ誘導型が最後のDiv/Spanに追加されるため、Emoticonアイコンを入力してテキストを入力します。最後のテキストは最後のDiv/SPANになり、テキストが表示されません。わかりました...私はとても疲れています...
Div/SPANは不可能なため、IMGタグを使用して式をホストします。これにより、最終的に正常に入力できます。
[Contentedableには問題があり、豊富なテキストをサポートし、安全ではなく、ユーザーエクスペリエンスが低いです。 】
たとえば、ユーザーが貼り付けると、フォーマットが自動的に表示されます。例は次のとおりです。
これは、豊富なテキスト関数を削除するためのオンラインマスターのコードです。特定のリファレンスについて:マスターブログ投稿
•写真とテキストを変換する方法は?
現時点では、強力なルールを使用する必要があります。最初にHTML()を使用してコンテンツを取得し、コンテンツを処理します。テキストに変換:
1 content.replace(/<img/b [^>]*/、imgobj [j])//すべて<img/>を一致させ、対応する形式に置き換えます
2 imgobj.push(format + img [i] .getattribute( "alt") + format); //ここでフォーマットを使用します。したがって、これに似た形式です。恐ろしい:画像に変換するには:
var keys = '//+| - |||| ball | a | ab | abcd | abcd | accept ...' //いくつかの正規表現のみがここにリストされています。 regex = new regexp( ':(' + keys + '):'、 'g')、//このような形式を一致させる:$(obj [i])。html()。置換(regex、絵文字)// function emoji(){var key = arguments []; return '<img src = "フォーマット}プラグイン全体のコード形式は、カプセル化の一般的な方法でもあります。
// emojiオブジェクト可変属性関数emoji(option){this.emoji = option.emojiArray、this.textareaid = option.textareaid、this.lowid = option.loadid、option.sendid、thisemojicontainer = option.emojicontainer、thisemojitranslatecls option.emojitranslatecls;}//インスタンスが生成されるたびに、上記の属性が再生されるため、固定メソッドの場合、より多くのメモリを消費します。これは環境にやさしくも効率的でもありません。したがって、これらの変更されていないプロパティとメソッドは、プロトタイプオブジェクトで直接定義できます。現時点では、すべての固定方法は実際には同じメモリアドレスであり、プロトタイプオブジェクトを指しているため、操作効率が向上します。
emoji.prototype = {init:function(){//いくつかの初期化方法this.toemoji(); this.lowemoji(); this.bindevent();}、bindevent:function(){}、toemoji:function(){}、//サーバーデータをemoticons totext:function(){} //テキストloademoji:function(){} // load emoticons}に変換するOK、このようなExpressionプラグインが完成したとしても、それに縛られるのは簡単ですか?現在、当面はjqueryに頼る必要があります。エネルギーがある場合は、ネイティブJSに基づいてO(∩_∩)Oをいじり続けます。特定の実装コードはGitHubにあります。最後に、githubアドレスを添付してください:https://github.com/beidan/emoji
上記は、編集者が0から紹介したJavaScriptの紹介です。すべての人に役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!