jQWidgets Input and Button Test

by _stephan_

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

#borderBox * {
    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}
#content1 input {
  cursor: not-allowed;
}
input[disabled] {
  cursor: not-allowed;
}
#content2 input, #content2 button {
    border: 1px solid;
    height: 26px;
    vertical-align: middle;
}
body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var thePanel = $('<div id="myPanel">My jqxPanel</div>');
$('#myApp').append(thePanel);

var content1 = $('<div id="content1"></div>');
content1.append('<div>box-sizing normal: <input disabled="disabled" /><button>Test</button></div>');
content1.append('<div id="borderBox">box-sizing border-box: <input /><button>Test</button></div>');
var content2 = $('<div id="content2"></div>');
content2.append('<div>Pure non-jQWidgets HTML controls:</div>');
content2.append('<div>box-sizing normal: <input /><button>Test</button></div>');
content2.append('<div id="borderBox">box-sizing border-box: <input /><button>Test</button></div>');
thePanel.append(content1, content2);

/*thePanel.jqxPanel({
    width: '100%',
    height: '100%',
    autoUpdate: true,
});*/

/*$('#content1 input').jqxInput({
    width: 100,
    height: 26
});*/

/*$('#content1 button').jqxButton({
    width: 100,
    height: 26
});*/