xiaolingzi's blog

每天都在成长...

欢迎您:亲

javascript日历控件1.1版本发布(ling.calendar v1.1)

xiaolingzi 发表于 2014-03-19 15:53:01

在该控件的1.0版本中,选择的时间只能精确到天,但是我们经常会碰到有些时间的输入是需要精确到时分秒的,那这次1.1版主要就是针对这个进行了扩展。

版本更新如下:

1. 添加对时分秒的支持

2. 优化小部分显示兼容性问题

阅读全文

Jvascript实现省份城市区县三级联动选择组件(ling.chinaArea V1.0)

xiaolingzi 发表于 2013-01-23 23:58:42

一、概述

省份城市区域三级联动的情况在现在的网站中是非常常见的一种功能,特别是社交网站,这是必不可少的填写项。而且在发展过程中不同网站的选择的方式可能会有所不同,该组件主要是以三个下拉菜单为选择主体。

二、实现原理

其实该组件的实现比较简单,重要的是数据的来源,这些省份城市区县的数据是从网上找来的,自己稍微加工了一下,存储的格式为json格式。

具体到框架和实现跟之前的日期时间选择组件比较类似,就不多说,大家可以通过下面的链接查看参考:

http://xxling.com/blog/article/69.aspx

三、使用说明

使用方法如下:

window.onload = function () {
    $ling.chinaArea.init("selProvince1", "selCity1", "selDistrict1");
    $ling.chinaArea.init("selProv

阅读全文

javascript中json对象和json字符串的互相转换(ling.jsonHandler-1.0)

xiaolingzi 发表于 2013-01-08 22:11:54

一、背景

随着json格式受到大家的热捧,使用json格式来进行数据传输变得也来越普遍。而在json的传输和保存时,又不能单纯的直接使用json对象,而是需要转换为json格式的一个字符串来进行。正是由于这样的需要,所以我们需要一个将json对象和json字符串进行互换的方法。这里讲的是javascript中实现。

二、实现

对于这个功能的实现也比较简单,主要是遍历对象中的属性,如果已经是值类型或者其他无需进一步转换的属性则直接转换为字符串,如果该属性仍是一个json对象或者数组等其他对象,那么就进行递归调用进行转换,直到所有对象被转换完毕。

由于代码比较简单,所以直接给出完整代码,如下:

(function () {
    var jsonHandler = {
        objectToJsonStr: function (obj) {
            //若是数字 布尔 或者 

阅读全文

javascript实现日历控件(ling.calendar v1.0)

xiaolingzi 发表于 2013-01-05 20:49:25

一、概述

对于日历控件,现在网上也有很多,相信大家用得也很多了。至于它的好处这里只说两点:

1.使用户的输入更加方便和直观

2.避免不规范的输入(当然故意作恶的除外,所以在服务器端还是要验证)

二、UI设计及实现

由于功能比较简单,基本跟大家平时看到的控件都差不多,所以需求就不做过多的陈述。下面是UI的截图:


由于这是一个js控件,所以我们需要将html和样式都通过js去加载,而不用用户在重新去拷贝什么的。这

阅读全文

javascript实现日期时间下拉菜单选择组件(ling.datetimeSelect-1.0)

xiaolingzi 发表于 2013-01-04 23:30:31

一、概述

与面板选择式的日历控件不同,这个是为满足通过下拉框来选择日期时间的组件,它的实现相对来说也比较简单。

二、最终效果(需求)

一个使用的效果图参考图如下:


select控件是由用户来写,而不是js动态添加的,js只负责对select控件的下拉选项进行填充和约束,用户需要提供对应select控件的id,组件会根据用户传的参数来确定有哪些需要的项。

除了天选择项是具有依赖性之外,其他下拉选项要么是固定(如每年的月份都是12个月,别跟我说闰月)或者有固定的范围(如年选择项的最大值和最小值),所以比较简单。

三、功能实现

在功能实现这块,由于下拉选项的初始化都比较类似,这里就讲其一而不再其二,特殊的也会拿出

阅读全文

javascript日期时间的获取和格式化显示以及时间转换

xiaolingzi 发表于 2012-09-06 22:37:29

javascript中用于获取日期时间的对象是Date,也是我们今天主角。

首先我们先输出Date这家伙的type看看 它在js中是被定义成什么东西

alert(typeof (Date));//function

从上面看出 它实际就是定义的一个function

了解了它的定义 我们开始了解它的使用

网上资料看得多的朋友可能会发现对Date的使用其实有两种方式,一种就是直接Date()函数调用,另外一种就new关键字来实例化一个对象new Date()。那这两者有什么差别呢。我们还是分别输出他们的结果和type看一下。

var myDate1 = Date();
var myDate2 = new Date();
alert(myDate1);
/*  Firefox,Chrome,Safari,Opera: Thu Sep 06 2012 16:10:01 GMT+0800 (China Stand

阅读全文

html5shiv.js分析-读源码之javascript系列

xiaolingzi 发表于 2012-05-31 23:42:29

首先,我们先了解一下html5shiv.js是什么。

html5shiv.js是一套实现让ie低版本等浏览器支持html5标签的解决方案。

实现原理:见如何让ie低版本浏览器支持html5标签 。

废话不多说,我们先上源代码,代码有点长,但保持原来的注释有利于大家理解,不想直接阅读的就点收缩代码然后往下看。源码原地址:https://github.com/aFarkas/html5shiv 。

/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;(function(window, document) {
                                    
  /** Preset options */
  var options = window.html5 || 

阅读全文

javascript匿名函数的各种执行形式

xiaolingzi 发表于 2012-05-25 22:44:23

一、什么是javascript匿名函数

首先,我们来看一下在javascript中正常函数定义的语法

function 函数名(var1,var2,...,varX)
{
    函数体
}

正如上面代码所示,正常函数的定义需要一个函数名来标识该函数对象,有了这个标识,我们就可以在其他地方(作用域范围内)对它进行调用。

那么什么是匿名函数呢,匿名匿名就是没有名字,在这里就是没有函数名。那么是不是可以直接把上面代码的函数名去掉呢?答案是不行。因为上面不是一个执行表达式,而是一个函数定义体,直接去掉函数名就会报错。

如下面的代码就会报"function statement requires a name"的

阅读全文