According to Sina Weibo's emoticons plug-in, the plug-in provides an implementation in jquery mode.
Features:
One-time Initialization
Global Control (enable or disable)
You can remotely retrieve emoticon data.
Converts emoticon codes.
[Trigger dom with flexible user control]
The initialization code is as follows:
$. ExpBlock. initExp ({
// User expression structure data
ExpData: [{name: 'default', icons: [{url :".. /resources/js/plugins/exp/img/zz2_thumb.gif ", title:" woven "},{ url :".. /resources/js/plugins/exp/img/horse2_thumb.gif ", title:" Shenma "}]
// Contains textarea and emoticon-triggered exp-holder
Holder: '. exp-holder ',
// The textarea input dom in exp-holder. The default value is textarea,
Textarea: 'textea ',
// Trigger dom
Trigger: '. exp-block-trigger ',
// The number of emojis displayed on each page
Kgnum: 5,
// Relative location (absolute) | fixed window (fixed)
PosType: 'absolute ',
// Emoticons
ZIndex: '20140901'
});
Make the expression invalid
$. ExpBlock. disableExp ();
Enable facial expression restart
$. ExpBlock. enableExp ();
// Replace the emoticon code of the [Smile] class in the string with the label
Var s = $. expBlock. textFormat (val );
Complete html call example
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> emotion </title>
<Link rel = "stylesheet" type = "text/css" href = "../resources/js/plugins/exp/css/style.css"/>
<Script type = "text/javascript" src = "../resources/js/jquery-1.7.1.min.js"> </script>
<Script type = "text/javascript" src = "../resources/js/plugins/exp. js"> </script>
<Style>
<! --
. Holder-note {
Width: 500px;
Margin: 0 auto;
Margin-top: 10px;
Border: 1px dotted # ccc;
Background-color: # f1f1f1;
}
Ul {
List-style: disc;
List-style-position: inside;
Margin-left: 2em;
}
-->
</Style>
</Head>
<Body>
<Div class = "exp-holder" style = "margin: 0 auto; width: 500px;">
<Textarea id = "J_t" style = "width: 100%;"> click "Emotion" to add </textarea>
<A class = "exp-block-trigger" href = "javascript:;"> emotion </a>
<Button id = "J_sbt" type = "button"> check </button>
</Div>
<Div id = "J_resulte" style = "width: 500px; height: 200px; border: 1px solid green; margin: 0 auto;"> </div>
<Div class = "holder-note">
<H2> description <P> this plug-in is implemented using jquery, with the following features: </p>
<Ul>
<Li> one-time initialization, </li>
<Li> global control (ON and OFF), </li>
<Li> You can remotely retrieve emoticon data. </li>
<Li> converts emoticon codes. </li>
<P>
$. ExpBlock. initExp ({</br>
ExpData: null </br>
Holder: '. exp-holder', </br>
Textarea: 'textea ', </br>
Trigger: '. exp-block-trigger', </br>
Kgnum: 5, </br>
PosType: 'absolute ', </br>
ZIndex: '20140901' </br>
*/
});
</P>
<H3> note: css file support </Ul>
</Div>
</Body>
<Script type = "text/javascript">
$ (Document). ready (function (){
$. ExpBlock. initExp ({
/*
// User expression structure data
ExpData: [{name: 'default', icons: [{url :".. /resources/js/plugins/exp/img/zz2_thumb.gif ", title:" woven "},{ url :".. /resources/js/plugins/exp/img/horse2_thumb.gif ", title:" Shenma "}]
// Contains textarea and emoticon-triggered exp-holder
Holder: '. exp-holder ',
// The textarea input dom in exp-holder. The default value is textarea,
Textarea: 'textea ',
// Trigger dom
Trigger: '. exp-block-trigger ',
// The number of emojis displayed on each page
Kgnum: 5,
// Relative location (absolute) | fixed window (fixed)
PosType: 'absolute ',
// Emoticons
ZIndex: '20140901'
*/
});
// Invalidate the expression
$. ExpBlock. disableExp ();
// Restart the facial expression
$. ExpBlock. enableExp ();
$ ('# J_sbt'). click (function (){
Var s, ta = $ ('# J_t'), val = ta. val ();
// Replace the emoticon code of the [Smile] class in the string with the label www.2cto.com
S = $. expBlock. textFormat (val );
// Console. log (s );
Certificate ('{j_resulte'{.html (s );
})
/*
* Ajax remotely obtains emoticon. Pay attention to the same-origin policy.
* The returned data must be in the format of [{name: groupname, icons: [{url: 'imgurl', title: "iconname"}, {url: 'imgurl', title: "iconname"}]}, {name: groupname, icons: [{url: 'imgurl', title: "iconname"}, {url: 'imgurl', title: "iconname"}]},...]
*/
// $. ExpBlock. getRemoteExp (url );
})
</Script>
</Html>
From lazy