Web-интерфейс

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем AnaStas, 29 мар 2011.

  1. AnaStas

    AnaStas Well-Known Member

    Регистрация:
    16 сен 2008
    Сообщения:
    52
    Симпатии:
    0
    Добрый день. Прошу проконсультировать.
    Задание: На одну из HTML страничек отдельского сайта нужно закодировать визитки(карточки) на каждого сотрудника отдела. По клику мышкой на фамилии сотрудника карточка всплывает
    Использую: Ну, для описания карточки стандарт vcard HTML. А для обработки события использую готовый CSS пакет highslide.
    Проблема: Все работает. Но, главному не нравится следующее:
    1. Если карточку сдвинуть по экрану мышкой, она запоминает свою последнюю позицию и при новом событии она открывается не на строчке с фамилией, а в том месте где ее закрыли. Этого я никак не могу избежать.
    2. Совсем не желательно мышкой растягивать рамку. Тоже не могу зафиксировать.
    Что посоветуют модераторы?
     
  2. vital

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.469
    Симпатии:
    27
    почитать справку по хайслайду. Все это наветрняка настраивается.

    Еще изменение размера можно запретить установив max-width,max-height в CSS в соотв-м классе.
     
  3. AnaStas

    AnaStas Well-Known Member

    Регистрация:
    16 сен 2008
    Сообщения:
    52
    Симпатии:
    0
    Возвращаюсь к данной теме только для того, чтобы она имела завершенный вид (т.е. приемлемое по данному вопросу решение) и тему можно считать закрытой.
    Используя справочник по пакету highslide. http://highslide.com/ref/ , код для данной темы был создан таки:

    Код (Text):
    <html>
    <title>Структура отела</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    . . . . .
    <link rel="stylesheet" type="text/css" href="highslide/highslide.css">
    <script type="text/javascript" src="highslide/highslide-with-html.js"></script>
    </head>

    <body>
    <script type="text/javascript">
    <!--
    hs.showCredits = false;

    function toggle(div,show,displ) {
    var ele = document.getElementById(div);
    var text = document.getElementById(displ);
    if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = show;
    }
    else {
    ele.style.display = "block";
    text.innerHTML = show;
    }
    }
    -->
    </script>

    <h1><img src="/img/oxygen/48x48/mimetypes/document.png"> Структура отдела</h1>
    <h3>Подразделение № 100</h3>
    <!—и далее на каждого сотрудника блок div class="textwrapper 
    <div class="textwrapper">
    Начальник установки -
    <span class="highslide" style="cursor:pointer;"
    onClick="return hs.htmlExpand(this,{contentId:'card110',outlineType:'rounded-white'})">
    Сидоров П.И.
    </span>
    <div class="highslide-html-content" id="card110">
    <div class="highslide-header"><a href="#" onclick="return hs.close(this);">Сидоров Петр Иванович</a></div>
    <div class="highslide-body">
    <div class="vcard"><table ><tr><td>
    <div class="photo"><img src="/img/oxygen/128x128/actions/user.png" height="128" width="128" style="cursor:pointer;" onclick="return hs.close(this);"></div>
    </td><td>
    <div style="cursor:pointer" onclick="return hs.close(this);">
    <div class="fn" style="display:none;">Сидоров Петр Иванович</div>
    <div class="title"></div>
    <div class="rol">Начальник установки </div>
    <div>Телефон:<span class="tel">495-222-...</span></div>
    <div>Факс:<span class="tel">495-223-...</span></div>
    <div>Мобильный:<span class="tel"></span></div>
    </div>
    <div>E-mail:<a href="mailto:pisidor@domain.ru" class="email">pisidor@domain.ru</a></div>
    </td></tr></table></div>
    </div>
    </div>
    </div>
    P.S.
    Мы с главным, все-таки, отказались от такого решения (т.е. использовать highslide). Основное назначение этого пакета - оформление Web-галлереи. Если визитка должна иметь простой, без изысков, стиль, то проще все сделать в HTML и несложным небольшим кодом в CSS
     
Загрузка...

Поделиться этой страницей