HTML, CSS без jQuery | Исходный код Для демонстрации примера - "Запуск демо" |
Редактор | Макет - результат демо или редактирования |
|||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Автонумерация элементов HTML при загрузке страницы Все DIV с одним классом DIV 1
DIV 2
DIV 3
Три DIV внутри одного DIV с ID DIV 4
DIV 5
DIV 6
|
||||||||||||||||||
Автонумерация строк таблицы при загрузке страницы 1.Первая ячейка всех строк пустая
2. Первая ячейка всех строк с текстом
|
||||||||||||||||||
Поиск на странице с выделением строки, содержащей ключевое слова
Главное в этом примере элемент HTML5 datalist, селектор jQuery [элемент]:contains("[текст]") и массив JavaScript.
Текст для примера находится в контейнере DIV class="prim2". Строка поиска в форме - datalist со значениями из массива JS. Массив содержит не все слова из текста. Поиск будет проводится, в том числе по словам, которых нет в массиве или по части слова. Например при вводе "черк" будут найдены строки с вхождением "черк" в слова: зачеркивание, подчеркивание. В примере представлены вместе 2 варианта поиска: 1. В тексте останутся только строки, где есть ключевое слово. 2. Эти строки будут скопированы в DIV под формой поиска. Все строки в исходном тексте разделены запятой - для split(','). Запятая выбрана как наименее употребляемый символ для этой темы текста. Очень просто реализовать 3-й вариант: В тексте останутся все строки, а те в которых есть ключевое слово будут выделены красным. Текст для поиска: перенос длинного слова - word-wrap:break-word,
межстрочный интервал - line-height:[значение, напр. 1.5;], с красной строки (отступ слева) - text-indent:[значение],
зачеркивание - text-decoration:line-through, подчеркивание - text-decoration:underline,
линия над текстом - text-decoration:overline, подстрочный текст - <sub></sub>,
надстрочный текст - <sup></sup>, |
1 |
2 |
3 |
Поделиться: