http://zentaoms.googlecode.com/svn/trunk/www/js/jquery/kindeditor/plugins/advtable/advtable.html@1059
<![CDATA[<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Table</title>
<style type="text/css" rel="stylesheet">
body {
margin: 0;
font:12px/1.5 "sans serif",tahoma,verdana,helvetica;
background-color:#F0F0EE;
color:#222222;
overflow:hidden;
}
label {
cursor:pointer;
margin-right: 20px;
}
.main {
margin: 0 10px;
}
.table {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
display:block;
}
.table li {
padding:0;
margin-bottom:10px;
display:list-item;
line-height:1.5;
}
.table li label {
font-weight:bold;
}
.table li input {
vertical-align:middle;
}
.table li input.text {
width:50px;
}
.margin-right-10 {
margin-right:10px;
}
.color-picker {
border: 1px solid #A0A0A0;
background-color: #FFFFFF;
font-size: 12px;
width: 60px;
height: 20px;
line-height: 20px;
padding-left: 5px;
overflow: hidden;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
cursor: pointer;
}
</style>
<script type="text/javascript">
var KE = parent.KindEditor;
location.href.match(/\&id=([\w-]+)/i);
var id = RegExp.$1;
location.href.match(/\?mode=([\w-]*)/i);
var mode = RegExp.$1;
KE.event.ready(function() {
var modeBox = KE.$('mode', document);
var rowsBox = KE.$('rows', document);
var colsBox = KE.$('cols', document);
var widthBox = KE.$('width', document);
var heightBox = KE.$('height', document);
var widthTypeBox = KE.$('widthType', document);
var heightTypeBox = KE.$('heightType', document);
var paddingBox = KE.$('padding', document);
var spacingBox = KE.$('spacing', document);
var alignBox = KE.$('align', document);
var borderBox = KE.$('border', document);
var borderColorBox = KE.$('borderColor', document);
var backgroundColorBox = KE.$('backgroundColor', document);
var lang = KE.lang.plugins.advtable;
widthTypeBox.options[0] = new Option(lang.percent, '%');
widthTypeBox.options[1] = new Option(lang.px, 'px');
heightTypeBox.options[0] = new Option(lang.percent, '%');
heightTypeBox.options[1] = new Option(lang.px, 'px');
alignBox.options[0] = new Option(lang.alignDefault, '');
alignBox.options[1] = new Option(lang.alignLeft, 'left');
alignBox.options[2] = new Option(lang.alignCenter, 'center');
alignBox.options[3] = new Option(lang.alignRight, 'right');
var rows = 3;
var cols = 2;
var width = 100;
var height = '';
var widthType = '%';
var heightType = '%';
var padding = 2;
var spacing = 0;
var align = '';
var border = 1;
var borderColor = '#000000';
var backgroundColor = '';
var table = KE.plugin.advtable.getSelectedTable(id);
if (mode === 'default' && table) mode = 'update';
if (mode === 'update') {
rows = table.rows.length;
cols = rows > 0 ? table.rows[0].cells.length : 0;
rowsBox.disabled = true;
colsBox.disabled = true;
var tableWidth = table.style.width || table.width;
var tableHeight = table.style.height || table.height;
if (tableWidth !== undefined && tableWidth.match(/^(\d+)((?:px|%)*)$/)) {
width = RegExp.$1;
widthType = RegExp.$2;
} else {
width = '';
}
if (tableHeight !== undefined && tableHeight.match(/^(\d+)((?:px|%)*)$/)) {
height = RegExp.$1;
heightType = RegExp.$2;
}
padding = table.cellPadding || '';
spacing = table.cellSpacing || '';
align = table.align || '';
border = (table.border === undefined) ? '' : table.border;
borderColor = table.getAttribute('borderColor') || '';
backgroundColor = table.style.backgroundColor || table.bgColor || '';
borderColor = KE.util.rgbToHex(borderColor).toUpperCase();
backgroundColor = KE.util.rgbToHex(backgroundColor).toUpperCase();
}
modeBox.value = mode;
rowsBox.value = rows;
colsBox.value = cols;
widthBox.value = width;
heightBox.value = height;
widthTypeBox.value = widthType;
heightTypeBox.value = heightType;
paddingBox.value = padding;
spacingBox.value = spacing;
alignBox.value = align;
borderBox.value = border;
function setColor(el, color) {
el.style.backgroundColor = color;
el.style.color = (color == '#000000') ? '#FFFFFF' : '#000000';
el.innerHTML = color;
}
setColor(borderColorBox, borderColor);
setColor(backgroundColorBox, backgroundColor);
var picker;
var currentElement;
function removePicker() {
if (picker) {
picker.remove();
picker = null;
currentElement = null;
}
}
function onclickFunc(el) {
if (picker && el === currentElement) {
removePicker();
} else {
removePicker();
var dialog = KE.g[id].dialogStack[0];
dialog.beforeHide = removePicker;
dialog.ondrag = removePicker;
var scrollPos = KE.util.getScrollPos();
var iframePos = KE.util.getElementPos(dialog.iframe);
var pos = KE.util.getElementPos(el);
picker = new KE.colorpicker({
x : iframePos.x + pos.x - scrollPos.x,
y : iframePos.y + pos.y - scrollPos.y + 22,
z : dialog.zIndex + 1,
onclick : function(color) {
setColor(el, color);
removePicker();
},
selectedColor : (el.innerHTML || '')
});
picker.create();
currentElement = el;
}
}
borderColorBox.onclick = function() {
onclickFunc(borderColorBox);
};
backgroundColorBox.onclick = function() {
onclickFunc(backgroundColorBox);
};
KE.util.pluginLang('advtable', document);
KE.util.hideLoadingPage(id);
}, window, document);
</script>
</head>
<body>
<div class="main">
<input type="hidden" id="mode" name="mode" value="" />
<ul class="table">
<li>
<label for="rows"><span id="lang.cells"></span></label>
<span id="lang.rows"></span> <input type="text" id="rows" name="rows" value="" maxlength="4" class="text margin-right-10" />
<span id="lang.cols"></span> <input type="text" id="cols" name="cols" value="" maxlength="4" class="text" />
</li>
<li>
<label for="width"><span id="lang.size"></span></label>
<span id="lang.width"></span> <input type="text" id="width" name="width" value="" maxlength="4" class="text" align="absmiddle" />
<select id="widthType" name="widthType" align="absmiddle" class="margin-right-10"></select>
<span id="lang.height"></span> <input type="text" id="height" name="height" value="" maxlength="4" class="text" align="absmiddle" />
<select id="heightType" name="heightType" align="absmiddle" class="margin-right-10"></select>
</li>
<li>
<label for="padding"><span id="lang.space"></span></label>
<span id="lang.padding"></span> <input type="text" id="padding" name="padding" value="" maxlength="4" class="text margin-right-10" />
<span id="lang.spacing"></span> <input type="text" id="spacing" name="spacing" value="" maxlength="4" class="text" />
</li>
<li>
<label for="align"><span id="lang.align"></span></label>
<select id="align" name="align"></select>
</li>
<li>
<label for="border"><span id="lang.border"></span></label>
<span id="lang.borderWidth"></span> <input type="text" id="border" name="border" value="" maxlength="4" class="text margin-right-10" />
<span id="lang.borderColor"></span> <span id="borderColor" class="color-picker"></span>
</li>
<li>
<label for="backgroundColor"><span id="lang.backgroundColor"></span></label>
<span id="backgroundColor" class="color-picker"></span>
</li>
</ul>
</div>
</body>
</html>]]>