<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"chrome=1"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
,
user-scalable
=
no
">
<
script
src
=
"demo/libs/jquery.min.js"
>
</
script
>
<
script
src
=
"demo/libs/bootstrap.min.js"
>
</
script
>
<
link
rel
=
"stylesheet"
href
=
"demo/libs/bootstrap.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"demo/libs/bootstrap-theme.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"demo/demo.min.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap-fullscreen-select.css"
>
<
script
type
=
"text/javascript"
src
=
"js/bootstrap-fullscreen-select.js"
>
</
script
>
<
style
type
=
"text/css"
>
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0 auto;
}
#containerID {
width: 300px;
}
#clickDivID {
width: 300px;
height: 100px;
color: white;
background-color: green;
}
</
style
>
</
head
>
<
body
>
<
b
>
Fullscreen Select Feature
with event triggers
</
b
>
<
div
id
=
"containerID"
>
<
select
class
=
"form-control mobileSelect"
data-triggerOn
=
"#clickDivID"
>
<
option
value
=
"samsung"
>Samsung</
option
>
<
option
value
=
"sony"
>Sony</
option
>
<
option
value
=
"oneplus"
>OnePlus</
option
>
<
option
value
=
"nokia"
>Nokia</
option
>
</
select
>
<
div
id
=
"clickDivID"
>
<
b
>On click of this div, the
dropdown is activated.
</
b
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(function () {
$('.mobileSelect').mobileSelect({
title: 'Select any option',
buttonClear: 'Clear',
onClose: function () {
alert('On Close event: '
+ $(this).val());
},
onOpen: function () {
alert('On Open event: '
+ this.val());
}
});
});
</
script
>
<
script
type
=
"text/javascript"
src
=
"demo/demo.min.js"
>
</
script
>
</
body
>
</
html
>