JavaScript
文章平均质量分 52
引路蜂
这个作者很懒,什么都没留下…
展开
-
Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承
JavaScript 也是一种面向对象的开发语言,但和C++,Java,C#所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType),因此对于来自C++,Java等背景的程序员,初次接触到JavaScript 的面向对象的开发时,开始会有些不适应。而JavaScript语言本身也非常灵活,实现面向对象的方法也很多,不同的框架使用的方法也不同。对于JavaScript的面原创 2013-06-24 10:51:35 · 6817 阅读 · 4 评论 -
jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
DatePicker支持使用另外的按钮控制日期选择界面显示,可以通过自定义的图标来显示这个按钮。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7翻译 2013-03-28 07:06:02 · 2026 阅读 · 0 评论 -
jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
设置可以选择的日期范围有时希望用户在给定的日期内选择,比如预约会议的时间,只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置,如果minDate或maxDate 没有配置,表示没有最小日期或最大日期的限制。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demos翻译 2013-03-28 07:06:51 · 3142 阅读 · 1 评论 -
jQuery 入门教程(14): 添加HTML元素
使用jQuery可以方便的添加新的HTML元素。下面的方法用于添加HTML元素:append() – 在指定的元素的尾部添加一个新内容。prepend() -在指定的元素里前部添加新内容。after() – 在指定元素后添加新内容before() -在指定元素的前面添加新内容。乍一看append,prepend 和after,before似乎功能一样,但append,prepend指在选中的元素本翻译 2013-03-13 15:13:50 · 3394 阅读 · 5 评论 -
jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
格式化日期可以通过日期格式重新定义Datepicker显示日期时的格式。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 script s翻译 2013-03-27 08:18:39 · 3119 阅读 · 0 评论 -
jQuery 入门教程(29): jQuery UI Datepicker 示例(二)
显示月份和年份选择下拉框changeMonth 和changeYear 选择可以打开和关闭月份和年份下拉选择框。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.翻译 2013-03-26 07:14:01 · 2131 阅读 · 1 评论 -
jQuery 入门教程(27): jQuery UI Button示例(二)
本例为使用jQuery的一个实用的例子,显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标(比如ui-icon-seek-end等)。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="t翻译 2013-03-25 07:09:44 · 2686 阅读 · 1 评论 -
jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件,你可以配置显示日期的格式,语言,限制所能选择的日期范围,添加按钮等。基本用法如下:12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href翻译 2013-03-25 07:10:41 · 2325 阅读 · 0 评论 -
jQuery 入门教程(26): jQuery UI Button示例(一)
jQuery Button 组件可以增强表单(Form)中的Buttons,Inputs和Anchor元素,使其具有按钮显示风格,能够正确对鼠标滑动做出反应。基本用法下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。12html lang="en">3head>4 meta charset="utf-8" />5 title>j翻译 2013-03-24 08:11:22 · 3767 阅读 · 1 评论 -
jQuery 入门教程(36): jQuery UI Menu 示例
jQuery Menu 组件可以应用到任何具有父/子关系的元素,就其变为菜单,但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素,可以通过menus 来配置。下例使用缺省的 ui和 li 菜单支持选择事件select,因此可以为菜单添加事件处理。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQue翻译 2013-04-06 20:27:25 · 5181 阅读 · 1 评论 -
jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
AutoComplete在用户输入时,可以根据用户输入给出提示。其数据源可以来自本地,也可以使用远程数据源,AutoComplete 的DataSource可以使用一个Function,本篇中的Function,我们使用JSONP查询。 当数据源为Function时,其函数定义为:Function( Object request, Function response( Object data))其翻译 2013-03-23 09:26:47 · 3231 阅读 · 1 评论 -
jQuery 入门教程(39): jQuery UI Slider 示例(二)
前面的slider 例子Slider都是水平显示的,Slider也可以显示成垂直的,这可以通过配置orientation ,将其值设为“vertical”。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="th翻译 2013-04-24 08:14:21 · 2738 阅读 · 0 评论 -
jQuery 入门教程(37): jQuery UI Progressbar 示例
前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。在使用进度条时,如果可以预知进度的大小,可以设置Max大小,如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demo翻译 2013-04-16 09:09:29 · 7797 阅读 · 0 评论 -
Kendo UI开发教程(4): UI Widgets 概述
Kendo UI 是基于jQuery 库开发的,Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo的autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI组件是以 “kendoMobile”为前缀。比如:”kendoMobileListView”.使用jQuery初原创 2013-06-22 10:37:07 · 8997 阅读 · 2 评论 -
Kendo UI开发教程(3): 初始化Data 属性
前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(“#datepicker”).kendoDatePicker();除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化,此时你需要设置data的role属性,然后调用kendo.init方法。使用初始化Data属性的方法在页面上包含有原创 2013-06-19 07:36:40 · 15554 阅读 · 0 评论 -
Kendo UI开发教程(2):准备Kendo UI开发环境
首先你需要从Telerik网站下载试用版开发包,注意需要注册后才能下载,或者从本站下载 (18M)下载后直接解压后包含下面几个文件和目录:/examples – 示例./js – minified 化后的JavaScript库./vsdoc JavaScript Intellisense 支持文件/styles – minified后的CSS及主题资源.changelog.html – Kendo原创 2013-06-14 07:33:34 · 17247 阅读 · 4 评论 -
Kendo UI开发教程(1): 概述
JavaScript 在开发Web应用的作用越来越大,JQuery简化了HTML和JavaScript之间的操作,jQuery的教程可以参见本博客jQuery和 jQuery UI 入门教程, jQuery UI 是一套 JavaScript 函式库,提供抽象化、可自订主题的 GUI 控制项与动画效果。基于 jQuery JavaScript 函式库,可用来建构互动式的Web应用。在开发Web应用原创 2013-06-12 22:34:53 · 24462 阅读 · 3 评论 -
jQuery 入门教程(42): jQuery UI Tab 示例(二)
支持收缩和展开缺省情况下,标签页是展开的,可以通过设置collapsible为true使得标签页支持收缩和展开。1script>2 $(function () {3 $("#tabs").tabs({4 collapsible: true5 });6 });7script>Ajax支持jQuery 的标签页也支持通过Ajax方法来加载页翻译 2013-05-07 09:08:36 · 4399 阅读 · 0 评论 -
jQuery 入门教程(43): jQuery UI Tooltip 示例
JQuery tooltip 的基本用法,可以把所有元素的的 title 属性做为Toolbar显示,比如:12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.cs翻译 2013-05-07 10:53:40 · 4477 阅读 · 1 评论 -
jQuery 入门教程:总结
前面介绍了jQuery ,jQuery UI的基本用发,详细的教程可以访问http://jquery.com/和 http://jqueryui.com/,为便与查询,给出本教程的链接。jQuery 入门教程(1): 概述jQuery 入门教程(2): 基本语法jQuery 入门教程(3): SelectorsjQuery 入门教程(4): EventsjQuery 入门教程(5): 显示/隐藏内原创 2013-05-07 10:54:48 · 3322 阅读 · 1 评论 -
jQuery 入门教程(41): jQuery UI Tab 示例(一)
Tab 显示多个标签页,每个标签含有一个标签头和一个Panel(显示标签的内容)。基本用法首先使用HTML定义用来作为Tab,一般使用列表(ul ,li) 来定义标签页的标题,每个标题使用href 链接到每个页面的内容页,比如下例定义了三个标签页:1div id="tabs">2 ul>3 li>a href="#tabs-1">Nunc tincidunta>li>4翻译 2013-05-06 08:32:19 · 2539 阅读 · 1 评论 -
jQuery 入门教程(40): jQuery UI Spiner 示例
Spinner 主要用来输入各种格式的数字,可以使用鼠标滚轮,键盘方向键来修改输入值,也支持直接键入数字。支持本地化的输入金额和时间。基本用法下面代码显示了Spinner的基本用法,设置和取得Spinner的当前值。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link翻译 2013-05-01 08:32:48 · 2794 阅读 · 0 评论 -
jQuery 入门教程(38): jQuery UI Slider 示例(一)
jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件,滑动条可以支持多个滑块用来设置单个值或一个值域。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/j翻译 2013-04-18 08:31:00 · 3935 阅读 · 0 评论 -
jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
如果一个输入框可以接受多个输入项,比如选择你喜欢的语言,以逗号隔开,这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外,还需要添加一些事件处理。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet"翻译 2013-03-22 07:10:15 · 13039 阅读 · 12 评论 -
jQuery 入门教程(35): jQuery UI Dialog 示例(三)
本篇使用Dialog 构造一个比较实用的对话框,它可以内嵌一个表单用来接受用户输入,每个输入框支持数据校验,部分使用正则表达式来检验。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic翻译 2013-04-04 08:33:52 · 2237 阅读 · 0 评论 -
jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等。你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50条记录的通讯录,远程数据源一般为保护大量记录的数据库。基本用法本例为使用AutoComplete的基本用法,通过原创 2013-03-21 07:02:14 · 2689 阅读 · 0 评论 -
jQuery 入门教程(8): 动画效果
前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果。基本语法如下:$(selector).animate({params},speed,callback);必选的参数为params,定义CSS用于动画效果的的属性。可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒) 第二个可选参数为回调函翻译 2013-03-10 08:54:36 · 3306 阅读 · 2 评论 -
jQuery 入门教程(10): 回调函数
JavaScript语句是一行一行执行的,然而对于前面的动画效果语句,后面的语句可以在动画效果完成前就执行,因此可能会造成错误的结果。所以之前的hide,show,fadeIn,fadeOut,slideIn,slideOut,animation都支持一个callback可选参数,支持为这些方法添加一个回调函数,在动画完成之后调用。典型的语法如下:$(selector).hide(speed,ca翻译 2013-03-11 07:08:42 · 3127 阅读 · 2 评论 -
jQuery 入门教程(11): 方法链
jQuery支持将多个方法链接在一起,比如介绍的多个animation(),这个链接也可以应用到其它方法,构成一个方法链。使用这个方法,对于同一个元素,链接多个方法,浏览器无需多次查找HTML元素。下面的方法,可以把css,slideUp,slideDown串接在一起:$("#p1") .css("color","red") .slideUp(2000) .slideDown(2000);翻译 2013-03-11 07:09:26 · 4297 阅读 · 2 评论 -
jQuery 入门教程(9):终止动画
jQuery的使用stop()方法在动画结束之前停止动画。 基本语法如下:$(selector).stop(stopAll,goToEnd);可选参数stopAll 指明是否同时清除“动画队列”,缺省为false.意味着只停止当前活动的动画,之后的动画则继续运行。可选参数goToEnd 指明是否立即结束当前动画,缺省为false.因此缺省的stop()动作为终止指定HTML元素的当前动画效果。如:翻译 2013-03-10 08:55:19 · 3096 阅读 · 3 评论 -
jQuery 入门教程(7): 滑动效果
jQuery支持使用下面方法来实现HTML元素的滑动效果:slideDown()slideUp()slideToggle()slideDown方法 用来实现向下滑动动画效果,其基本语法为:$(selector).slideDown(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒) 第二个可选参数为回调函数,在slideD翻译 2013-03-09 09:42:37 · 3655 阅读 · 2 评论 -
jQuery 入门教程(6): 淡入淡出效果
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:fadeIn()fadeOut()fadeToggle()fadeTo()fadeIn()方法fadeIn() 实现淡入效果,其基本语法如下:$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)第二个可选参数为回调函数,在fad翻译 2013-03-08 08:27:29 · 5164 阅读 · 5 评论 -
jQuery 入门教程(4): Events
学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。下面为常见的DOM事件:鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunloadjQuery事件处理的语法在jQu翻译 2013-03-06 23:25:57 · 4151 阅读 · 1 评论 -
jQuery 入门教程(1): 概述
jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明:jQuery 是开源软件,使用MIT许可证授权。[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发人员在其上创建插件的能原创 2013-03-04 21:51:41 · 5802 阅读 · 2 评论 -
jQuery 入门教程(2): 基本语法
学习jQuery之前需要你有下面几个方面的基本知识HTMLCSSJavaScriptjQuery 的基本语法$(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样。action() 定义操作该HTML元素的方法。比如:$(this).hide() – 隐藏当前元素.$(“p”).hid翻译 2013-03-06 08:17:05 · 5051 阅读 · 4 评论 -
jQuery 入门教程(3): Selectors
jQuery Selector 是jQuery库中非常重要的一个组成部分。jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始。选择HTML标记选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有元素$("p") 下面的例子当用户点击一个按钮时,隐藏所有的元素$(doc翻译 2013-03-06 08:21:01 · 5183 阅读 · 3 评论 -
jQuery 入门教程(12): HTML Get
jQuery库包含了很多用来改变和操作HTML元素及其属性的方法。其中一个非常重要的部分就是jQuery可以用来操作DOM。本篇介绍使用jQuery来取得DOM节点元素的值或属性。其中三个简单而有用的方法如下:text() – 设置或取得指定元素的文本内容。html() – 设置或取得指定元素的内容(包括HTML标记)val() – 设置或取得表单某个输入域的值。例如,下面代码使用html()和t翻译 2013-03-12 07:08:02 · 3314 阅读 · 4 评论 -
jQuery 入门教程(13): HTML Set
上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值。text() – 设置或取得指定元素的文本内容。html() – 设置或取得指定元素的内容(包括HTML标记)val() – 设置或取得表单某个输入域的值。比如下面代码就是使用上面三种方法给HTML元素或Form赋值$("#btn1").click(function(){ $("#test1").text("Hello翻译 2013-03-13 07:08:44 · 3020 阅读 · 1 评论 -
jQuery 入门教程(34): jQuery UI Dialog 示例(二)
模式对话框如想对话框显示为模式的,可以通过配置modal: true来设置。12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 script翻译 2013-04-03 08:19:46 · 2733 阅读 · 1 评论 -
jQuery 入门教程(33): jQuery UI Dialog 示例(一)
jQuery Dialog组件用来显示对话框,模式或非模式的。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQuery UI Demostitle>6 link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 script sr翻译 2013-04-02 08:18:07 · 2838 阅读 · 0 评论