[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / HTML /

Редактирование текстовых элементов

В версию 5.5, всенародно любимого браузера ;), ввели очень интересное свойство contentEditable. Используя это свойство к любому элементу HTML-документа, вы можете его (элемент) редактировать прямо в окне браузера (elementID.contentEditable=true). А самое главное то, что после внесения изменений, можно отключить редактирование и наслаждаться результатом не перезагружая сам документ (elementID.contentEditable=false). Теперь Internet Explorer можно использовать как простенький WYSIWYG-редактор.

Пример использования редактирования элемента:

<html><head><title>
 Редактируем DIV </title>
</head>
<body bgcolor=white text=black>
<div contentEditable=true>
 Этот текст редактируемый.
 </div>
</body></html>

Также, вы можете создать кнопку которая будет переключать режимы редактирования (включить/отключить). В этом вам поможет свойство isContentEditable, которое возвращает true если объект можно редактировать, или false если нельзя.

Добавим в наш пример кнопку (включить/отключить):

<html><head><title>
 Редактируем DIV </title>
<script language=jscript>
function onOff(){
 sButton.value = 
 (eDiv2.isContentEditable)
  ? "включить редактирование"
  : "отключить редактирование";
 eDiv2.contentEditable =
  (eDiv2.isContentEditable)
   ? false
   : true;
}
</script>
</head>
<body bgcolor=white text=black>
<div id=eDiv2
 contentEditable=false>
 Этот текст редактируемый.</div>
<p><button id=sButton
 onClick=onOff(); style=width:240px;>
 включить редактирование</button>
</body></html>

Но это не все! Для изменения начертания редактируемого текста, вы можете использовать клавиатурные сокращения. Не полный список представлен в таблице:

Не полный список клавиатурных сокращений.
Ctrl + Bполужирный (тег STRONG).
Ctrl + Iкурсив (тег EM).
Ctrl + Uподчеркнутый (тег U).
Ctrl + Kсоздать ссылку (тег А).
ENTERпараграф (тег P)
Shift + ENTERперевод строки (тег BR)
Ctrl + Alt + Cего величество copyright ©

Картинки можно втавлять по copy -> paste...

 

А теперь, можете войти на любой сайт в интернете (к другу — пошутить, к врагу — напакостить), и в адресной строке вашего браузера (как я заметил в начале, это должен быть IE5.5 и выше) написать следующую строчку, и нажать ENTER:

javascript:void(document.body.contentEditable = true);

После этого «переделываете» страничку так как вам вздумается, а готовую «работу» выводим на принтер.

Для последующих редизайнов можно создать JS-закладку состаящую из одной следующей строчки:

javascript:void(document.body.contentEditable = (document.body.isContentEditable) ? false : true);




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / HTML /

Основные тэги html
05-03-2010   

Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. Определяет видимую часть документа... подробнее

Кол. просмотров: общее - 6206 сегодня - 1

Определение наличия Flash-pluginа средствами HTML
29-04-2009   

По статистике, около 90% пользователей в наши дни пользуются Internet Explorer (5-й или 6-й версией). В этих браузерах Flash, как правило, уже установлен... подробнее

Кол. просмотров: общее - 3812 сегодня - 0

Оценка XHTML
29-04-2009   

Эту статью в 2000 году написал небезызвестный веб-разработчик Петер-Пауль Кох (Peter-Paul Koch), который поддерживает один из лучших ресурсов по JavaScript... подробнее

Кол. просмотров: общее - 3959 сегодня - 0


Основы HTML 4.0
29-04-2009   

Всего несколько лет назад браузер Mosaic произвел сенсацию воспроизведением простых веб-страниц. Те дни давно канули в прошлое. Сегодня веб-страницы становятся все более сложными, как и применяемые для их создания технологии... подробнее

Кол. просмотров: общее - 4056 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects