使用JQuery开发CharacterCase插件

分享于 

11分钟阅读

Web开发

  繁體 雙語

介绍

本文向你展示了如何创建可以重用的JQuery插件。 在本文中,我们将在一个独立JavaScript文件中创建一个JQuery插件,该插件可以在它的他。 本文中使用的示例是 CharacterCase 插件。 这里插件自动将用户输入转换为所需的字母大小写,当用户键入时。 在开发这个插件之后,我们将在一个简单的HTML网页中实现它。 网页由文本框组成,文本框将用户输入转换为大写或者小写字符。 在插件示例中,我们将包括一个功能,它允许最终用户查看转换为所需案例的字符。 这可能是一个很好的特性,因为它帮助你告诉你的用户他们的键盘没有什么问题 !

背景

我们编写了多行代码来执行简单的任务。 我们在多个项目中经常这样做。 我们有一个好的选择是将这个代码折射成一个可以重用组件,例如JQuery插件。 如果我们能够这样做,我们可以节省大量的开发时间和工作。 通过创建可以重用组件,我们可以开发自己的插件库。 本文的目的是向你展示创建JQuery插件是简单有效的。

使用代码

创建CharacterCase插件

  • 我们首先创建一个新的JavaScript文件。 编写以下代码并将它的保存为" CharacterCase-1.0.0.js"。
(function ($) {
}(jQuery));

这里代码指定当网页浏览器加载网页时激发的document ready 事件。

  • 接下来,创建一个函数来初始化HTML文本框。 在我们的示例中,我们将 NAME 函数,SetCase()
$.fn.SetCase = function (options) {
}

开发这个函数之后,我们可以在网页中实现这个插件,并使用该语句 $("#txtFullName").SetCase() 来初始化文本框。

  • SetCase 函数中,为变量和插件选项指定以下缺省值。
var upperValue = "UPPER";var lowerValue = "LOWER";var settings = $.extend({
 //Defaults charCase: upperValue,
 showCaseChange: false,
 showLog:true}, options);

设置插件选项使用默认选项值初始化插件。 例如当我们写入 $("#txtFullName").SetCase() 时,文本框会自动用" charCase"属性设置为"上部"实例字符。 也就是说,当没有指定选项时,文本框将用户输入转换为大写字符。 要设置文本框以使用小写字符,我们必须初始化我们的文本框, $("#txtFullName").SetCase({ charCase:"lower" })

showCaseChange 选项允许插件在用户键入时显示被转换为所需的情况的字符。 finally,showLog 选项会在浏览器的浏览器的网页控制台中显示错误消息和警告。

  • 我们现在将编写代码来实现 showCaseChange 特性。 如前所述,这个很好的小特性允许用户看到被转换为所需案例的字符。 为了实现这个目的,我们使用了简单的CSS技巧。 写完下面代码段中的$.extend() 语句后,立即编写下面的代码。
if (settings.showCaseChange == false) {
 //Case case as soon as the user typesif (settings.charCase.toUpperCase() == upperValue) {
 $(this).css("text-transform", "uppercase");
 }
 elseif (settings.charCase.toUpperCase() == lowerValue) {
 $(this).css("text-transform", "lowercase");
 }
}

showCaseChange 初始化为 false 时,我们将" text-transform"css应用到文本框。 应用这个CSS时,用户将在第一个实例中自动看到所需的案例。 当 showCaseChange 设置为 true 时,例如,用户可以在键入时看到一个小字符转换为大写字符。 通过使用 keyup 事件来转换我们将看到的字符,这是可以能的。

  • 最后,我们将编写核心逻辑来将用户输入转换为所需的。 在 showCaseChange 逻辑之后立即编写以下代码。
$(this).keyup(function () {
 //Selection Indexvar startIndex = this.selectionStart;
 var endIndex = this.selectionEnd;
 if (settings.charCase.toUpperCase() == upperValue) {
 //Convert Text to Upper Case $(this).val($(this).val().toUpperCase());
 }
 elseif (settings.charCase.toUpperCase() == lowerValue) {
 //Convert Text to Lower Case $(this).val($(this).val().toLowerCase());
 }
 //Cursor Positionthis.setSelectionRange(startIndex, endIndex);
 returnthis;
});

函数使用和 toLowerCase() 函数将文本框内容转换为所需字符实例的实际工作。 你将注意到,我们通过使用 startIndexendIndex 变量来跟踪 cursor 位置和选择。 将文本转换为所需字符后,我们将重置 cursor的位置。 如果用户在已经键入的文本之间键入,cursor 将跳到文本框的末尾。 保持 cursor 位置的跟踪有助于避免这个问题。

  • 我们可以添加额外的逻辑来记录错误消息和警告,从而使插件开发者友好。 这些消息将显示在浏览器的控制台窗口中。 下面提供了我们插件的完整代码:
(function ($) {
 $.fn.SetCase = function (options) {
 var upperValue = "UPPER";
 var lowerValue = "LOWER";
 var settings = $.extend({
 //Defaults charCase: upperValue,
 showCaseChange: false,
 showLog:true }, options);
 if (typeof settings.charCase === "undefined" || (settings.charCase.toUpperCase()!= upperValue
 && settings.charCase.toUpperCase()!= lowerValue))
 {
 if (settings.showLog)
 {
 console.log("CharacterCase Plugin: Invalid"charCase" 
 value provided. Valid values are"" +
 upperValue + "" and"" + lowerValue + "". 
 Resetting value to"" + upperValue + "".");
 }
 settings.charCase = upperValue;
 }
 if (typeof settings.showCaseChange!== "boolean")
 {
 if (settings.showLog) {
 console.log("CharacterCase Plugin: Invalid"showCaseChange" 
 value provided. Valid values are true and false. Resetting value to false.");
 }
 settings.showCaseChange = false;
 }
 if (typeof settings.showLog!== "boolean") {
 if (settings.showLog) {
 console.log("CharacterCase Plugin: Invalid"showLog" 
 value provided. Valid values are true and false. Resetting value to true.");
 }
 settings.showLog = true;
 }
 if (settings.showCaseChange == false) {
 //Case case as soon as the user typesif (settings.charCase.toUpperCase() == upperValue) {
 $(this).css("text-transform", "uppercase");
 }
 elseif (settings.charCase.toUpperCase() == lowerValue) {
 $(this).css("text-transform", "lowercase");
 }
 }
 $(this).keyup(function () {
 //Selection Indexvar startIndex = this.selectionStart;
 var endIndex = this.selectionEnd;
 if (settings.charCase.toUpperCase() == upperValue) {
 //Convert Text to Upper Case $(this).val($(this).val().toUpperCase());
 }
 elseif (settings.charCase.toUpperCase() == lowerValue) {
 //Convert Text to Lower Case $(this).val($(this).val().toLowerCase());
 }
 //Cursor Positionthis.setSelectionRange(startIndex, endIndex);
 returnthis;
 });
 }
}(jQuery));

实现CharacterCase插件

你可以使用我们刚开发的JavaScript文件,也可以使用这个插件的简化版本。 Minified文件版本 CharacterCase-1.0.0.min.js 已经与本文捆绑在一起。 还包含了一个演示实现。

  • 首先,使用基本结构创建一个HTML页面,并在页面中包含JQuery和插件JavaScript文件。 要使用这个插件,你还需要包含JQuery文件。 在本示例中,我们将使用缩小版本。
<!-- JQuery JavaScript -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- CharacterCase JavaScript -->
<script src="CharacterCase/CharacterCase-1.0.0.min.js"></script>

注意,插件JavaScript文件已经被放置在文件夹的CharacterCase 文件夹中。

  • 接下来,创建三个HTML文本框。 我们将用 CharacterCase 插件初始化这些文本框。
Convert to Upper Case 1: <input type="text" id="txtUpperCase1"/><br/>
Convert to Upper Case 2: <input type="text" id="txtUpperCase2"/><br/>
Convert to Lower Case: <input type="text" id="txtLowerCase"/>
  • 最后,通过调用 SetCase() 中的来初始化这些文本框 <font face="Courier New"><script></font> 标签。
<script type="text/javascript">
 $(function () {
 $("#txtUpperCase1").SetCase();
 $("#txtUpperCase2").SetCase({ showCaseChange: true });
 $("#txtLowerCase").SetCase({ charCase: "lower" });
 });
</script>

在这个代码段中,第一个文本框使用函数 SetCase(),它将默认文本设置为 Uppercase 字符。 你也可以指定 SetCase({ charCase:"upper" }) 第二个文本框已经用 showCaseChange: true 初始化。 这里选项允许用户在键入时查看被转换为 Uppercase的字符。 最后一个文本框被初始化以将所有文本转换为 lowercase 字符。

历史记录

  • 12th 2015年04月: 初始版本

plugin  CHAR  字符  
相关文章