JQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。 废话少说，先上实例 【代码】 <script> $(function() { $( "#datepicker" ).datepicker(); });</script> <p>Date: <input type="text" id="datepicker"></p> 【效果图】 下面介绍一下具体用法： 一、需要加载的js文件 (1)jquery.js (2)jquery.ui.core.js (3)jquery.ui.widget.js (4)jquery.ui.datepicker.js 二、html代码 需要一个用来加载datepicker控件的输入框 <input id = "date" type="text"/> 三、js代码 初始化函数：$(.selecter).datepicker() 【参数】 因为参数较多，把所有参数根据功能分成几组进行阐述 1、动画 duration 'normal' 设置日期控件展开动画的显示时间，可选是 "slow", "normal", "fast"，"代表立刻，数字代表毫秒数。 showAnim 'show' 设置显示、隐藏日期插件的动画的名称。 showOptions {} 如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。 2、图片按钮 buttonImage "" 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。 buttonImageOnly false 是否把按钮安全显示成图片的样子 buttonText "…" 设置触发按钮的文本内容。 showOn 'focus' 设置什么事件触发显示日期插件的面板，可选值： focus, button, both(当为focus时，不显示图片按钮) 3、选中之后时间格式 dateFormat mm/dd/yy 设置日期字符串的显示格式。 dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。 dayNamesMin ['Su', 'Mo', 'Tu', […]
View Details默认情况下，标准的HTML元素是非常恼人的，它很丑陋。经常有人问我如何创建一个漂亮的表单，而不是浏览器默认的外观，网上充斥大量此类的教程和介绍，但很容易让人迷失其中。但如果我们使用一些 JavaScript 的功能，利用强大的 jQuery 库可以很方面实现这个要求。 jQuery 最强大的是它有一个非常庞大的插件库，非常多的人开发出大量的插件并不断的维护它们。本文与大家分享一些很新的，可以帮助你为你的下一个Web项目的15个独特和有用的jQuery插件列表。 01. QapTcha : jQuery captcha system with jQuery & jQuery UI 从上面的截图看你会不会觉得很库，类似 iPhone 手机的滑动解锁，不再需要输入非常难懂的被扭曲的各种验证码字符，该插件必须跟 jQuery UI 一起工作。 02. Accessible slider 这是用来增强进度条功能的 jQuery 插件，在滑动块的基础上同时增加了数字的显示。 03. Fancy Letter Plugin | Part 2 学习如何使用jQuery来创建一个下拉盖，将它应用到每一个DIV段。 04. Approach jQuery Approach 类似 jQuery animate, 不同的是它是根据距离而不是时间来进行动画处理。 05. Colorful Sliders With jQuery & CSS3 在这个教程中，我们使用 jQuery 和 CSS3 中的新的转换方法来创建滑块控制。 06. Textualizer – A jQuery plugin to transition through blurbs of text […]
View Details触摸屏是现在所有智能手机的标配，还包括各种平板设备，而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用，我们需要借助浏览器的触摸事件来实线。 下图是各种触摸事件说明： 本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库： QUO JS Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag Other features: Built-in jQuery-like methods. It uses $$ to avoid conflict. File size: 13KB minified Standlone: Yes Hammer JS Events: Tap, Double tap, hold, drag, transform (pinch) Other features: Javascript library focused only for multi-touch gestures File size: 2KB minified Standlone: Yes Touchy Events: long press, drag, pinch, rotate, swipe Other features: jQuery plugin for webkit […]
View Details//关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}"); this.Response.Write("</script>"); //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有 this.Response.Write("<script language=javascript>window.open('rows.aspx',’newwindow',’width=200,height=200′)</script>"); //弹出窗口刷新当前页面 this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>"); this.Response.Write("<script>window.open('WebForm2.aspx',’_blank');</script>"); //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中) this.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href=’WebForm2.aspx';</script> "); //关闭当前子窗口,刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>"); this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>"); //子窗口刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>"); this.Response.Write("<script>window.opener.location.href=’WebForm1.aspx';</script>"); //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx) this.Response.Write("<script language=’javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>"); //弹出提示窗口,确定后,刷新父窗口 this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>"); //弹出相同的一页 <INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)"> // Response.Write("parent.mainFrameBottom.location.href=’yourwebform.aspx?temp=" +str+"';"); <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行 --> </SCRIPT> 参数解释： <SCRIPT LANGUAGE="javascript"> js脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空"代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </SCRIPT> […]
View Details1 又是几个基本概念 为什么要说又呢？ 在讨论继承时，我们已经列出了一些基本概念了，那些概念是跟封装密切相关的概念，今天我们要讨论的基本概念，主要是跟继承与多态相关的，但是它们跟封装也有一些联系。 1.1 定义和赋值 变量定义是指用 var a; 这种形式来声明变量。 函数定义是指用 function a(…) {…} 这种形式来声明函数。 var a = 1; 是两个过程。第一个过程是定义变量 a，第二个过程是给变量 a 赋值。 同样 var a = function(…) {}; 也是两个过程，第一个过程是定义变量 a 和一个匿名函数，第二个过程是把匿名函数赋值给变量 a。 变量定义和函数定义是在整个脚本执行之前完成的，而变量赋值是在执行阶段完成的。 变量定义的作用仅仅是给所声明的变量指明它的作用域，变量定义并不给变量初始值，任何没有定义的而直接使用的变量，或者定义但没有赋值的变量，他们的值都是 undefined。 函数定义除了声明函数所在的作用域外，同时还定义函数体结构。这个过程是递归的，也就是说，对函数体的定义包括了对函数体内的变量定义和函数定义。 通过下面这个例子我们可以更明确的理解这一点： Java代码 alert(a); alert(b); alert(c); var a = "a"; function a() {} function b() {} var b = "b"; var c = "c"; var c = function() {} […]
View DetailsJavaScript 是一种非常灵活的面向对象程序设计语言，它与传统的强类型的面向对象程序设计语言（如 C++，Java，C# 等）有很大不同，所以要实现如 C++、java、C# 当中的一些特性就需要换一种思考方式来解决。今天主要讨论如何在 JavaScript 脚本中实现数据的封装（encapsulation）。 数据封装说的简单点就是把不希望调用者看见的内容隐藏起来。它是面向对象程序设计的三要素之首，其它两个是继承和多态，关于它们的内容在后面再讨论。 关于数据封装的实现，在 C++、Java、C# 等语言中是通过 public、private、static 等关键字实现的。在 JavaScript 则采用了另外一种截然不同的形式。在讨论如何具体实现某种方式的数据封装前，我们先说几个简单的，大家所熟知却又容易忽略的 JavaScript 的概念。 1 几个基本概念 1.1 变量定义 在 JavaScript 语言中，是通过 var 关键字来定义变量的。 但是如果我们直接给一个没有使用 var 定义的变量赋值，那么这个变量就会成为全局变量。 一般情况下，我们应该避免使用没有用 var 定义的变量，主要原因是它会影响程序的执行效率，因为存取全局变量速度比局部变量要慢得多。 但是这种用法可以保证我们的变量一定是全局变量。 另外，为了保证速度，我们在使用全局变量时，可以通过 var 定义一个局部变量，然后将全局变量赋予之，由此可以得到一个全局变量的局部引用。 1.2 变量类型 没有定义的变量，类型为 undefined。 变量的值可以是函数。 函数在 JavaScript 中可以充当类的角色。 1.3 变量作用域 变量作用域是指变量生存周期的有效范围。 单纯用 { } 创建的块不能创建作用域。 with 将它包含的对象作用域添加到当前作用域链中，但 with 不创建新的作用域。with 块结束后，会将对象作用域从当前作用域链中删除。 try-catch 中，catch 的错误对象只在 catch 块中有效，但 catch 块中定义的变量属于当前作用域。 其它如 if、for、for-in、while、do-while、switch 等控制语句创建的块不能创建作用域。 用 function 创建的函数，会创建一个新的作用域添加到当前作用域中。 2 封装 下面我们就来讨论具体的封装。首先说一下大家最熟悉的几种封装：私有实例成员、公有实例成员和公有静态成员。最后会讨论一下大家所不熟悉的私有静态成员和静态类的封装办法。因为下面要讨论的是面向对象编程，所有当函数作为类来定义和使用时，我们暂且将其成为类。 2.1 私有实例成员 私有实例成员在 JavaScript 中实际上可以用函数内的局部变量来实现，它相当于类的私有实例成员。例如： class1 = function() { // private […]
View Details提起面向对象我们就能想到类，对象，封装，继承，多态。在《javaScript高级程序设计》（人民邮电出版社，曹力、张欣译。英文名字是：Professional JavaScript for Web Developers）这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。 1．工厂方式 javaScript中创建自己的类和对象，我们应该是必须掌握的，我们都知道javaScript中对象的属性可以在对象创建后动态定义，比如下面的代码： 复制代码代码如下: <script type="text/javascript"> //定义 var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } //调用 oCar.showColor(); </script> 我们很容易使用oCar对象，但是我们创就是想创建多个Car实例。我们可以使用一个函数来封装上面的代码来实现：<script type="text/javascript"> 复制代码代码如下: //定义 function createCar() { var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } return oCar; } //调用 var ocar1 = createCar(); var ocar2 = createCar(); ocar1.color = "black"; ocar1.showColor(); ocar2.showColor(); </script> 顺便说一下，javaScript对象默认成员属性都是public 的。这种方式我们称为工厂方式，我们创造了能创建并返回特定类型的对象的工厂。 这样做有点意思了，但是在面向对象中我们经常使用创建对象的方法是： Car car=new Car(); 使用new 关键字已经深入人心，因此我们使用上面的方法去定义总感觉别扭，并且每次调用时都去创建新的属性以及函数，功能上也不实际。下来我们看看构造函数的形式定义类。 2．构造函数 这种方式看起来有点象工厂函数。具体表现如下： 复制代码代码如下: <script type="text/javascript"> //定义 function Car(color, doors) { this.color = color; this.doors = doors; this.showColor = function() { alert(this.color); }; } //调用 var car1 = new Car("red", 4); var car2 = new Car("blue", 4); car1.showColor(); car2.showColor(); </script> 看起来效果很明显，有差别了吧。感觉有点意思了。在构造函数内部创造对象使用this 关键字，使用new 运算符创建对象感觉非常亲切。但是也有点问题：每次new 对象时都会创建所有的属性，包括函数的创建，也就是说多个对象完全独立，我们定义类的目的就是为了共享方法以及数据，但是car1对象与car2对象都是各自独立的属性与函数，最起码我们应该共享方法。这就是原形方式的优势所在。 3．原型方式 利用对象的prototype属性，可把它看出创建新对象所依赖的原型。方法如下： 复制代码代码如下: <script type="text/javascript"> //定义 function Car() { }; Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.drivers = new […]
View Details这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。 今天是最后一个部分，介绍不使用构造函数实现"继承"。 一、什么是"非构造函数"的继承？ 比如，现在有一个对象，叫做"中国人"。 var Chinese = {nation:’中国'}; 还有一个对象，叫做"医生"。 var Doctor ={career:’医生'} 请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？ 这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。 二、object()方法 json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。 function object(o) { function F() {} F.prototype = o; return new F(); } 这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。 使用的时候，第一步先在父对象的基础上，生成子对象： var Doctor = object(Chinese); 然后，再加上子对象本身的属性： Doctor.career = '医生'; 这时，子对象已经继承了父对象的属性了。 alert(Doctor.nation); //中国 三、浅拷贝 除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。 下面这个函数，就是在做拷贝： function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i];} c.uber = p; return c;} 使用的时候，这样写： var Doctor = extendCopy(Chinese); Doctor.career = '医生'; alert(Doctor.nation); // 中国 但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。 请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。 Chinese.birthPlaces = ['北京',’上海',’香港']; 通过extendCopy()函数，Doctor继承了Chinese。 var Doctor = extendCopy(Chinese); 然后，我们为Doctor的"出生地"添加一个城市： […]
View Details