在texteditor中的按钮 [英] Button in texteditor
问题描述
你好，
我正在为richtext编辑器创建一个工具栏。我已经设法
使图像充当按钮（悬停，......）但是现在我希望能够点击时按下选择按钮（下）的
在它上面。
一个例子：当用户点击Bold时按钮，此按钮必须
似乎被选中，直到用户再次点击它。就像你在M $ Word等所有常规短信服务员中一样获得
。
代码：
< HTML> ;
< HEAD>
< style type =" text / css">
.IsButton
{width：22; height：22; margin：0; padding：0; border-width：1px; border-color：＃D0E4FC; border-style：solid;}
< /风格>
< script language =" JavaScript">
function mouse_out（）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
window.status ="" ;;
src.style.backgroundColor =" #D0E4FC";
src.style.borderTop ="＃D0E4FC solid 1px" ;;
src.style.borderRight ="＃D0E4FC solid 1px" ;
src.style.borderLeft ="＃D0E4FC solid 1px";
src.style.borderBottom ="＃D0E4FC solid 1px";
}
}
函数mouse_over（）{
var src = event.srcEleme nt;
if（src.className ==" IsButton"）{
window.status = src.alt;
src.style .backgroundColor =" #D0E4FC";
src.style.borderBottom =" buttonshadow solid 1px" ;;
src.style.borderLeft =" buttonhighlight solid 1px" ;
src.style.borderRight =" buttonshadow solid 1px" ;;
src.style.borderTop =" buttonhighlight solid 1px";
}
}
函数mouse_down（）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
src.style.backgroundColor ="＃D0E4FC" ;;
src.style.borderTop =" buttonshadow solid 1px" ;;
src.style.borderRight =" buttonhighlight solid 1px" ;;
src.style.borderLeft =" buttonshadow solid 1px" ;;
src.style.borderBottom =" buttonhighlight solid 1px";
}
}
函数mo use_up（）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
src。 style.backgroundColor =" #D0E4FC";
src.style.borderBottom =" buttonshadow solid 1px" ;;
src.style.borderLeft =" buttonhighlight solid 1px" ;;
src.style.borderRight =" buttonshadow solid 1px" ;;
src.style.borderTop =" buttonhighlight solid 1px";
}
}
< / SCRIPT>
< / HEAD>
< BODY>
< TABLE height =" 22" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" border =" 0">
< tr valign =" middle"宽度= QUOT; 100％QUOT; height =" 22">
< td height =" 22" bgcolor ="＃D0E4FC"
ondragstart =" event.returnValue = false;"
onselectstart =" event.returnValue = false;">
< span name =" toolbar" onmouseover =" mouse_over（）;"
onmousedown =" mouse_down（）;" onmouseup =" mouse_up（）;"
onmouseout =" mouse_out（）;" ondragstart =" event.returnValue = false;"
onselectstart =" event.returnValue = false;">
< img alt =" Bold" ;类= QUOT; IsButton" src =" images / bold.gif">
< img alt =" Italic"类= QUOT; IsButton" src =" images / italic.gif">
< / span>
< / td>
< / tr> ;
< / TABLE>
< / BODY>
< / HTML>
Hello,
I am creating a toolbar for an richtext editor. I already managed to
make the images act as buttons (hovering,...) But now I want to be able
to keep a button selected (down) when clicking on it.
An example: when a user clicks the "Bold" button, this button must
appear to be selected until the user again clicks on it. Like you have
in all regular texteditors like M$ Word.
The code:
<HTML>
<HEAD>
<style type="text/css">
.IsButton
{width:22;height:22;margin:0;padding:0;border-width:1px;border-color:#D0E4FC;border-style:solid;}
</style>
<script language="JavaScript">
function mouse_out() {
var src=event.srcElement;
if(src.className=="IsButton") {
window.status="";
src.style.backgroundColor = "#D0E4FC";
src.style.borderTop = "#D0E4FC solid 1px";
src.style.borderRight = "#D0E4FC solid 1px";
src.style.borderLeft = "#D0E4FC solid 1px";
src.style.borderBottom = "#D0E4FC solid 1px";
}
}
function mouse_over() {
var src=event.srcElement;
if(src.className=="IsButton") {
window.status=src.alt;
src.style.backgroundColor = "#D0E4FC";
src.style.borderBottom = "buttonshadow solid 1px";
src.style.borderLeft = "buttonhighlight solid 1px";
src.style.borderRight = "buttonshadow solid 1px";
src.style.borderTop = "buttonhighlight solid 1px";
}
}
function mouse_down() {
var src=event.srcElement;
if(src.className=="IsButton") {
src.style.backgroundColor = "#D0E4FC";
src.style.borderTop = "buttonshadow solid 1px";
src.style.borderRight = "buttonhighlight solid 1px";
src.style.borderLeft = "buttonshadow solid 1px";
src.style.borderBottom = "buttonhighlight solid 1px";
}
}
function mouse_up() {
var src=event.srcElement;
if(src.className=="IsButton") {
src.style.backgroundColor = "#D0E4FC";
src.style.borderBottom = "buttonshadow solid 1px";
src.style.borderLeft = "buttonhighlight solid 1px";
src.style.borderRight = "buttonshadow solid 1px";
src.style.borderTop = "buttonhighlight solid 1px";
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="22" cellpadding="0" cellspacing="0" border="0">
<tr valign="middle" width="100%" height="22">
<td height="22" bgcolor="#D0E4FC"
ondragstart="event.returnValue=false;"
onselectstart="event.returnValue=false;">
<span name="toolbar" onmouseover="mouse_over();"
onmousedown="mouse_down();" onmouseup="mouse_up();"
onmouseout="mouse_out();" ondragstart="event.returnValue=false;"
onselectstart="event.returnValue=false;">
<img alt="Bold" class="IsButton" src="images/bold.gif">
<img alt="Italic" class="IsButton" src="images/italic.gif">
</span>
</td>
</tr>
</TABLE>
</BODY>
</HTML>
推荐答案
Word。
代码：
< HTML>
< HEAD>
< style type =" text / css">
.IsButton
{ width：22; height：22; margin：0; padding：0; border-width：1px; border-color：＃D0E4FC; border-style：solid;}
< / style>
< script language =" JavaScript">
function mouse_out（）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
window.status ="" ;;
src.style.backgroundColor =" ＃D0E4FC" ;;
src.style.borderTop ="＃D0E4FC solid 1px";
src.style.borderRight ="＃D0E4FC solid 1px";
src.style.borderLeft =" #D0E 4FC solid 1px" ;;
src.style.borderBottom ="＃D0E4FC solid 1px";
}
}
函数mouse_over（）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
window.status = src.alt;
src.style.backgroundColor ="＃D0E4FC";
src.style.borderBottom =" buttonshadow solid 1px" ;;
src.style.borderLeft =" buttonhighlight solid 1px" ;;
src.style.borderRight =" buttonshadow solid 1px" ;;
src.style.borderTop =" buttonhighlight solid 1px";
}
}
function mouse_down （）{
var src = event.srcElement;
if（src.className ==" IsButton"）{
src.style .backgroundColor ="＃D0E4FC";
src.style.borderTop =" buttonshadow solid 1px" ;;
src.style.borderRight =" buttonhighlight solid 1px" ;
src.style.borderLeft =" buttonshadow solid 1px" ;;
src.style.borderBottom =" buttonhighlight solid 1px";
}
}
函数mouse_up（）{
var src = event.srcElement;
if（src.className ==" ; IsButton"）{
src.style.backgroundColor ="＃D0E4FC" ;;
src.style.borderBottom =" buttonshadow solid 1px" ;;
src.style.borderLeft =" buttonhighlight solid 1px" ;;
src.style.borderRight =" buttonshadow solid 1px";
src.style。 borderTop =" buttonhighlight solid 1px";
}
}
< / SCRIPT>
< / HEAD>
< BODY>
< TABLE height =" 22" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" border =" 0">
< tr valign =" middle"宽度= QUOT; 100％QUOT; height =" 22">
< td height =" 22" bgcolor ="＃D0E4FC"
ondragstart =" event.returnValue = false;"
onselectstart =" event.returnValue = false;">
< span name =" toolbar" onmouseover =" mouse_over（）;"
onmousedown =" mouse_down（）;" onmouseup =" mouse_up（）;"
onmouseout =" mouse_out（）;" ondragstart =" event.returnValue = false;"
onselectstart =" event.returnValue = false;">
< img alt =" Bold" ;类= QUOT; IsButton" src =" images / bold.gif">
< img alt =" Italic"类= QUOT; IsButton" src =" images / italic.gif">
< / span>
< / td>
< / tr> ;
< / TABLE>
< / BODY>
< / HTML>
Word.
The code:
<HTML>
<HEAD>
<style type="text/css">
.IsButton
{width:22;height:22;margin:0;padding:0;border-width:1px;border-color:#D0E4FC;border-style:solid;}
</style>
<script language="JavaScript">
function mouse_out() {
var src=event.srcElement;
if(src.className=="IsButton") {
window.status="";
src.style.backgroundColor = "#D0E4FC";
src.style.borderTop = "#D0E4FC solid 1px";
src.style.borderRight = "#D0E4FC solid 1px";
src.style.borderLeft = "#D0E4FC solid 1px";
src.style.borderBottom = "#D0E4FC solid 1px";
}
}
function mouse_over() {
var src=event.srcElement;
if(src.className=="IsButton") {
window.status=src.alt;
src.style.backgroundColor = "#D0E4FC";
src.style.borderBottom = "buttonshadow solid 1px";
src.style.borderLeft = "buttonhighlight solid 1px";
src.style.borderRight = "buttonshadow solid 1px";
src.style.borderTop = "buttonhighlight solid 1px";
}
}
function mouse_down() {
var src=event.srcElement;
if(src.className=="IsButton") {
src.style.backgroundColor = "#D0E4FC";
src.style.borderTop = "buttonshadow solid 1px";
src.style.borderRight = "buttonhighlight solid 1px";
src.style.borderLeft = "buttonshadow solid 1px";
src.style.borderBottom = "buttonhighlight solid 1px";
}
}
function mouse_up() {
var src=event.srcElement;
if(src.className=="IsButton") {
src.style.backgroundColor = "#D0E4FC";
src.style.borderBottom = "buttonshadow solid 1px";
src.style.borderLeft = "buttonhighlight solid 1px";
src.style.borderRight = "buttonshadow solid 1px";
src.style.borderTop = "buttonhighlight solid 1px";
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="22" cellpadding="0" cellspacing="0" border="0">
<tr valign="middle" width="100%" height="22">
<td height="22" bgcolor="#D0E4FC"
ondragstart="event.returnValue=false;"
onselectstart="event.returnValue=false;">
<span name="toolbar" onmouseover="mouse_over();"
onmousedown="mouse_down();" onmouseup="mouse_up();"
onmouseout="mouse_out();" ondragstart="event.returnValue=false;"
onselectstart="event.returnValue=false;">
<img alt="Bold" class="IsButton" src="images/bold.gif">
<img alt="Italic" class="IsButton" src="images/italic.gif">
</span>
</td>
</tr>
</TABLE>
</BODY>
</HTML>
IkBenHet< ik ******** @ hotmail.com>在留言新闻中写道：11 ********************** @ g14g2000cwa.googlegr oups.com ...
IkBenHet <ik********@hotmail.com> wrote in message news:11**********************@g14g2000cwa.googlegr oups.com...
你好，
我正在为richtext编辑器创建一个工具栏。我已经设法使图像充当按钮（悬停，......）但是现在我希望能够在点击它时保持选中（按下）按钮。
例如：当用户点击粗体时按钮，此按钮必须
似乎被选中，直到用户再次点击它。就像你在所有普通的短信作者中一样
Hello,
I am creating a toolbar for an richtext editor. I already managed to
make the images act as buttons (hovering,...) But now I want to be able
to keep a button selected (down) when clicking on it.
An example: when a user clicks the "Bold" button, this button must
appear to be selected until the user again clicks on it. Like you have
in all regular texteditors like M
Word。
一种方法是维护一个表源元素代表已被锁定的按钮，并具有扫描它的功能。
var buttonLocks = [];
函数isLocked（elem，table）
{
for（var i = 0; i< table.length&& elem！= table [ i]; i ++）
;
返回i == table.length？ -1：i;
}
使用mouse_down函数设置/删除锁定的元素：
function mouse_down（）
{
var src = event.srcElement，index;
if（（index = isLocked（src） ，buttonLocks））== -1）
buttonLocks [buttonLocks.length] = src; //将元素添加到表格
else
buttonLocks.splice（index，1）; //从表中删除
if（src.className ==" IsButton"）
{
.... ..
在其他css函数中：
if（isLocked（src，buttonLocks）== -1）//仅更改样式如果没有锁定
if（src.className ==" IsButton"）
{
.....
BTW Mozilla似乎没有回应你的桌面元素中的鼠标事件，所以你需要找到一种方式
，除非它'这是一个内联网工作。
另一个障碍是IE 5.0忘记了.splice方法，所以如果这是一个问题，你必须实现你的
拥有。
if（typeof Array（）。splice ==''undefined''）
Array.prototype.splice = function（start，count）
{
for（var i = start; i + count< this.length; i ++）
this [i] = this [i + count];
this.length- =计算;
}
-
Stephen Chalmers
547265617375726520627572696564206174204F2E532E2072 65663A205451323437393134
One way is to maintain a table of source elements representing buttons that have been locked, and have a function to
scan it.
var buttonLocks=[];
function isLocked( elem, table )
{
for(var i=0; i<table.length && elem!=table[i]; i++)
;
return i==table.length ? -1 : i;
}
Use the mouse_down function to set/remove locked elements thus:
function mouse_down()
{
var src=event.srcElement, index;
if( (index=isLocked(src, buttonLocks)) == -1 )
buttonLocks[buttonLocks.length]=src; // add element to table
else
buttonLocks.splice(index, 1); // remove from table
if(src.className=="IsButton")
{
......
In the other css functions:
if( isLocked(src, buttonLocks) == -1 ) // only change style if not locked
if(src.className=="IsButton")
{
.....
BTW Mozilla doesn''t seem to respond to the mouse events of your spans inside table elements so you''ll need to find a way
around that, unless it''s an intranet job.
Another snag is that I.E. 5.0 forgot about the .splice method, so again if it''s an issue you''ll have to implement your
own.
if(typeof Array().splice==''undefined'')
Array.prototype.splice=function(start, count)
{
for(var i=start; i+count<this.length; i++)
this[i] = this[i+count];
this.length-=count;
}
--
Stephen Chalmers
547265617375726520627572696564206174204F2E532E2072 65663A205451323437393134
这篇关于在texteditor中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
