easyUI文本框

来源:互联网 发布:萧山网络问政南阳 编辑:程序博客网 时间:2024/05/29 19:42


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic FileBox - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../demo.css">
 <script type="text/javascript" src="../../jquery.min.js"></script>
 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Basic FileBox</h2>
 <p>The filebox component represents a file field of the forms.</p>
 <div style="margin:20px 0;"></div>
 <div class="easyui-panel" title="Upload File" style="width:400px;padding:30px 70px 50px 70px">
  <div style="margin-bottom:20px">
   <div>Name:</div>
   <input class="easyui-textbox" style="width:100%">
  </div>
  <div style="margin-bottom:20px">
   <div>File1:</div>
   <input class="easyui-filebox" name="file1" data-options="prompt:'Choose a file...'" style="width:100%">
  </div>
  <div style="margin-bottom:20px">
   <div>File2:</div>
   <input class="easyui-filebox" name="file2" data-options="prompt:'Choose another file...'" style="width:100%">
  </div>
  <div>
   <a href="#" class="easyui-linkbutton" style="width:100%">Upload</a>
  </div>
 </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Button Align on FileBox - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../demo.css">
 <script type="text/javascript" src="../../jquery.min.js"></script>
 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Button Align on FileBox</h2>
 <p>Change the button align to the left or right of filebox.</p>
 <div style="margin:20px 0 40px 0;"></div>
 <span>Select Button Align:</span>
 <select onchange="changeAlign(this.value)">
  <option value="left">Left</option>
  <option value="right" selected>Right</option>
 </select>
 <div style="margin:20px 0;"></div>
 <input id="fb" class="easyui-filebox" style="width:400px" data-options="prompt:'Choose a file...'">
 <script type="text/javascript">
  function changeAlign(align){
   $('#fb').filebox({buttonAlign:align});
  }
 </script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Fluid FileBox - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../demo.css">
 <script type="text/javascript" src="../../jquery.min.js"></script>
 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Fluid FileBox</h2>
 <p>This example shows how to set the width of FileBox to a percentage of its parent container.</p>
 <div style="margin:20px 0;"></div>
 <p>width: 50%</p>
 <input class="easyui-filebox" style="width:50%">
 <p>width: 30%</p>
 <input class="easyui-filebox" style="width:30%">
</body>
</html>

0 0
原创粉丝点击