2013-03-21 4 views
1

В настоящее время у меня есть 2 кнопки (входные данные) Сохранить, сохранить & Go, и мы хотим добавить третий, сэкономить & Закрыть. Из-за недвижимости, здесь нет места для третьей кнопки, поэтому идея состоит в том, чтобы объединить их в какую-то каплю.button with sub buttons

Я знаю, что css с использованием A и скрытого div, вероятно, является лучшим решением, однако, из-за того, что приложение закодировано на поверхности, в котором он находится, эти NEED должны быть ВХОДАМИ или КНОПКАми для того, чтобы back end (node.js-like derrivitive), чтобы взять его.

Есть ли способ сделать что-то вроде этого?

Просто показать

|"Save"| 

но если существуют варианты (на основе других скриптовых Params), показывают стрелку вниз, как

|"Save *down*"| 

и имеют подлодку 2 (или 1, или больше) варианты отображаются под навесом под ним:

| "and go" | "and close" | 

Критический момент состоит в том, что все 3 условия должны быть представлены (возможно, просто сохраните, не перейдя или закрывшись).

Опять же, все 3 должны быть входов типа = 'submit', поэтому я не уверен, как развернуть состояние зависания и т. Д. В этом состоянии. Обычно используют списки и подсписки с: зависаниями и намерениями.

У меня есть jquery running и в html 5 настроен, поэтому можно использовать стандартные элементы интерфейса, но задним концом становится сложнее.

Любые советы по «лучшему пути» для того, чтобы высушить это?

ответ

1

Сделать выберите выпадающий так:

<select onchange="this.form.submit()"> 
    <option value="save">Save</option> 
    <option value="save&go">Save & Go</option> 
    <option value="save&close">Save & Close</option> 
</select> 

Дайте ему 3 варианта, Сохранить, Сохранить & Go, Сохранить & Закрыть

+0

Да, это может сработать. Но это не «красиво». По причинам пользовательского интерфейса хотелось бы решить проблему с помощью кнопок. – briansol

+0

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

0

Похоже дизайн вопрос для меня. Просто нажмите кнопку «Сохранить». При его сохранении отобразите диалоговое окно с кнопками «Go» и «Close». У вас может быть «X (диалог закрыт)» в правой верхней части диалогового окна, если пользователь не хочет выбирать ни одну из кнопок «Go» и «Close».