Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery как спрятать элемент 
V
    Опции темы
blackwitcher
Дата 2.10.2017, 12:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 149
Регистрация: 11.1.2010

Репутация: нет
Всего: нет



Всем привет, суть проблемы: у меня есть поисковое поле, которое при загрузке страницы должно быть скрытым, пользователь кликает на картинке поиск --- появляется поле, где пользователь может писать, а потом кликает или нажимает enter --- поле снова исчезло
Код

"function(s,e){ $('.full-text-search .dxic, .full-text-search .dxeButton').animate({width:'toggle'},350); }";


Вот пример на С# 
Код

private void T_PreRender(object sender, EventArgs e)
        {
            var t = sender as ParametrizedActionTextBoxControl;
            t.Editor.ClientSideEvents.ButtonClick = "function(s,e){ $('.full-text-search .dxic, .full-text-search .dxeButton').animate({width:'toggle'},350); }";
            //t.Editor.ClientSideEvents.Init= "function(s,e){ $('.full-text-search .dxic, .full-text-search .dxeButton').animate({width:'toggle'},350); }";
        }


Код

.full-text-search .dxeButtonEditSys td,
.full-text-search .dxeButtonEditSys td input {
    background-color: transparent !important;
}

.dxmLite_XafTheme .dxm-tmpl .full-text-search .dxeFocused_XafTheme,
.dxmLite_XafTheme .dxm-tmpl .full-text-search .dxeButton.dxeButtonEditButtonHover_XafTheme {
    border-left: none;
    border-top: none;
    border-right: none;
}


Это сообщение отредактировал(а) blackwitcher - 2.10.2017, 12:40
PM MAIL   Вверх
whatisnot
Дата 2.10.2017, 13:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: 1
Всего: 2



Цитата(blackwitcher @  2.10.2017,  12:38 Найти цитируемый пост)
есть поисковое поле, которое при загрузке страницы должно быть скрытым


И где же само поле/кнопка управления? Чтобы было скрытым - CSS -> display: none; 
PM MAIL   Вверх
blackwitcher
Дата 2.10.2017, 15:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 149
Регистрация: 11.1.2010

Репутация: нет
Всего: нет



Цитата

И где же само поле/кнопка управления? 

Код

.dxeButton.dxeButtonEditButtonHover_XafTheme {
    border-left: none;
    border-top: none;
    border-right: none;
}


PM MAIL   Вверх
whatisnot
Дата 2.10.2017, 17:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: 1
Всего: 2



Это не html-код под который вам нужен js-код, это css стили.   
PM MAIL   Вверх
blackwitcher
Дата 3.10.2017, 16:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 149
Регистрация: 11.1.2010

Репутация: нет
Всего: нет



вопрос о CSS решено

но, есть вопрос о jquery
Код

 var clientScript = "$('.full-text-search .dxeButtonEditSys, .full-text-search .dxic').animate({width:'toggle'},350);";


нужно, чтобы пользователь мог вести данные, а то у меня поле появляется, я нажимаю кнопку для поиска --- поле исчезает и больше не появляется smile 
нужно Jquery
PM MAIL   Вверх
whatisnot
Дата 3.10.2017, 22:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: 1
Всего: 2



Вы html-код своей поисковой формы покажете в конце концов?
PM MAIL   Вверх
blackwitcher
Дата 4.10.2017, 10:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 149
Регистрация: 11.1.2010

Репутация: нет
Всего: нет



Код

<table class="dxeButtonEditSys dxeButtonEdit_XafTheme dxeNullText_XafTheme dxh0" id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed" style="width:250px;" savedspellcheck="[object Object]" spellcheck="false"><tbody><tr><td class="dxic" style="width: 100%; white-space: normal; display: table-cell;"><input class="dxeEditArea_XafTheme dxeEditAreaSys dxh0" id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_I" name="Vertical$SearchAC$Menu$ITCNT0$xaf_a2$Ed" onfocus="ASPx.EGotFocus('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')" onblur="ASPx.ELostFocus('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')" onchange="ASPx.EValueChanged('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')" value="Поисковый запрос..." type="text" autocomplete="off" savedspellcheck="[object Object]" spellcheck="false"></td><td id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_B0" class="dxeButton dxeButtonEditButton_XafTheme actButtons" onclick="ASPx.BEClick('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed',0)" style="background-color: white; background-image: none; border-style: none;"><img id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_B0Img" src="DXX.axd?handlerName=ImageResource&amp;name=Action_ParametrizedAction_Clear_12x12&amp;enbl=True&amp;fldr=TemplatesV2Images&amp;v=2404347a92d01aced8eb60d35d9dc9a9" alt="..." style="height:13px;width:13px;"></td><td id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_B1" title="Фильтровать записи по тексту" class="dxeButton dxeButtonEditButton_XafTheme actButtons" onclick="ASPx.BEClick('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed',1)" style="display: none;"><img id="Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_B1Img" src="DXX.axd?handlerName=ImageResource&amp;name=Action_Search&amp;enbl=True&amp;fldr=TemplatesV2Images&amp;v=" alt="..." style="height:24px;width:24px;"></td></tr></tbody></table>


Код

.full-text-search .dxeButtonEditSys {
    width: auto !important;
    border-bottom: none;
}
.full-text-search .dxic {
    display: none;
}


пользователь кликает на картинке поиск --- появляется поле, где пользователь может писать, а потом кликает или нажимает enter --- поле снова исчезло

Код

private void Item_ControlInitialized(object sender, DevExpress.ExpressApp.Web.TestScripts.ControlInitializedEventArgs e)
        {
            var clientScript = "$('.full-text-search .dxic, .full-text-search .dxeButton').animate({width:'toggle'},350);";
            var t = e.Control as ParametrizedActionTextBoxControl;
            t.PreRender += T_PreRender;
        }


        private void T_PreRender(object sender, EventArgs e)
        {
            var t = sender as ParametrizedActionTextBoxControl;
            t.Editor.ClientSideEvents.ButtonClick = "function(s,e){ $('.full-text-search .dxic, .full-text-search .dxeButton').animate({width:'toggle'},350); }";
        }



PM MAIL   Вверх
whatisnot
Дата 5.10.2017, 14:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: 1
Всего: 2



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

Код

.dxeEditArea_XafTheme {
    float: right;
    width: 0;
    border: 0;
    transition: all .5s;
}

.animate {
    width: 100%;
    transition: all .5s;
}

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}


Последние касаются поведения атрибута placeholder, в который и следует писать "Поисковый запрос...", а не в value.

Два первых задают стили поля ввода и CSS анимацию для него. Если CSS анимация не подходит, можно и на JS определить.

Код

$(function() {
    var btn = $('#Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_B0').click(function() {
        $('#Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed_I').toggleClass('animate')
                                                       .keydown(function(e) {
                                                            if(e.keyCode==13) btn.trigger('click') 
                                                       })   
    });
})


Вот этого savedspellcheck="[object Object]" в элементах быть не должно, а это

onfocus="ASPx.EGotFocus('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')" 
onblur="ASPx.ELostFocus('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')" 
onchange="ASPx.EValueChanged('Vertical_SearchAC_Menu_ITCNT0_xaf_a2_Ed')"

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

PS. И выставляя код, форматируйте его так, чтобы он не создавал горизонтальной портянки требующей прокрутки. Если поле ввода не само по себе, а часть формы и ее отправка естественным способом происходит, то прятать поле ввода по Enter все таки излишне.
 
 

Это сообщение отредактировал(а) whatisnot - 5.10.2017, 14:29
PM MAIL   Вверх
blackwitcher
Дата 5.10.2017, 15:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 149
Регистрация: 11.1.2010

Репутация: нет
Всего: нет



Большое спасибо, whatisnot
 smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.1297 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.