Hi guys,
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
if someone could help me doing this correctly ..
thanks by advance ;)
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Demo</
title
>
<
link
href
=
"styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/index.css"
rel
=
"stylesheet"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
</
head
>
<!--
Contenu des pages chargées par le paneau left
-->
<
body
>
<
div
data-role
=
"view"
id
=
"drawer-home"
data-layout
=
"drawer-layout"
data-title
=
"Inbox"
>
</
div
>
<
div
data-role
=
"view"
id
=
"drawer-starred"
data-layout
=
"drawer-layout"
data-title
=
"Starred Items"
>
</
div
>
<
div
data-role
=
"view"
id
=
"drawer-drafts"
data-layout
=
"drawer-layout"
data-title
=
"Drafts"
>
</
div
>
<!--
// Paneau Left
-->
<
div
data-role
=
"drawer"
id
=
"my-drawer"
style
=
"width: 270px"
data-views
=
"['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']"
>
<
ul
data-role
=
"listview"
data-type
=
"group"
>
<
li
>Menu
<
ul
>
<
li
><
a
href
=
"#drawer-home"
data-transition
=
"none"
>m1</
a
></
li
>
<
li
><
a
href
=
"#drawer-starred"
data-transition
=
"none"
>m2</
a
></
li
>
<
li
><
a
href
=
"#drawer-drafts"
data-transition
=
"none"
>m3</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<!--
Headers
-->
<
div
class
=
"Head"
data-role
=
"layout"
data-id
=
"drawer-layout"
>
<
header
data-role
=
"header"
>
<
div
class
=
""
data-role
=
"navbar"
>
<
a
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#my-drawer"
data-icon
=
"drawer-button"
data-align
=
"left"
></
a
>
<
span
id
=
"compagnyName"
>Demo</
span
>
<
a
data-role
=
"button"
onClick
=
"changeHead()"
data-icon
=
"drawer-button"
data-align
=
"right"
></
a
>
</
div
>
</
header
>
</
div
>
<
div
class
=
"HeadSearching"
data-role
=
"layout"
data-id
=
"drawer-layout"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#my-drawer"
data-icon
=
"drawer-button"
data-align
=
"left"
></
a
>
<
input
type
=
"text"
id
=
"city"
name
=
"city"
class
=
"k-textbox"
placeholder
=
"Ville"
data-align
=
"center"
/>
<
select
name
=
"country"
id
=
"country"
data-align
=
"right"
>
<
option
>France</
option
>
<
option
>Angleterre</
option
>
<
option
>Luxembourg</
option
>
<
option
>Espagne</
option
>
</
select
>
</
div
>
</
header
>
</
div
>
<
script
>
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
</
script
>
<
script
>
function changeHead()
{
alert('header replace');
$('.head').replaceWith('.HeadSearching');
}
</
script
>
</
body
>
</
html
>
thanks by advance ;)