Tooth Chart Кнопки переключения для многостраничной формы? - PullRequest
Новая
       15

Tooth Chart Кнопки переключения для многостраничной формы?

3 голосов
/ 30 июля 2011

Привет всем и спасибо заранее, что нашли время, чтобы проверить этот пост.Я искал учебник, чтобы помочь мне решить эту проблему, но безрезультатно.Я надеюсь, что где-то здесь, возможно, будет достаточно любезно, чтобы предложить мне какое-то руководство?

По сути, мой клиент хотел бы иметь многостраничную форму, в которой пользователи могут выбирать отдельные зубы из зубной карты, как показано на изображениях, которые ясвязано с ниже.На первом изображении показана зубная карта без выбранных зубов, а на втором изображена та же диаграмма с выбранными случайными зубами:

Стоматологическая карта без выбора

Стоматологическая карта с выборками

После того, как пользователь выбрал отдельные зубы, соответствующие данные должны появиться в сводной форме представления многостраничной формы, которую мой клиент получает по электронной почте, следующим образом:

«Имплантация зубной карты: 3, 8, 9, 16, 19, 27, 31» для каждого выбранного зуба.Пользователи также должны иметь возможность сбросить свой выбор с помощью кнопки «Сброс», если они хотят начать все сначала.

Просто хотите знать, что вы, ребята, могли бы предложить, как лучший способ добиться этого?Сайт моего клиента - Joomla!сайт, чтобы вы знали, с чем я работаю.:)

Еще раз спасибо за любую помощь!

Лучший,

Шейн

1 Ответ

0 голосов
/ 30 июля 2011

хорошо. Это будет * зуд, или я так чувствую. Ничто не приходит на ум, кроме вырезания каждого отдельного зуба как отдельного .png , а затем абсолютно точного позиционирования каждого изображения зуба внутри div таким образом, что воссоздает ваш пример с номером зуба, являющимся атрибутом изображения alt для пример.

Вам также придется создать розовую версию для всех этих вырезанных изображений.

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

jQuery, пример 

$('.tooth').click(
    if($(this).hasClass('active')){
        $(this).removeClass('active').attr('src','whiteVersion.png');
    } else {
        $(this).addClass('active').attr('src','pinkVersion.png');
    }

)

После этого вы можете просмотреть эти отдельные изображения и сгенерировать эту строку: 3, 8, 9, 16, 19, 27, 31

снова - пример jQuery 

var selected = '';
$('.tooth').each(function(){
    if($(this).hasClass('active')){
        if(selected === ''){
            selected = $(this).attr('alt');
        } else{
            selected += ', ' + $(this).attr('alt');
        }
    }
})

* Проще: * будет иметь изображение большого зуба с номерами для каждого зуба. Затем пользователь может набрать их номера в себе.

...