oracle输入替代变量
As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life project. The main reason is inconsistent implementation by different browsers.
如您所知，HTML5引入了几种新的输入类型：数字，日期，颜色，范围等。问题是：您是否应该开始使用这些控件？ 我想说“是”，但我认为他们还没有为任何现实生活项目做好准备。 主要原因是不同浏览器的实现不一致。
In the form below you can see some of the HTML5 input types. Depending on your browser you might or might not see any difference from a regular input control.
在下面的表格中，您可以看到一些HTML5输入类型。 根据您的浏览器，您可能看不到与常规输入控件的任何区别。
What, then, should you use? You can develop your own input types, or use an existing library. Everyone is probably familiar with jQuery date picker or other jQuery plug-ins that come to rescue. However, I have not yet found a comprehensive library that would suit all my input needs, so I decided to put together my own that would be small, consistent and would cover following areas:
那你该用什么呢？ 您可以开发自己的输入类型，也可以使用现有的库。 每个人都可能熟悉jQuery日期选择器或其他可抢救的jQuery插件。 但是，我还没有找到一个可以满足我所有输入需求的综合库，因此我决定将自己的库整合在一起，该库很小，一致，并且涵盖以下领域：
I've worked on these controls over the course of past several years as part of a large library called W2UI. However, I've realized that a stand-alone library with just input controls might be quite useful.
在过去的几年中，我作为一个名为W2UI的大型库的一部分研究了这些控件。 但是，我已经意识到只有输入控件的独立库可能会非常有用。
数值输入 (Numeric Inputs)
Numeric inputs will only allow you to type numbers. They will completely ignore all other characters. Full keyboard support is implemented. Try using up/down arrow keys, control + up/down (command + up/down on mac) to increase numbers. When the number is changed it will be validated and formatted (if needed).
数字输入将仅允许您键入数字。 他们将完全忽略所有其他字符。 实现了全键盘支持。 尝试使用向上 / 向下箭头键， 控制 + 向上 / 向下 ( 命令 + 上 / 下 MAC)，以增加数字。 更改数字后，将对其进行验证和格式化(如果需要)。
HTML设置 (HTML Setup)
<!-- General inputs -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="w2int"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="w2float"></div>
<div class="w2ui-label"> Hex: </div>
<div class="w2ui-field"> <input id="w2hex"></div>
<div class="w2ui-label"> Color: </div>
<div class="w2ui-field"> <input id="w2color"></div>
<!-- US format -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="us-int" value="0"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="us-float" value="0"> </div>
<div class="w2ui-label"> Money: </div>
<div class="w2ui-field"> <input id="us-money" value="0"> </div>
<div class="w2ui-label"> Percent: </div>
<div class="w2ui-field"> <input id="us-percent" value="0"> </div>
<!-- EU common format -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="eu-int" value="0"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="eu-float" value="0"> </div>
<div class="w2ui-label"> Money: </div>
<div class="w2ui-field"> <input id="eu-money" value="0"> </div>
<div class="w2ui-label"> Percent: </div>
<div class="w2ui-field"> <input id="eu-percent" value="0"> </div>
创建交互式字段 (Creating the Interactive Fields)
// General
$('#w2int').w2field('int', { autoFormat: false });
$('#w2float').w2field('float', { autoFormat: false });
$('#w2hex').w2field('hex');
$('#w2color').w2field('color');
// US Format
$('#us-int').w2field('int', { autoFormat: true });
$('#us-float').w2field('float', { precision: 3 });
$('#us-money').w2field('money', { moneySymbol: '$' });
$('#us-percent').w2field('percent', { precision: 1, min: 0, max: 100 });
// EU Common Format
$('#eu-int').w2field('int', { autoFormat: true, groupSymbol: ' ' });
$('#eu-float').w2field('float', { groupSymbol: ' ', precision: 3 });
$('#eu-money').w2field('money', { groupSymbol: ' ', currencyPrefix: '', currencySuffix: '€' });
$('#eu-percent').w2field('percent', { precision: 1, min: 0, max: 100 });
Second argument is a list of options, that include the following:
第二个参数是选项列表，其中包括：
options = {
min : null,
max : null,
placeholder : '',
autoFormat : true,
currencyPrefix : '$',
currencySuffix : '',
groupSymbol : ',',
arrows : false,
keyboard : true,
precision : null,
silent : true,
prefix : '',
suffix : ''
}
日期和时间 (Date and Time)
For DATE and TIME types you can use keyboard to increment by a day (or a minute) if you click up/down arrow keys. You can also use ctr + up/down (command + up/down on mac) to increment by a month (or an hour).
对于DATE和TIME类型，如果您单击向上 / 向下箭头键，则可以使用键盘增加一天(或一分钟)的时间 。 您还可以使用ctr + 向上 / 向下 (在Mac上为Command + 向上 / 向下 )来增加一个月(或一个小时)。
HTML设置 (HTML Setup)
<!-- US format -->
<div class="w2ui-label"> Date: </div>
<div class="w2ui-field"> <input type="us-date"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-dateA"> <span class="legend">(from 10th to 20th of current month)</span></div>
<div class="w2ui-label"> Blocked Days: </div>
<div class="w2ui-field"> <input type="us-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span></div>
<div class="w2ui-label"> Date Range: </div>
<div class="w2ui-field"> <input type="us-date1"> - <input type="us-date2"> </div>
<div class="w2ui-label"> Time: </div>
<div class="w2ui-field"> <input type="us-time"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span></div>
<!-- EU common format -->
<div class="w2ui-label"> Date: </div>
<div class="w2ui-field"> <input type="eu-date"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="eu-dateA"> <span class="legend">(from 10th to 20th of current month)</span></div>
<div class="w2ui-label"> Blocked Days: </div>
<div class="w2ui-field"> <input type="eu-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span></div>
<div class="w2ui-label"> Date Range: </div>
<div class="w2ui-field"> <input type="eu-date1"> - <input type="eu-date2"> </div>
<div class="w2ui-label"> Time: </div>
<div class="w2ui-field"> <input type="eu-time"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="eu-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span></div>
<div style="height: 20px; clear: both"></div>
创建交互式字段 (Creating the Interactive Fields)
var month = (new Date()).getMonth() + 1;
var year = (new Date()).getFullYear();
// US Format
$('input[type=us-date]').w2field('date');
$('input[type=us-dateA]').w2field('date', { format: 'm/d/yyyy', start: month + '/5/' + year, end: month + '/25/' + year });
$('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/2014',month+'/13/2014',month+'/14/' + year,]});
$('input[type=us-date1]').w2field('date', { format: 'm/d/yyyy', end: $('input[type=us-date2]') });
$('input[type=us-date2]').w2field('date', { format: 'm/d/yyyy', start: $('input[type=us-date1]') });
$('input[type=us-time]').w2field('time', { format: 'h12' });
$('input[type=us-timeA]').w2field('time', { format: 'h12', start: '8:00 am', end: '4:30 pm' });
// EU Common Format
$('input[type=eu-date]').w2field('date', { format: 'd.m.yyyy' });
$('input[type=eu-dateA]').w2field('date', { format: 'd.m.yyyy', start: '5.' + month + '.' + year, end: '25.' + month + '.' + year });
$('input[type=eu-dateB]').w2field('date', { format: 'd.m.yyyy', blocked: ['12.' + month + '.' + year, '13.' + month + '.' + year, '14.' + month + '.' + year]});
$('input[type=eu-date1]').w2field('date', { format: 'd.m.yyyy', end: $('input[type=eu-date2]') });
$('input[type=eu-date2]').w2field('date', { format: 'd.m.yyyy', start: $('input[type=eu-date1]') });
$('input[type=eu-time]').w2field('time', { format: 'h24' });
$('input[type=eu-timeA]').w2field('time', { format: 'h24', start: '8:00 am', end: '4:30 pm' });
日期选项 (Options for Date)
options = {
format : 'm/d/yyyy', // date format
placeholder : '',
keyboard : true,
silent : true,
start : '', // string or jquery object
end : '', // string or jquery object
blocked : {}, // { '4/11/2011': 'yes' }
colored : {} // { '4/11/2011': 'red:white' }
};
时间选项 (Options for Time)
options = {
format : 'hh:mi pm',
placeholder : '',
keyboard : true,
silent : true,
start : '',
end : ''
};
下拉列表 (Drop Down Lists)
Regular <select> input is nice, but quite limited. For example, it is hard to use this control on a large set of options. To provide a solution, I have implemented drop down list based on a text input filed but with a dynamic list of options that get filtered as you type.
常规的<select>输入是不错的，但是非常有限。 例如，很难在大量选项上使用此控件。 为了提供解决方案，我已经基于文本输入字段实现了下拉列表，但是具有动态的选项列表，这些列表在您键入时会被过滤。
HTML设置 (HTML Setup)
<div class="w2ui-label"> List: </div>
<div class="w2ui-field"> <input type="list"> <span class="legend">Cannot type any text, but only items from the list</span> </div>
<div class="w2ui-label"> Combo: </div>
<div class="w2ui-field"> <input type="combo"> <span class="legend">You can type any text</span> </div>
Full keyboard support is implemented and it comes with lots of configuration parameters: pulling list of options dynamically from a URL, custom render functions, events, etc.
全面的键盘支持已实现，并带有许多配置参数：从URL动态提取选项列表，自定义呈现功能，事件等。
创建交互式字段 (Creating the Interactive Fields)
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', ...];
$('input[type=list]').w2field('list', { items: people });
$('input[type=combo]').w2field('combo', { items: people });
// if you need to get to the selected items, use:
// $('#id').data('selected');
列表选项 (Options for List)
options = {
items : [],
selected : {}, // selected item as {}
placeholder : '',
url : null, // url to pull data from
cacheMax : 500,
maxWidth : null, // max width for input control to grow
maxHeight : 350, // max height for input control to grow
match : 'contains', // ['contains', 'is', 'begins with', 'ends with']
silent : true,
onSearch : null, // when search needs to be performed
onRequest : null, // when request is submitted
onLoad : null, // when data is received
render : null, // render function for drop down item
showAll : false, // weather to apply filter or not when typing
markSearch : true
};
多选下拉列表 (Multi-Select Drop Down Lists)
Another control I am proud of is multi-select. I cannot image how I used to live without it. It simplified all my UI designs where I need to select multiple items and now I do not have to use two bulky lists of Available and Selected items.
我为之骄傲的另一个控件是多选。 我无法想象没有它的生活。 它简化了我需要选择多个项目的所有UI设计，现在我不必使用两个庞大的“可用”和“选定”项目列表。
HTML设置 (HTML Setup)
<div class="w2ui-label"> Multi-Select: </div>
<div class="w2ui-field"> <input id="enum"> </div>
<div class="w2ui-label"> Max 2 Items: </div>
<div class="w2ui-field"> <input id="enum-max"> </div>
<div class="w2ui-label"> Custom: </div>
<div class="w2ui-field"> <input id="enum-custom"> </div>
Just like the drop down list, it comes with full keyboard support and lots of configuration options (even more then a drop down list). I hope you would enjoy it just as I have over the course of past few years.
就像下拉列表一样，它具有完整的键盘支持和许多配置选项(甚至还有一个下拉列表)。 希望您能像过去几年一样享受它。
创建交互式字段 (Creating the Interactive Fields)
var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;';
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', ...];
$('#enum').w2field('enum', {
items: people,
selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }]
});
$('#enum-max').w2field('enum', {
items: people,
max: 2
});
$('#enum-custom').w2field('enum', {
items: people,
onAdd: function (event) {
if (Math.random() > 0.8) {
event.item.bgColor = 'rgb(255, 232, 232)';
event.item.border = '1px solid red';
}
},
itemRender: function (item, index, remove) {
var html =
'<li style="'+ (item.bgColor ? 'background-color: '+ item.bgColor + ';' : '') +
(item.border ? 'border: '+ item.border + ';' : '') +'" index="'+ index +'">'+
remove +
'<span class="fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' +
item.text +
'</li>';
return html;
},
render: function (item, options) {
return '<span class="fa-star" style="'+ pstyle +'"></span>' + item.text;
}
});
// if you need to get to the selected items, use:
// $('#id').data('selected');
ENUM的选项 (Options for ENUM)
options = {
items : [],
selected : [],
placeholder : '',
max : 0, // max number of selected items, 0 - unlim
url : null, // not implemented
cacheMax : 500,
maxWidth : null, // max width for input control to grow
maxHeight : 350, // max height for input control to grow
match : 'contains', // ['contains', 'is', 'begins with', 'ends with']
silent : true,
showAll : false, // weather to apply filter or not when typing
markSearch : true,
render : null, // render function for drop down item
itemRender : null, // render selected item
itemsHeight : 350, // max height for the control to grow
itemMaxWidth: 250, // max width for a single item
onSearch : null, // when search needs to be performed
onRequest : null, // when request is submitted
onLoad : null, // when data is received
onClick : null, // when an item is clicked
onAdd : null, // when an item is added
onRemove : null, // when an item is removed
onMouseOver : null, // when an item is mouse over
onMouseOut : null // when an item is mouse out
};
上传文件 (File Upload)
And of course, the controls library would not be complete without a file uploader. I have used HTML5 FileReader API (will not work in old browsers, including IE9) to read the file, encode it into base64 and provide to you as a variable that you can submit with any AJAX request.
当然，如果没有文件上传器，控件库将是不完整的。 我已经使用HTML5 FileReader API(在旧的浏览器(包括IE9)中将无法使用)读取文件，将其编码为base64并作为变量提供给您，可以随任何AJAX请求一起提交。
<div class="w2ui-label"> Attach Files: </div>
<div class="w2ui-field"> <input id="file"> </div>
This approach is new to me, but I kind of like it. It simplifies my file uploads, though has some limitations. The biggest I found so far is the limitation of file size (slow with files over 50MB), however it is comparable to email attachments, which in fact are also base64 encoded into email body.
这种方法对我来说是新手，但我有点喜欢。 尽管有一些限制，但它简化了我的文件上传。 到目前为止，我发现的最大问题是文件大小的限制(文件超过50MB时速度较慢)，但是它可与电子邮件附件相提并论，事实上，电子邮件附件也已将base64编码为电子邮件正文。
On a positive side, once you have file encoded into base64, you can use data url API to preview it (if it is an image) or event resize it before submitting to the server with the HTML5 canvas trick.
积极的一面是，一旦将文件编码为base64，就可以使用数据URL API对其进行预览(如果它是图像)，或者使用事件URL对其进行大小调整，然后再使用HTML5 canvas技巧将其提交给服务器。
JavaScript (JavaScript)
$('#file').w2field('file', {});
// if you need to get to the selected files, use:
// $('#file').data('selected');
文件选项 (Options for File)
options = {
selected : [],
placeholder : 'Attach files by dragging and dropping or Click to Select',
max : 0,
maxSize : 0, // max size of all files, 0 - unlim
maxFileSize : 0, // max size of a single file, 0 -unlim
maxWidth : null, // max width for input control to grow
maxHeight : 350, // max height for input control to grow
silent : true,
itemRender : null, // render selected item
itemMaxWidth : 250, // max width for a single item
itemsHeight : 350, // max height for the control to grow
onClick : null, // when an item is clicked
onAdd : null, // when an item is added
onRemove : null, // when an item is removed
onMouseOver : null, // when an item is mouse over
onMouseOut : null // when an item is mouse out
}
下载 (Download)
All these controls are part of W2UI 1.4 (which is in early beta right now). For your convenience, I have put together a small downloadable package with the files you need:
所有这些控件都是W2UI 1.4(目前处于早期Beta版)的一部分。 为了您的方便，我整理了一个小的可下载软件包，其中包含您需要的文件：
In order to use it, you will need to include w2ui-fields-1.0.js and w2ui-fields-1.0.css into your app or its minified counterparts. As far as file size goes, it is only 18Kb for the JS file and 6Kb for CSS (minified and gzipped) and has only one dependency - jQuery.
为了使用它，您需要将w2ui-fields-1.0.js和w2ui-fields-1.0.css包含在您的应用程序或缩小版的应用程序中。 就文件大小而言，JS文件仅为18Kb，CSS文件(缩小并压缩)为6Kb，并且只有一个依赖项-jQuery。
oracle输入替代变量
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
