Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2017, 12:53
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Не прямоугольная поисковая форма
Доброго времени суток, форумчане, подскажите пожалуйста как сделать форму поиска не прямоугольной формы, сделал форму, не пойму теперь как на ней разместить элементы https://jsfiddle.net/xwLex43a/1/

Последний раз редактировалось AlexTrader, 19.01.2017 в 12:55.
Ответить с цитированием
  #2 (permalink)  
Старый 19.01.2017, 13:03
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Нужно что то подобное:
Ответить с цитированием
  #3 (permalink)  
Старый 19.01.2017, 13:04
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

https://cloud.mail.ru/public/LRzX/TeKEChzHM
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2017, 13:06
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Модератор, как здесь картинки вставлять?
Ответить с цитированием
  #5 (permalink)  
Старый 19.01.2017, 13:10
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

До нажатия на расширенный поиск:https://cloud.mail.ru/public/2Qij/4BDWXNRqo
После нажатия на расширенный поиск:
https://cloud.mail.ru/public/EcYJ/zB8Srqi1T
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2017, 13:12
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Метод который открывает или закрывает расширенный поиск:
$(function () {
            $('#ExtSearch').click(function () {
                $('#searchFormFilters').slideToggle();
                if ($('#ExtSearchOpen').is(':visible')) {
                    $('#ExtSearchOpen').hide();
                    $('#ExtSearchClose').show();
                }
                else {
                    $('#ExtSearchOpen').show();
                    $('#ExtSearchClose').hide();
                }
            });
        });
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2017, 13:14
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Т.е. мне нужно просто расположить ссылку "Расширенный поиск" на нижнем выступающем "корешке" формы, как это сделать?
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2017, 13:20
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Вот код формы:
<form id="SearchForm" style="width: 99.3%;">
        <div style="background-color: #f5f5f5;" class="k-block">
            <div style="margin-left: 10px;margin-top: 10px;margin-bottom: 10px;">
                <div>
                    <input type="text" id="client" class="k-textbox" autocomplete="off" data-field="client-input" style="height: 33px;" placeholder="Введите ФИО или номер клиента..." />
                    <input type="text" id="userId" name="userId" value="@(UserAccessor.GetInternalIdentity()?.Id != null ? UserAccessor.GetInternalIdentity()?.Id : 0)" style="display: none;" />
                              <button id="SearchForm-reset" type="reset" title="Очистить форму"><span class="k-icon k-i-close"></span></button>
                        </div>
                       
                        <div id="searchFormFilters" style="display: none">
                            <div class="drop">
                                <label for="executor">Принял:</label>
                                <input type="text" id="executor" data-role="dropdownlist" data-option-label="Выберите специалиста..."
                                       data-value-field="id"
                                       data-text-field="title"
                                       data-bind="value: SelectedExecutorId,
                                           source: executor,
                                           enabled: executor.enabled"
                                       name="executor"
                                       style="width:300px" />
                            </div>
                            <div class="drop">
                                <label for="recommender">Рекомендовал:</label>
                                <input type="text" id="recommender" data-role="dropdownlist" data-option-label="Выберите специалиста..."
                                       data-value-field="id"
                                       data-text-field="title"
                                       data-bind="value: SelectedRecommenderId,
                                           source: recommender,
                                           enabled: recommender.enabled"
                                       name="recommender"
                                       style="width:300px" />
                            </div>
                            <div class="drop">
                                <label for="StartDate">С:</label>
                                <input name="StartDate" data-role="datepicker" id="StartDate" placeholder="Выберите дату..."
                                       style="width:100%;"
                                       data-bind="value: StartDate" />
                            </div>
                            <div class="drop">
                                <label for="EndDate">До:</label>
                                <input name="EndDate" data-role="datepicker" id="EndDate" placeholder="Выберите дату..."
                                       style="width:100%;"
                                       data-bind="value: EndDate" />
                            </div>
                        </div>
                       </div>
                    <div id="ExtSearch" class="expand-button-content" style="width:150px;margin-left: 10px;">
                        <a id="ExtSearchOpen" href="javascript:void(0)" style="">Расширенный поиск</a>
                        <a id="ExtSearchClose" href="javascript:void(0)" style="display:none;">Скрыть поля поиска</a>
                    </div>
                </div>
    </form>
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2017, 14:07
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

Сделал так: https://jsfiddle.net/0yhx0knq/
но почему то текст не влазиет в Div
Ответить с цитированием
  #10 (permalink)  
Старый 19.01.2017, 14:20
Кандидат Javascript-наук
Отправить личное сообщение для AlexTrader Посмотреть профиль Найти все сообщения от AlexTrader
 
Регистрация: 23.12.2016
Сообщений: 121

следующий вариант https://jsfiddle.net/0yhx0knq/2/ из трёх элементов
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Огромная форма serj0110 Элементы интерфейса 21 19.01.2017 11:51
Форма отправки сообщения с сайта hardwolf Элементы интерфейса 17 24.10.2016 15:00
Не работает всплывающая форма на второстепенных страницах denjer Javascript под браузер 0 22.04.2016 21:30
откуда была отправлена форма ? avanesov89 Общие вопросы Javascript 3 16.04.2014 17:50
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 22:55