DHTML - 极湖

Posts tagged with "DHTML"

利用 ContentEditable 做 WYSIWYG 编辑器

Sunday, 27. April 2008, 12:50:30

接下来要做的项目，需要在网页中实现一个拖方式的 WYSIWYG 编辑器，找了很多开源的基于 JavaScript 的编辑器，都难以实现复杂的拖放功能，因为它们几乎都是清一色使用 iframe 的 DesignMode="on" 属性，而跨 frame 的拖放非常困难，在网上很难找到现成的例子。

后来发现除了 Firefox 的其他浏览器，几乎都支持 div 的 ContentEditable="true" 属性，而 Firefox 3 也将支持该属性，所以决定用 div 做编辑器。刚开始觉得不难，然而一开始做就遇到不少难点，最主要是：

输入焦点的控制
光标位置的控制
选取区域的控制

这几个问题不解决，很难做出令人满意的编辑器。因此，正在努力解决以上问题。

0 Comments

用JavaScript上下移动表格的行

Monday, 4. June 2007, 02:41:20

JavaScript, DHTML

看到过很多调整表格行顺序的例子（包括自己以前做过的），基本都是每一次上下移动都要向服务器提交，在移动很多次的时候，很浪费资源，因此想用JavaScript在客户端实现对表格行顺序调整，最后才向服务器提交。

费了近一上午的时间，才做出这么一个例子：

<html>
<head>
<title>Move table row up/down test</title>
<script language="javascript">
//*********************************
// Get current row's index by name
//*********************************
function getRowIndex(strName)
{
var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');
arrNameIndex = new Array()
for (var i=0; i<rows.length; i++) {
if(strName == rows[i].getAttribute('id')) {
return i;
}
}
}

//*********************************
// Move row up
//*********************************
function moveRowUp(rowIndex)
{
if(rowIndex == 0) {
return;
}

var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');

tr = rows[rowIndex];
pos = rows[rowIndex-1];
pos.parentNode.insertBefore(tr, pos);

} 

//*********************************
// Move row down
//*********************************
function moveRowDown(rowIndex)
{

var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');

if(rowIndex >= rows.length) {
return;
}

tr = rows[rowIndex+1];
pos = rows[rowIndex];
pos.parentNode.insertBefore(tr, pos);

} 
</script
</head>
<body>
<table id="targettable">
<tr valign="top" id="row1"> 
<td>This is :</td> 
<td>Line1</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row1'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row1'));" value="↓" />
</td>
</tr> 
<tr valign="top" id="row2"> 
<td>This is :</td> 
<td>Line2</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row2'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row2'));" value="↓" />
</td>
</tr> 
<tr valign="top" id="row3"> 
<td>This is :</td> 
<td>Line3</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row3'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row3'));" value="↓" />
</td>
</tr> 
</table>
</body>
</html>

以上例子，在提交表单的时候处理起来有些麻烦，因此新作了一个：

<html>
<head>
<title>shift row of table sample</title>
<script language="javascript">
<!--
var MIN_ROW_ID = 0;
var MAX_ROW_ID = 5;
var MIN_COL_ID = 2;
var MAX_COL_ID = 4;
var flgOrderChanged = false;

//*********************************
// Move Up
//*********************************
function moveRowUp(rowId)
{
if(rowId <= MIN_ROW_ID) {
return;
}

var strPrefix = 'R' + rowId + 'C';
var strUpPrefix = 'R' + (rowId - 1) + 'C';
for(var colId = MIN_COL_ID; colId <= MAX_COL_ID; colId++) {
var strDivId = strPrefix + colId;
var strUpDivId = strUpPrefix + colId;

var objDiv = document.getElementById(strDivId);
var objUpDiv = document.getElementById(strUpDivId);

var tmpHTML = objDiv.innerHTML;
objDiv.innerHTML = objUpDiv.innerHTML;
objUpDiv.innerHTML = tmpHTML;
}

flgOrderChanged = true;
} 

//*********************************
// Move Down
//*********************************
function moveRowDown(rowId)
{
if(rowId >= MAX_ROW_ID) {
return;
}

var strPrefix = 'R' + rowId + 'C';
var strDownPrefix = 'R' + (rowId + 1) + 'C';
for(var colId = MIN_COL_ID; colId <= MAX_COL_ID; colId++) {
var strDivId = strPrefix + colId;
var strDownDivId = strDownPrefix + colId;

var objDiv = document.getElementById(strDivId);
var objDownDiv = document.getElementById(strDownDivId);

var tmpHTML = objDiv.innerHTML;
objDiv.innerHTML = objDownDiv.innerHTML;
objDownDiv.innerHTML = tmpHTML;
}

flgOrderChanged = true;
} 
-->
</script
</head>
<body>
<table border="1" width="60%" align="center" cellspacing="0"  bgcolor="">
    <tr bgcolor="#E6E6FA">
      <td  height="1" align="center" colspan="2">Order</td>
      <td  height="1" align="center" width="30%">Column1</td>
      <td  height="1" align="center" width="30%">Column2</td>
      <td  height="1" align="center">Oprations</td>
    </tr>
      <tr>
      <td  height="1" align="left">
      <div id="R0C0" align="center">
          <a href="javascript:moveRowDown(0);">Down</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R0C1" align="center">1</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C2" align="left">Row 1 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C3" align="left">Row 1 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C4" align="left"><a href="#edit">Edit(1)</a></div>
      </td>
    </tr>
    <tr>
      <td  height="1" align="left">
      <div id="R1C0" align="center">
      <a href="javascript:moveRowDown(1);">Down</a>
          <a href="javascript:moveRowUp(1);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R1C1" align="center">2</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C2" align="left">Row 2 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C3" align="left">Row 2 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C4" align="left"><a href="#edit">Edit(2)</a></div>
      </td>
    </tr>
    <tr>
    <tr>
      <td  height="1" align="left">
      <div id="R2C0" align="center">
      <a href="javascript:moveRowDown(2);">Down</a>
          <a href="javascript:moveRowUp(2);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R2C1" align="center">3</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C2" align="left">Row 3 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C3" align="left">Row 3 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C4" align="left"><a href="#edit">Edit(3)</a></div>
      </td>
    </tr>
    <tr>
    <tr>
      <td  height="1" align="left">
      <div id="R3C0" align="center">
          <a href="javascript:moveRowUp(2);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R3C1" align="center">4</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C2" align="left">Row 4 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C3" align="left">Row 4 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C4" align="left"><a href="#edit">Edit(4)</a></div>
      </td>
    </tr>
</table>
</body>
</html>

把以上代码保存成html文件，用浏览器(IE, Firefox, Opera ...)打开即可看到效果。

0 Comments

Mozilla/Firefox里HTML元素没有outerHTML属性

Thursday, 8. June 2006, 08:36:50

Web, DHTML, JavaScript

为实现一个动态的输入表单，用到了innerHTML和outerHTML，写了不少JavaScript，在IE和Opera里面正常运行了，可是到Firefox里面一看，居然不支持outerHTML属性，没办法，只有用另一个方法实现。

看来Firefox也很倔，就是不想跟着IE改，其实，outerHTML这个东西有时候还是需要的。

0 Comments