Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (124 sloc) 3.15 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>jQuery 新浪表情插件 Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="dist/jquery-sina-emotion.min.css"/>
<style type="text/css">
body {
color: #345;
font-size: 14px;
background: #f1f3f5;
text-align: center;
}
body, textarea {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}
a {
color: #345;
}
a:hover {
color: #745fb5;
}
#title {
font-weight: normal;
}
#desc {
color: #678;
line-height: 30px;
margin: 0 0 30px 0;
}
#form {
margin: 20px 0;
}
#article,
#content {
width: 500px;
height: 100px;
overflow: auto;
margin: 5px auto;
padding: 5px 8px;
text-align: left;
background: #f8f9fa;
box-sizing: border-box;
box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
}
#article .sina-emotion {
vertical-align: middle;
}
#content {
padding: 8px;
resize: none;
border: none;
outline: none;
font-size: 14px;
background: #fff;
box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
}
.button {
color: #fff;
border: none;
outline: none;
margin: 0 5px;
padding: 8px 16px;
border-radius: 3px;
background: #678;
background: linear-gradient(15deg, #678, #6f8793);
box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
}
.button:hover {
background: #89a;
}
.button:active {
background: #556371;
}
</style>
</head>
<body>
<h1 id="title">jQuery Sina Emotion</h1>
<p id="desc">
一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。<br>
<a target="_blank" href="https://www.npmjs.com/package/jquery-sina-emotion">npm</a> |
<a target="_blank" href="https://github.com/Lanfei/jquery-sina-emotion">GitHub</a> |
<a target="_blank" href="https://gitee.com/lanfei/jquery-sina-emotion">码云</a> |
<a target="_blank" href="http://www.clanfei.com">Blog</a>
</p>
<p id="article">
请编辑内容,插入表情后点击解析按钮。
</p>
<form id="form">
<p>
<label><textarea id="content">欢迎使用 jQuery Sina Emotion [微笑]</textarea></label>
</p>
<input id="face" class="button" type="button" value="表 情"/>
<input class="button" type="submit" value="解 析"/>
</form>
<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery-sina-emotion.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57981079-1"></script>
<script>
$('#form').bind({
submit: function (e) {
var content = $('#content').val();
$('#article').html(content).parseEmotion();
e.preventDefault();
}
});
$('#face').bind({
click: function (event) {
if (!$('#sinaEmotion').is(':visible')) {
$(this).sinaEmotion();
event.stopPropagation();
}
}
});
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-57981079-1');
gtag('event', 'pv', {event_category: 'jquery-sina-emotion'});
</script>
</body>
</html>
You can’t perform that action at this time.