<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="kindeditor/default.css" rel="stylesheet" type="text/css" />
<script src="kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ()
{
$('#myindexface').click(function ()
{
var path = '/kindeditor/plugins/emoticons/images/',
currentPageNum = 1;
K = KindEditor;
var rows = 5, cols = 9, total = 135, startNum = 0,
cells = rows * cols, pages = Math.ceil(total / cells),
colsHalf = Math.floor(cols / 2),
menuDiv = K('<div class="ke-menu-default ke-shadow ke-menu" unselectable="on"></div>'),
wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
elements = [];
// menu = self.createMenu({
// name : name,
// beforeRemove : function() {
// removeEvent();
// }
// });
//menu.div.append(wrapperDiv);
menuDiv.css('position', 'absolute');
menuDiv.css('z-index', '999999');
menuDiv.css('top', '10px');
menuDiv.css('left', '10px');
menuDiv.append(wrapperDiv);
$(this).parent().append(menuDiv);
var previewDiv, previewImg;
previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
previewImg = K('<img class="ke-preview-img" src="' + path + startNum + '.gif" />');
wrapperDiv.append(previewDiv);
previewDiv.append(previewImg);
function bindCellEvent(cell, j, num)
{
if (previewDiv)
{
cell.mouseover(function ()
{
if (j > colsHalf)
{
previewDiv.css('left', 0);
previewDiv.css('right', '');
} else
{
previewDiv.css('left', '');
previewDiv.css('right', 0);
}
previewImg.attr('src', path + num + '.gif');
K(this).addClass('ke-on');
});
} else
{
cell.mouseover(function ()
{
K(this).addClass('ke-on');
});
}
cell.mouseout(function ()
{
K(this).removeClass('ke-on');
});
cell.click(function (e)
{
//self.insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />').hideMenu().focus();
$('#twmsg').val($('#twmsg').val() + '{' + num + '}');
menuDiv.remove();
e.stop();
});
}
function createEmoticonsTable(pageNum, parentDiv)
{
var table = document.createElement('table');
parentDiv.append(table);
if (previewDiv)
{
K(table).mouseover(function ()
{
previewDiv.show('block');
});
K(table).mouseout(function ()
{
previewDiv.hide();
});
elements.push(K(table));
}
table.className = 'ke-table';
table.cellPadding = 0;
table.cellSpacing = 0;
table.border = 0;
var num = (pageNum - 1) * cells + startNum;
for (var i = 0; i < rows; i++)
{
var row = table.insertRow(i);
for (var j = 0; j < cols; j++)
{
var cell = K(row.insertCell(j));
cell.addClass('ke-cell');
bindCellEvent(cell, j, num);
var span = K('<span class="ke-img"></span>')
.css('background-position', '-' + (24 * num) + 'px 0px')
.css('background-image', 'url(' + path + 'static.gif)');
cell.append(span);
elements.push(cell);
num++;
}
}
return table;
}
var table = createEmoticonsTable(currentPageNum, wrapperDiv);
function removeEvent()
{
K.each(elements, function ()
{
this.unbind();
});
}
var pageDiv;
function bindPageEvent(el, pageNum)
{
el.click(function (e)
{
removeEvent();
table.parentNode.removeChild(table);
pageDiv.remove();
table = createEmoticonsTable(pageNum, wrapperDiv);
createPageTable(pageNum);
currentPageNum = pageNum;
e.stop();
});
}
function createPageTable(currentPageNum)
{
pageDiv = K('<div class="ke-page"></div>');
wrapperDiv.append(pageDiv);
for (var pageNum = 1; pageNum <= pages; pageNum++)
{
if (currentPageNum !== pageNum)
{
var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
bindPageEvent(a, pageNum);
pageDiv.append(a);
elements.push(a);
} else
{
pageDiv.append(K('@[' + pageNum + ']'));
}
pageDiv.append(K('@ '));
}
}
createPageTable(currentPageNum);
})
});
</script>
</head>
<body>
<form action="" method="post">
<textarea name="msg" id="twmsg"></textarea>
<div class="addon" style="position: relative;">
<span>
<img title="表情" src="/images/plus.png" id="myindexface"></span>
</div>
<input type="submit" value="立即发布" class="user_btn user_btn_2">
</form>
</body>
</html>
方法二：
转载自：http://www.stepday.com/topic/?695
浙公网安备 33010602011771号