In fact, many customer service Plug-ins is very simple, is a simple HTML structure. Of course, it combines asynchronous Ajax to get data. As for the micro-letter background How to set the URL of the plugin here is not much to say, look at the API, don't tell me you do not understand? To do a plug-in code only need to call the WINDOW.EXTERNAL.PUTMSG (JSON) can be selected three kinds of content (text, pictures, graphics) to be transferred to the multiple Customer service software send box! Here's an example of sending a picture. In the process is the Ajax background to take pictures, and then display, and then click the mouse button to send. (Note that the micro-mail image has a size limit, please see the official API)
Effect Chart:
Client
One, we want to organize the JSON format:
{
msg:{
head:{
Random: (New Date ()). valueof (). ToString ()
},
body:[{
Type:1,
content:{
Picurl:imageurl
}
}]
}
}
Second, plug-in my_plugin.html layout of the HTML (that is, plug-in window) is the best response, but write fixed width also line, the official recommended width is 420px
<meta http-equiv= "Content-type" content= "text/html; Charset=utf8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
<title></title>
<style>
Body {
font-family: "Microsoft Yahei", Arial, Sans-serif;
font-size:14px;
Background: #FFF;
Overflow-x:hidden;
}
. title{font-size:15px;margin-bottom:5px;}
. content{margin-bottom:10px;}
. Textarea{background-color: #FFFCEC;}
. Module{background: #eee; border:1px solid #DDDDDD; padding:5px; margin-bottom:10px;}
. button {
margin-top:8px;
Padding:0 20px;
Text-align:center;
Text-decoration:none;
font:12px/25px Arial, Sans-serif;
border-radius:5px;
}
. Green {color: #3e5706; background: #a5cd4e;}
. img {width:170px;height:120px;}
LI.LEFT{FLOAT:LEFT;MARGIN:8PX 0 0 5px;padding:0;border:1px solid #0088d0;}
. gallery{
List-style:none;
margin:0; padding:0;
width:100%;
font-size:0; /* Fix inline-block spacing * *
}
. Gallery li{
Display:inline-block;
*display:inline;
Zoom:1;
width:170px; height:120px;
margin:2px;
border:5px solid #fff;
-moz-box-shadow:0 2px 2px Rgba (0,0,0,.1);
-webkit-box-shadow:0 2px 2px Rgba (0,0,0,.1);
box-shadow:0 2px 2px Rgba (0,0,0,.1);
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-ms-transition:all 3s ease;
-o-transition:all 3s ease;
Transition:all 3s ease;
}
. Gallery:hover Li:not (: hover) {
-webkit-filter:blur (2px) grayscale (1);
-moz-filter:blur (2px) grayscale (1);
-o-filter:blur (2px) grayscale (1);
-ms-filter:blur (2px) grayscale (1);
Filter:blur (2px) grayscale (1);
Opacity:. 7; * Fallback * *
}
</style>
<body style= "" >
<div>
<div class= "Module" >
<div class= "title" >
<span style= "Margin-left:39%;color: #C62A2A;" > Latest Product Map </span>
</div>
<div class= "Content" >
<ul class= "Gallery" >
</ul>
</div>
<div style= "Text-align:center;clear:both;" >
<input type= "button" class= "button" id= "Add" onclick= "Get ()" value= "re-fetch"/>
</div>
<div>
<span id= "Putmsgret" style= "color:red;font-size:11px" ></span>
</div>
</div>
</div>
<script type= "Text/javascript" src= "Http://static.paipaiimg.com/js/victor/lib/jquery.min.js" ></script >
<script type= "Text/javascript" src= "Json2.min.js" ></script>
<script>
var ul = $ ("ul");
Get ();
function Get () {
$ ("Li"). Remove ();
$.getjson (' http://www.wp83.net/getImages.php ', null,function (data) {
$.each (data,function (index, URL) {
var li = ' <li class= ' left ' > ';
Li + + ' </li> ';
$ ("ul"). Append (LI);
});
});
}
function Mcs_clientnotify (eventdata) {
EventData = Strtojson (eventdata);
Switch (eventdata[' event ']) {
Case ' Onuserchange ': {
Onuserchange (EVENTDATA);
Break
}
}
}
Ul.on (' click ', '. img ', function () {
var $img = $ (this);
var thumburl = $img. attr (' src ');
var imageUrl = thumburl.substring (thumburl.indexof (' = ') +1,thumburl.indexof (' & '));
var json = setmsg (IMAGEURL);
var strreturn = WINDOW.EXTERNAL.PUTMSG (JSON);
document.getElementById (' Putmsgret '). Innerhtml= ' Status: ' + strreturn;
SetTimeout (close_tips,3000);
});
/*ul.on (' MouseEnter mouseout ', ". img", function (event) {
var $li = $ (this). Parents ("Li");
if (Event.type = = ' MouseEnter ') {
$li. css ({background: ' #EDED00 '});
} else {
$li. css ({background: ' #FFF '});
}
});*/
function Close_tips () {
document.getElementById (' Putmsgret '). InnerHTML = ';
}
function Setmsg (IMAGEURL) {
var json = {
msg:{
head:{
Random: (New Date ()). valueof (). ToString ()
},
body:[{
Type:1,
content:{
Picurl:imageurl
}
}]
}
};
Return json.stringify (JSON);
}
function Onuserchange (data) {
document.getElementById (' Touser '). InnerHTML = data[' userid '];
}
function Strtojson (str) {
var json = (new Function ("return" + str)) ();
return JSON;
}
</script>
</body>
Third, backstage PHP to deal with the code to obtain a picture directory: (This free play)
<?php
Class GetImage {
Const
HOST = ' http://www.wp83.net/',
jpg = ' jpg ';
Public
$files = Array ();
protected static
$allow _types = Array (self::jpg);
Public function __construct ($dir) {
$this->get_allfiles ($dir, $this->files);
}
Private Function Get_allfiles ($path,& $files) {
if (Is_dir ($path)) {
$DP = Dir ($path);
while ($file = $DP->read ()) {
if ($file!= "." && $file!= "...") {
$this->get_allfiles ($path.) /". $file, $files);
}
}
$DP->close ();
}
if (Is_file ($path)) {
$type = substr ($path,-3);
if (In_array ($type, Self:: $allow _types))
$files [] = Self::host. $path;
}
}
}
$dir = ' wp-content/uploads ';
$images = new GetImage ($dir);
Echo Json_encode ($images->files);
Then we can use the browser to debug the operation is no problem, then go to the micro-mail background to set the URL of the plugin. Because it's just an HTML.
Debug effect in Browser:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
