<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/metro/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"demo.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/icon.css"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.min.js"
>
</
script
>
</
head
>
<
body
>
<
h2
>jQuery EasyUI basic filebox feature</
h2
>
<
p
>Change the 'choose file' alignment to the left or right.</
p
>
<
span
>Select alignment:</
span
>
<
select
onchange
=
"selectAlign(this.value)"
>
<
option
value
=
"left"
selected>Left</
option
>
<
option
value
=
"right"
>Right</
option
>
</
select
>
<
div
style
=
"margin:20px 0;"
></
div
>
<
div
class
=
"easyui-panel"
style
=
"width:100%;max-width:400px;padding:30px 60px;"
>
<
div
style
=
"margin-bottom:20px"
>
<
input
class
=
"easyui-filebox"
labelPosition
=
"top"
style
=
"width:100%"
data-options
=
"prompt:'Choose file1...'"
>
</
div
>
<
div
style
=
"margin-bottom:20px"
>
<
input
class
=
"easyui-filebox"
labelPosition
=
"top"
style
=
"width:80%"
data-options
=
"prompt:'Choose file2...'"
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
function selectAlign(align)
{
$('.easyui-filebox').filebox({buttonAlign:align});
}
</
script
>
</
body
>
</
html
>