Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Прогресс-бар в помощь выбору значений в поле ввода
краткое содержание

Прогресс-бар в помощь выбору значений в поле ввода

Приведён скрипт внесения изменений в группу полей ввода с помощью группы прогресс-баров. Выполнена подсветка линеек по наведению мыши. ... Сайт - на новом адресе. ... Резиновая вёрстка кнопок и окон.
Существует дней: 761
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
20.05.08

Оставить комментарии к статье.

Сайт - на адресе http://js2.ru

 Веб-студия из Петербурга Exclusive Design обеспечила сайт доменным адресом и хостингом.

Выразим благодарность студии Exclusive Design за спонсирование хостинга сайта по Javascript. Её адрес вы теперь можете постоянно видеть в верхнем правом углу сайта.

Также хочу выразить благодарность всем, кто сообщил о готовности помочь с хостингом (было 4 предложения). В частности, было предложение с вариантом jino.net и от Артура Писакова из Израиля (сайт по продвижению сайтов).

Скрипт установки значений в группе полей через прогресс-бары

 Если надо установить несколько численных значений в группе полей и при этом удовлетворить условиям (например, чтобы сумма значений не превышала заданного), то быстрее и удобнее для пользователя делать это через линейку прогресс-баров. На примере показан процесс построения линеек.

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

<style>
 .barElem{
  width:7px;
  height:10px;
  border:1px solid #99f; /*sinij*/
  background-color:transparent;
}
 .barBar,
 .barBar span:hover
{
  background-color:#f66; /*krasnyj*/
}
 .barBar .charOver{
  background-color:#669; /*sinij*/
}

 .barBar span img:hover,
 .barBar .charLower{
  background-color:#6b6; /*zelen*/
}
 .barBar .charUpper{
  background-color:#fb6; /*orang*/
}
</style>
<script>
d=document;
function g(X){return document.getElementById(X);}
EO=d.all;
chara=[
  ["p1","Поле 1","3"],
  ["p2","Поле 2","10"],
  ["p3","Поле 3","5"],
  ["p4","Поле 4","2"],
  ["p5","Поле 5","6"],
  ["p6","Поле 6","1"],
];
charaMax=10;
charaBonus=36;
genBar=function(){
for(j=0;j<chara.length;j++){
  charaBonus-=chara[j][2];
  d.write('<tr><th nowrap="nowrap">'+chara[j][1]
    +':</th><td><input id="'+chara[j][0]+'Id" name="'
    +chara[j][0]+'" readonly="1" value="'+chara[j][2]
    +'" class="enter_pole" style="width:43px;height:'
    +'19px;text-align:center;"/></td><td>');
  d.write('<span class="barBar">');
  for(i=0;i<charaMax;i++){
    d.write('<span'+(i==chara[j][2]?' class="charOver"'
      :'')+'><img class="barElem" bgcolor="red" id="bar'
      +j+'_'+i+'" src="1x1.gif" />');
  }
  for(i=0;i<=charaMax;i++)d.write('</span>');
  d.write('</td></tr>')
}}
charaChg=function(ev){
  ev=ev||event;
  var t=EO?ev.srcElement:ev.target;
  if(t.className!="barElem")return;
  var charaN=parseInt(t.id.replace(/\D*/,""));
  var curValue = parseInt(chara[charaN][2]);
  if(ev.type=="mouseout"){
    if(t.parentNode.childNodes[1])
      t.parentNode.childNodes[1].className="";
    if(curValue<charaMax)  g('bar'+charaN+'_'+curValue)
      .parentNode.className="charOver";
  return;}
  var selValue = parseInt(t.id.replace(/\D*\d_/,""))+1;
  if(ev.type=="click"){
    if(selValue==curValue)return;
    g('left').innerHTML=charaBonus
      -Math.min(selValue-curValue,charaBonus);
    if(curValue<charaMax)g('bar'+charaN+'_'
      +curValue).parentNode.className="";
    if(t.parentNode.childNodes[1])
      t.parentNode.childNodes[1].className="charOver";
    g(chara[charaN][0]+'Id').value=chara[charaN][2]
      =curValue+=Math.min(selValue-curValue,charaBonus);
    charaBonus=g('left').innerHTML;
  return;}
  if(selValue < curValue)
    t.parentNode.childNodes[1].className="charLower";
  if(selValue > curValue){
    if(curValue < charaMax)  g('bar'+charaN+'_'
      +curValue).parentNode.className="charUpper";
    if(t.parentNode.childNodes[1])
      t.parentNode.childNodes[1].className="charOver";
  }
}
onload=function(ev){
  g("charChange").onmouseover=g("charChange").onmouseout
    =g("charChange").onclick=charaChg;
}
</script>
<table border="1" id="charChange" width="320">
  <tr>
    <th colspan="5">Значения</th>
  </tr>
      <script>genBar(1);</script>
  <tr>
    <td colspan="5" class="osn_text">Осталось
      распределить значений: <b id="left">
        <script>d.write(charaBonus);</script></b></td>
  </tr>
</table>

Приведённый код будет работать по copy-paste, только в каталог со скриптом надо добавить однопиксельный прозрачный рисунок 1x1.gif .

В скрипте обеспечена подсветка выбираемых значений. Прогресс-бар имеет вложенную структуру span-тегов, благодаря которой несколько упрощаются операции подсветки групп соседних полей. Процесс работы при этом становится менее очевидным, но попробуем пояснить в 2 словах. Прогресс-бар представляет собой стопку прозрачных слоёв. Классами charUpper, charOver, charLower она может оцвечиваться. Скрипт делает оцвечивание 2 актуальных слоёв - подложки и текущего выбранного по движению мыши или по клику. В исходном состоянии подложка (t.parentNode.childNodes[1]) подсвечена красным, а текущий выбранный слой - синим. При наведении мыши слой подсвечивается зелёным (className="charLower"), если он ниже текущего, и синим (className="charOver"), если выше. Но если выше, ещё и текущий слой меняет цвет на оранжевый: className="charUpper". При отведении мыши нужные слои становятся снова без классов, прозрачными (className="") или приобретают прежний цвет.

Увидеть скрипт в действии можно на странице со статьёй: http://js2.ru/subs/2008/05/blog-post.shtml

Уголок
вёрстки.

По написанию скриптов на страницах HTML нужна некоторая изобретательность, сложенная со знанием языка, но то же самое нужно и для применения HTML+CSS. И только там, где автоматическое поведение браузеров не помогает, появляются элементы вёрстки с применением JavaScript. Покажем решение типично встречающейся проблемы написания кода резиновой кнопки или рамки с рисованными краями, где не требуется JS.

Применение резиновых кнопок и рамок выгодно там, где их имеется на странице несколько штук, даже фиксированного размера, но за счёт повторения одинаковых рисунков в коде значительно экономится траффик, и облагораживается процесс появления рисунков на странице - кнопки возникают сразу, а не по очереди. (Некешированием особенно страдают рисунки в форумах при просмотре в IE, где страницы не кешируются по необходимости.)

В самом простом случае кнопка фиксированного размера - это рисунок или подложка (background-image:url(урл)). Рисунок (тег img), правда, можно менять по масштабу, но качество прорисовки падает. Если нужен резиновый дизайн кнопки или рамки с рисованными краями, то появляется решение в таблице из 9 ячеек. Такие таблицы может создавать программа ImageReady (часть Фотошопа) и подобные. Рисунок разрезается, и растягиваемые края рамки должны содержать одномерные рисунки, чтобы они могли лежать в фоне и не менять вид границ при растягивании таблицы. Сразу надо заметить, что это не выгодное решение - 9 рисунков вместо одного. Применение методов построения CSS позволит уменьшить количество рисунков до 4, 3, 2 и даже до одного. В последнем случае, несмотря на усложнение кода, восстанавливаются прежние плюсы фиксированных рисунков - кнопка или рамка появляется сразу после загрузки одного рисунка, не видно постепенного прорисовывания частей картинки, с чем приходилось бы бороться методами JS.
(Продолжение в следующем выпуске.).

Уровень: для разработчиков
 js2.ru , © I.Svetlov, 2005-2008 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
11. Анимация падающего снега в окне браузера.
10. Инструменты Web 2.0 - приложения, работающие через браузер.
9. Многуровневое меню с навигацией по наведению мыши.
8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

Форум сайта рассылки, почта автора рассылки.

 
В избранное