Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery как спрятать элемент

Автор: blackwitcher 2.10.2017, 12:38

Всем привет, суть проблемы: у меня есть поисковое поле, которое при загрузке страницы должно быть скрытым, пользователь кликает на картинке поиск --- появляется поле, где пользователь может писать, а потом кликает или нажимает 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;
}

Автор: whatisnot 2.10.2017, 13:21

Цитата(blackwitcher @ 2.10.2017, 12:38

)

есть поисковое поле, которое при загрузке страницы должно быть скрытым

И где же само поле/кнопка управления? Чтобы было скрытым - CSS -> display: none;

Автор: blackwitcher 2.10.2017, 15:23

Цитата

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

Код


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

Автор: whatisnot 2.10.2017, 17:28

Это не html-код под который вам нужен js-код, это css стили.

Автор: blackwitcher 3.10.2017, 16:26

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

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

Код


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

нужно, чтобы пользователь мог вести данные, а то у меня поле появляется, я нажимаю кнопку для поиска --- поле исчезает и больше не появляется smile

нужно Jquery

Автор: whatisnot 3.10.2017, 22:14

Вы html-код своей поисковой формы покажете в конце концов?

Автор: blackwitcher 4.10.2017, 10:09

Код


<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); }";
        }

Автор: whatisnot 5.10.2017, 14:24

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

Код


.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 все таки излишне.

Автор: blackwitcher 5.10.2017, 15:09

Большое спасибо, whatisnot
smile