Sublime Text2安装Package Control

一、安装Package Control 使用Sublime Text2首先就要安装Package Control,这样就能使用丰富的插件包了 安装方法有2种: (1)访问Package Control站点按照提示复制一段python命令安装Package Control 也可以直接复制这一段到控制台(Ctrl+~) [python] import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' [/python] (2)下载Package Control插件包到插件目录 插件目录在菜单中打开Preference--Browse Packages,没有自己新建一个 二、安装插件 Sublime Text2有很多好用的插件,安装好Package Control 后就可以方便的安装插件了 Ctrl+Shift+P(Win) 或 Command+Shift+P(Mac) 调出控制面板, 常用的命令Install Package (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展) 转自http://blog.csdn.net/del1214/article/details/8092266/

Jquery form 插件

表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。 ajaxForm() 增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: $('#myFormId').ajaxForm(); ajaxSubmit() 马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false return false; }); formSerialize() 将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 可链接(Chainable):不能, 这个方法返回一个字符串。 实例: var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); fieldSerialize() 将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 可链接(Chainable):不能,这个方法返回一个字符串。 实例: var queryString = $('#myFormId .specialFields').fieldSerialize(); fieldValue() 返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。 可链接(Chainable):不能,该方法返回数组。 实例: // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]); resetForm() 通过调用表单元素原有的DOM方法,将表单恢复到初始状态。 可链接(Chainable):可以。 实例: $('#myFormId').resetForm(); clearForm() 清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。 可链接(Chainable):可以。 $('#myFormId').clearForm(); clearFields() 清除字段元素。只有部分表单元素需要清除时才方便使用。 可链接(Chainable):可以。 $('#myFormId .specialFields').clearFields(); Options对象 ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合: target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。 默认值:null。 url 指定提交表单数据的URL。 默认值:表单的action属性值 type 指定提交表单数据的方法(method):“GET”或“POST”。 默认值:表单的method属性值(如果没有找到默认为“GET”)。 beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据: [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值:null success 表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值:null dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持: 'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。 'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。 'script':如果dataType == 'script', 服务器响应将求值成纯文本。 默认值:null(服务器返回responseText值) semantic Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image". 布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="image"的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将semantic设置为true。(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。) 默认值:false resetForm 布尔标志,表示如果表单提交成功是否进行重置。 Default value: null clearForm 布尔标志,表示如果表单提交成功是否清除表单数据。 默认值:null 实例: // 准备好Options对象 var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('Thanks for your comment!'); } }; // 将options传给ajaxForm $('#myForm').ajaxForm(options); 注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。 ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码 $(document).ready(function(){ registerForm'表单id data回调数据 $('#registerForm').ajaxForm(function(data){ alert(data);//弹出ajax请求后的回调结果 }); }); ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。 $(document).ready(function(){ $('#btn').click(function(){ $('#registerForm').ajaxSubmit(function(data){ alert(data); }); return false; }); }); 该段代码作用是在表单中id为btn的按钮click事件触发时通过ajaxSubmit()方法以ajax技术提交表单到表单的action所指路径 formSerialize()是将一个form中所有的表单元素以name作为key,value作为值进行序列化操作,这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值,最好也设置id方便jquery定位表单元素。若要使用此方法你必须设置表单元素name属性及填充表单元素value的值,我在初次使用时就忘了设置name属性,最后在同事的帮助下找了好久才发现此错误。 var str=$('#registerForm').formSerialize(); // registerForm为form id alert(str); fieldSerialize()是将form中表单元素进行序列化以name作为key,value作为值进行序列化操作,这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值。 var str=$('#username). fieldSerialize(); alert(str);

My97DatePicker 时间范围

4. 日期范围限制

  1. 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围

    示例4-1-1 限制日期的范围是 2006-09-10到2008-12-20

    <input id="d411" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>

    示例4-1-2 限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30

    <input type="text" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>

    示例4-1-3 限制日期的范围是 2008年2月 到 2008年10月

    <input type="text" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>

    示例4-1-4 限制日期的范围是 8:00:00 到 11:30:00

    <input type="text" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>
  2. 动态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天 动态变量表
    格式 说明
    %y 当前年
    %M 当前月
    %d 当前日
    %ld 本月最后一天
    %H 当前时
    %m 当前分
    %s 当前秒
    {} 运算表达式,如:{%d+1}:表示明天
    #F{} {}之间是函数可写自定义JS代码

    示例4-2-1 只能选择今天以前的日期(包括今天)

    <input id="d421" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

    示例4-2-2 使用了运算表达式 只能选择今天以后的日期(不包括今天)

    <input id="d422" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

    示例4-2-3 只能选择本月的日期1号至本月最后一天

    <input id="d423" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

    示例4-2-4 只能选择今天7:00:00至明天21:00:00的日期

    <input id="d424" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

    示例4-2-5 使用了运算表达式 只能选择 20小时前 至 30小时后 的日期

    <input id="d425" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>
  3. 脚本自定义限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制

    示例4-3-1 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01

    合同有效期从  到  <input id="d4311" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/> <input id="d4312" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/> 注意: 两个日期的日期格式必须相同 $dp.$ 相当于 document.getElementById 函数. 那么为什么里面的 ' 使用 \' 呢? 那是因为 " 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误. 所以您在其他地方使用时注意把 \' 改成 " 或者 ' 来使用. #F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示当 d4312 为空时, 采用 2020-10-01 的值作为最大值

    示例4-3-2 前面的日期+3天 不能大于 后面的日期

    日期从  到  <input type="text" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/> <input type="text" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/> 使用 $dp.$D 函数 可以将日期框中的值,加上定义的日期差量: 两个参数: id={字符类型}需要处理的文本框的id值 , obj={对象类型}日期差量 日期差量用法: 属性y,M,d,H,m,s分别代表年月日时分秒 如 为空时,表示直接取值,不做差量(示例4-3-1中的参数就是空的) {M:5,d:7} 表示 五个月零7天 {y:1,d:-3} 表示 1年少3天 {d:1,H:1} 表示一天多1小时

    示例4-3-3 前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3

    住店日期从  到  <input type="text" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/> <input type="text" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/> 注意: #F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 表示当 d4332 为空时, 采用 $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作为最大值 使用 $dp.$DV 函数 可以将显式传入的值,加上定义的日期差量: 两个参数: value={字符类型}需要处理的值 , obj={对象类型}日期差量 用法同上面的 $dp.$D 类似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3减去3月零2天

    示例4-3-4 发挥你的JS才能,定义任何你想要的日期限制

    自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的 <script> //返回一个随机的日期 function randomDate(){ var Y = 2000 + Math.round(Math.random() * 10); var M = 1 + Math.round(Math.random() * 11); var D = 1 + Math.round(Math.random() * 27); return Y+'-'+M+'-'+D; } </script> <input type="text" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
  4. 无效天可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)

    示例4-4-1 禁用 周六 所对应的日期

    <input id="d441" type="text" onFocus="WdatePicker({disabledDays:[6]})"/>

    示例4-4-2 禁用 周六 周日 所对应的日期

    <input id="d442" type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/>
  5. 无效日期 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥 用法(正则匹配): 如果你熟悉正则表达式,会很容易理解下面的匹配用法 如果不熟悉,可以参考下面的常用示例 ['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29 ['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29 ['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29 ['^2006'] 表示禁用 2006年的所有日期 此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制 注意:%ld不能使用 ['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天 ['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天 当然,除了可以限制日期以外,您还可以限制时间 ['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 : 需要 使用 \: ) 不再多举例了,尽情发挥你的正则才能吧!

    示例4-5-1 禁用 每个月份的 5日 15日 25日

    <input id="d451" type="text" onFocus="WdatePicker({disabledDates:['5$']})"/> 注意 :'5$' 表示以 5 结尾 注意 $ 的用法

    示例4-5-2 禁用 所有早于2000-01-01的日期

    <input id="d452" type="text" onFocus="WdatePicker({disabledDates:['^19']})"/> 注意:'^19' 表示以 19 开头 注意 ^ 的用法 当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法

    示例4-5-3 配合min/maxDate使用,可以把可选择的日期分隔成多段

    本示例本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末 <input id="d453" type="text" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>

    示例4-5-4 min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情况下也能满足需求

    <input id="d454" type="text" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>

    示例4-5-5 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量

    鼠标点击 小时输入框时,你会发现当然时间对应的前一个小时和后一个小时是灰色的 <input id="d2a25" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/> 注意:%y %M %d等详见动态变量表

    示例4-5-6 #F{}也是可以使用的

    本示例利用自定义函数 随机禁用0-23中的任何一个小时 打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同 <script> function randomH(){ //产生一个随机的数字 0-23 var H = Math.round(Math.random() * 23); if(H<10) H='0'+H; //返回 '^' + 数字 return '^'+H; } </script> <input type="text" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
  6. 有效日期使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了. 关键属性: opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用

    示例4-6 只启用 每个月份的 5日 15日 25日

    <input id="d46" type="text" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/> 注意 :'5$' 表示以 5 结尾 注意 $ 的用法
  7. 特殊天和特殊日期特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效 关键属性: specialDays (0至6 分别代表 周日至周六) 用法同无效天 specialDates 用法同无效日期,但是对时分秒无效

    示例4-7-1 高亮每周 周一 周五

    <input id="d471" type="text" onFocus="WdatePicker({specialDays:[1,5]})"/>

    示例4-7-2 高亮每月 1号 15号

    <input id="d472" type="text" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/>

jquery dataTable

  1. 分页
    1. bPaginite:true;是否启用分页功能
    2. sPaginationType:two_button  或者full_numbers 分页风格
    3. sFirst:告诉他第一页怎么写
    4. sLast:告诉他最后一页怎么写
    5. sNext:告诉他下一页怎么写
    6. sPrevious:告诉他上一页怎么写
  2. 语言
    1. "sInfo":"共_TOTAL_页 第_START_到_END_页",
    2. "sEmptyTable":"没有数据"
    3. "sInfoFiltered":"从_MAX_条记录中搜索",
    4. "sInfoPostFix": "      底边栏的静态信息",
    5. "sInfoThousands": "我靠",//格式化信息用的
    6. "sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"
    7.   "sSearch":"搜索"
  3. 基本的命令
    1. aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式
    2. aaSortingFixed:锁定某一列的排序方式  用户不能改变
    3. iDisplayLength:规定每一页的显示数目
    4. aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
    5. bAutoWidth:自动调整列宽
    6. bDestroy:好比重新部署
    7. bFilter:是否启用过滤器
    8. bInfo:是否启用底边信息栏
    9. bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
    10. bProcessing:表格在处理数据时是否要显示信息
    11. sProcessing:定义表格在处理数据时要显示的信息
    12. bScrollAutoCss:是否允许显示滚动条
    13. sScrollY:表格的高度 不够的话用滚动条
    14. bScrollCollapse:当设置sScrolly时  如果数据没那么高  表格是否自适应高度
    15. bScrollInfinite:允许无限滚动  和google的图片搜索功能一样  一滚到最后就自动刷新
    16. sScrollXInner:是个百分比 实际就是表格的宽度一样
    17. sScrollX:也是百分比  实际就是水平方向滚动条件
    18. bSort:是否启用排序功能
     
 
引入 使用
Javascript代码
<pre>
$(document).ready(function(){      $('#example').dataTable();  });    // 另一个例子  $(document).ready(function(){      $('#example').dataTable({          "bInfo": false      });  });
</pre>
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理。 以下是在进行dataTable绑定处理时候可以附加的参数:
属性名称 取值范围 解释
bAutoWidth true or false, default true 是否自动计算表格各列宽度
bDeferRender true or false, default false 用于渲染的一个参数
bFilter true or false, default true 开关,是否启用客户端过滤功能
bInfo true or false, default true 开关,是否显示表格的一些信息
bJQueryUI true or false, default false 是否使用jquery ui themeroller的风格
bLengthChange true or false, default true 开关,是否显示一个每页长度的选择条(需要分页器支持)
bPaginate true or false, default true 开关,是否显示(使用)分页器
bProcessing true or false, defualt false 开关,以指定当正在处理数据的时候,是否显示“正在处理”这个提示信息
bScrollInfinite true or false, default false 开关,以指定是否无限滚动(与sScrollY配合使用),在大数据量的时候很有用。当这个标志为true的时候,分页器就默认关闭
bSort true or false, default true 开关,是否让各列具有按列排序功能
bSortClasses true or false, default true 开关,指定当当前列在排序时,是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3',打开后,在处理大数据时,性能有所损失
bStateSave true or false, default false 开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的
sScrollX 'disabled' or  '100%' 类似的字符串 是否开启水平滚动,以及指定滚动区域大小
sScrollY 'disabled' or '200px' 类似的字符串 是否开启垂直滚动,以及指定滚动区域大小
-- -- --
选项
aaSorting array array[int,string], 如[], [[0,'asc'], [0,'desc']] 指定按多列数据排序的依据
aaSortingFixed 同上 同上。唯一不同点是不能被用户的自定义配置冲突
aLengthMenu default [10, 25, 50, 100],可以为一维数组,也可为二维数组,比如:[[10, 25, 50, -1], [10, 25, 50, "All"]] 这个为选择每页的条目数,当使用一个二维数组时,二维层面只能有两个元素,第一个为显示每页条目数的选项,第二个是关于这些选项的解释
aoSearchCols default null, 类似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] 给每个列单独定义其初始化搜索列表特性(这一块还没搞懂)
asStripClasses default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] 指定要被应用到各行的class风格,会自动循环
bDestroy true or false, default false 用于当要在同一个元素上执行新的dataTable绑定时,将之前的那个数据对象清除掉,换以新的对象设置
bRetrieve true or false, default false 用于指明当执行dataTable绑定时,是否返回DataTable对象
bScrollCollapse true or false, default false 指定适当的时候缩起滚动视图
bSortCellsTop true or false, default false (未知的东东)
iCookieDuration 整数,默认7200,单位为秒 指定用于存储客户端信息到cookie中的时间长度,超过这个时间后,自动过期
iDeferLoading 整数,默认为null 延迟加载,它的参数为要加载条目的数目,通常与bServerSide,sAjaxSource等配合使用
iDisplayLength 整数,默认为10 用于指定一屏显示的条数,需开启分页器
iDisplayStart 整数,默认为0 用于指定从哪一条数据开始显示到表格中去
iScrollLoadGap 整数,默认为100 用于指定当DataTable设置为滚动时,最多可以一屏显示多少条数据
oSearch 默认{ "sSearch": "", "bRegex": false, "bSmart": true } 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前
sAjaxDataProp 字符串,default 'aaData' 指定当从服务端获取表格数据时,数据项使用的名字
sAjaxSource URL字符串,default null 指定要从哪个URL获取数据
sCookiePrefix 字符串,default 'SpryMedia_DataTables_' 当打开状态存储特性后,用于指定存储在cookies中的字符串的前缀名字
sDom default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 这是用于定义DataTable布局的一个强大的属性,另开专门文档来补充说明吧
sPaginationType 'full_numbers' or 'two_button', default 'two_button' 用于指定分页器风格
sScrollXInner string default 'disabled' 又是水平滚动相关的,没搞懂啥意思
DataTable支持如下回调函数
回调函数名称 参数 返回值 默认 功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set string: cookie formatted string (which should be encoded by using encodeURIComponent()) null 当每次cookies改变时,会触发这个函数调用
fnDrawCallback 在每次table被draw完后调用,至于做什么就看着办吧
fnFooterCallback 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次重画的时候修改表格的脚部
fnFormatNumber 1.int : number to be formatted String : formatted string for DataTables to show the number 有默认的 用于在大数字上,自动加入一些逗号,分隔开
fnHeaderCallback 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次draw发生时,修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules string: The string to be displayed in the information element. 用于传达table信息
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成后调用
fnPreDrawCallback 1.object:oSettings - DataTables settings object Boolean 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它值,draw可以顺利执行
fnRowCallback 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : "TR" element for the current row 当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用于替换默认发到服务端的请求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded, true otherwise 在cookies中的数据被加载前执行,可以方便地修改这些数据
fnStateSaveCallback 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. String - the full string that should be used to save the state 在状态数据被存储到cookies前执行,可以方便地做一些预操作

wordpress Audio Player flash插件用法

有2种使用方法: 1.直接输入MP3网址,插件会自动识别哦(前提是勾上第2项 Replace all links to mp3 files) 2.调用函数(去掉引号) ["audio:http://name_of_mp3_file.mp3|autostart=yes|loop=yes"] autostart=yes: 自动播放 loop=yes:循环播放 多首歌曲使用逗号隔开
有2个使用方法:
1.直接输入MP3网址,插件会自动识别哦(前提是勾上第2项 Replace all links to mp3 files)
2.调用函数(去掉引号)
["audio:http://name_of_mp3_file.mp3|autostart=yes|loop=yes"]
autostart=yes: 自动播放    loop=yes:循环播放
titles=标题名称
AudioPlayer2-468x268
外链的引用方法: “网络嗅探器”,利用此软件,监控所有正访问资源的数据流,成功获取此歌曲的真实链接地址,可以百度下载此软件,操作简单! 如何实现在网站的侧边栏(SIDERBAR),网站头(HEADER)或网站底(FOOTER)显示播放器 你可以在需要的地方显示播放器,并且使用标签“tag”来实现: < ?php if (function_exists("insert_audio_player")) {insert_audio_player("[ audio:mp3地址]");} ?> 这时你也可以调节播放器的宽度: < ?php if (function_exists("insert_audio_player")) {insert_audio_player("[ audio:mp3地址|width=100%]");} ?> 如何防止你播放的MP3显示在RSS源中 只要在设置里面“Remove all enclosures from feeds” 打勾就可以了。

Codeigniter 验证码 Captcha

CI自带的验证码,用的实在蛋疼,需要定期清理生成的图片。今天花了点时间,整合了另外一个验证码插件captcha。 地址 在controllers中新建simplecaptcha.php 代码如下 [php] if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class SimpleCaptcha extends CI_Controller { /** Width of the image */ public $width = 80; /** Height of the image */ public $height = 30; /** Dictionary word file (empty for randnom text) */ public $wordsFile = 'words/es.php'; /** * Path for resource files (fonts, words, etc.) * * "resources" by default. For security reasons, is better move this * directory to another location outise the web server * */ public $resourcesPath = 'resources'; /** Min word length (for non-dictionary random text generation) */ public $minWordLength = 4; /** * Max word length (for non-dictionary random text generation) * * Used for dictionary words indicating the word-length * for font-size modification purposes */ public $maxWordLength = 4; /** Sessionname to store the original text */ public $session_var = 'captcha'; /** Background color in RGB-array */ public $backgroundColor = array(255, 255, 255); /** Foreground colors in RGB-array */ public $colors = array( array(27,78,181), // blue array(22,163,35), // green array(214,36,7), // red ); /** Shadow color in RGB-array or null */ public $shadowColor = null; //array(0, 0, 0); /** * Font configuration * * - font: TTF file * - spacing: relative pixel space between character * - minSize: min font size * - maxSize: max font size */ public $fonts = array( //'Antykwa' => array('spacing' => -3, 'minSize' => 27, 'maxSize' => 30, 'font' => 'AntykwaBold.ttf'), //'Candice' => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 31, 'font' => 'Candice.ttf'), //'DingDong' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 30, 'font' => 'Ding-DongDaddyO.ttf'), //'Duality' => array('spacing' => -2, 'minSize' => 30, 'maxSize' => 38, 'font' => 'Duality.ttf'), //'Heineken' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 34, 'font' => 'Heineken.ttf'), //'Jura' => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 32, 'font' => 'Jura.ttf'), //'StayPuft' => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 32, 'font' => 'StayPuft.ttf'), 'Times' => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 34, 'font' => 'TimesNewRomanBold.ttf'), //'VeraSans' => array('spacing' => -1, 'minSize' => 20, 'maxSize' => 28, 'font' => 'VeraSansBold.ttf'), ); /** Wave configuracion in X and Y axes */ public $Yperiod = 12; public $Yamplitude = 14; public $Xperiod = 11; public $Xamplitude = 5; /** letter rotation clockwise */ public $maxRotation = 8; /** * Internal image size factor (for better image quality) * 1: low, 2: medium, 3: high */ public $scale = 2; /** * Blur effect for better image quality (but slower image processing). * Better image results with scale=3 */ public $blur = false; /** Debug? */ public $debug = false; /** Image format: jpeg or png */ public $imageFormat = 'jpeg'; /** GD image */ public $im; public function __construct($config = array()) { parent::__construct(); //$preUrl = $_SERVER['HTTP_REFERER'];echo $preUrl;exit; } public function index(){ $this->CreateImage(); } public function CreateImage() { $ini = microtime(true); /** Initialization */ $this->ImageAllocate(); /** Text insertion */ $text = $this->GetCaptchaText(); //$fontcfg = $this->fonts[array_rand($this->fonts)]; $fontcfg = NULL; $this->WriteText($text, $fontcfg); $this->load->library('session'); //$_SESSION[$this->session_var] = $text; $this->session->set_userdata($this->session_var , $text); /** Transformations */ //$this->WaveImage(); if ($this->blur && function_exists('imagefilter')) { imagefilter($this->im, IMG_FILTER_GAUSSIAN_BLUR); } $this->ReduceImage(); if ($this->debug) { imagestring($this->im, 1, 1, $this->height-8, "$text {$fontcfg['font']} ".round((microtime(true)-$ini)*1000)."ms", $this->GdFgColor ); } /** Output */ $this->WriteImage(); $this->Cleanup(); } /** * Creates the image resources */ protected function ImageAllocate() { // Cleanup if (!empty($this->im)) { imagedestroy($this->im); } $this->im = imagecreatetruecolor($this->width*$this->scale, $this->height*$this->scale); // Background color $this->GdBgColor = imagecolorallocate($this->im, $this->backgroundColor[0], $this->backgroundColor[1], $this->backgroundColor[2] ); imagefilledrectangle($this->im, 0, 0, $this->width*$this->scale, $this->height*$this->scale, $this->GdBgColor); // Foreground color $color = $this->colors[mt_rand(0, sizeof($this->colors)-1)]; $this->GdFgColor = imagecolorallocate($this->im, $color[0], $color[1], $color[2]); // Shadow color if (!empty($this->shadowColor) && is_array($this->shadowColor) && sizeof($this->shadowColor) >= 3) { $this->GdShadowColor = imagecolorallocate($this->im, $this->shadowColor[0], $this->shadowColor[1], $this->shadowColor[2] ); } } /** * Text generation * * @return string Text */ protected function GetCaptchaText() { //$text = $this->GetDictionaryCaptchaText(); //if (!$text) { $text = $this->GetRandomCaptchaText(); //随机字 //} return $text; } /** * Random text generation * * @return string Text */ protected function GetRandomCaptchaText($length = null) { if (empty($length)) { $length = rand($this->minWordLength, $this->maxWordLength); } $words = "abcdefghijlmnopqrstvwyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; $vocals = "0123456789"; $wordsCount = strlen($words)-1; $vocalsCount = strlen($vocals)-1; $text = ""; $vocal = rand(0, 1); for ($i=0; $i<$length; $i++) { if ($vocal) { $text .= substr($vocals, mt_rand(0, $vocalsCount), 1); } else { $text .= substr($words, mt_rand(0, $wordsCount), 1); } $vocal = !$vocal; } return $text; } /** * Random dictionary word generation * * @param boolean $extended Add extended "fake" words * @return string Word */ function GetDictionaryCaptchaText($extended = false) { if (empty($this->wordsFile)) { return false; } // Full path of words file if (substr($this->wordsFile, 0, 1) == '/') { $wordsfile = $this->wordsFile; } else { $wordsfile = $this->resourcesPath.'/'.$this->wordsFile; } $fp = fopen($wordsfile, "r"); $length = strlen(fgets($fp)); if (!$length) { return false; } $line = rand(1, (filesize($wordsfile)/$length)-2); if (fseek($fp, $length*$line) == -1) { return false; } $text = trim(fgets($fp)); fclose($fp); /** Change ramdom volcals */ if ($extended) { $text = preg_split('//', $text, -1, PREG_SPLIT_NO_EMPTY); $vocals = array('a', 'e', 'i', 'o', 'u'); foreach ($text as $i => $char) { if (mt_rand(0, 1) && in_array($char, $vocals)) { $text[$i] = $vocals[mt_rand(0, 4)]; } } $text = implode('', $text); } return $text; } /** * Text insertion */ protected function WriteText($text, $fontcfg = array()) { if (empty($fontcfg)) { // Select the font configuration $fontcfg = $this->fonts[array_rand($this->fonts)]; } // Full path of font file //自己 //$fontcfg['font'] = "AntykwaBold.ttf.ttf" //$fontfile = $this->resourcesPath.'/fonts/'.$fontcfg['font']; $fontfile = "./root/fonts/TimesNewRomanBold.ttf"; /** Increase font-size for shortest words: 9% for each glyp missing */ $lettersMissing = $this->maxWordLength-strlen($text); $fontSizefactor = 1+($lettersMissing*0.09); // Text generation (char by char) $x = 20*$this->scale; $y = round(($this->height*27/40)*$this->scale); $length = strlen($text); //test //$degree = rand($this->maxRotation*-1, $this->maxRotation); //$degree = 0; //$fontsize = rand($fontcfg['minSize'], $fontcfg['maxSize'])*$this->scale*$fontSizefactor; //$letter = substr($text, $i, 1); for ($i=0; $i<$length; $i++) { $degree = rand($this->maxRotation*-1, $this->maxRotation); //字体大小 //$fontsize = rand($fontcfg['minSize'], $fontcfg['maxSize'])*$this->scale*$fontSizefactor; $fontsize = 36; $letter = substr($text, $i, 1); if ($this->shadowColor) {//echo 1; $coords = imagettftext($this->im, $fontsize, $degree, $x+$this->scale, $y+$this->scale, $this->GdShadowColor, $fontfile, $letter); } $coords = imagettftext($this->im, $fontsize, $degree, $x, $y, $this->GdFgColor, $fontfile, $letter); $x += ($coords[2]-$x) + ($fontcfg['spacing']*$this->scale); } } /** * Wave filter */ protected function WaveImage() { // X-axis wave generation $xp = $this->scale*$this->Xperiod*rand(1,3); $k = rand(0, 100); for ($i = 0; $i < ($this->width*$this->scale); $i++) { imagecopy($this->im, $this->im, $i-1, sin($k+$i/$xp) * ($this->scale*$this->Xamplitude), $i, 0, 1, $this->height*$this->scale); } // Y-axis wave generation $k = rand(0, 100); $yp = $this->scale*$this->Yperiod*rand(1,2); for ($i = 0; $i < ($this->height*$this->scale); $i++) { imagecopy($this->im, $this->im, sin($k+$i/$yp) * ($this->scale*$this->Yamplitude), $i-1, 0, $i, $this->width*$this->scale, 1); } } /** * Reduce the image to the final size */ protected function ReduceImage() { // Reduzco el tamaño de la imagen $imResampled = imagecreatetruecolor($this->width, $this->height); imagecopyresampled($imResampled, $this->im, 0, 0, 0, 0, $this->width, $this->height, $this->width*$this->scale, $this->height*$this->scale ); imagedestroy($this->im); $this->im = $imResampled; } /** * File generation */ protected function WriteImage() { if ($this->imageFormat == 'png' && function_exists('imagepng')) { header("Content-type: image/png"); imagepng($this->im); } else { header("Content-type: image/jpeg"); imagejpeg($this->im, null, 80); } } /** * Cleanup */ protected function Cleanup() { imagedestroy($this->im); } } 前端代码如下 [php] <a href="#" onclick="document.getElementById('captcha').src='<?php echo base_url();?>simplecaptcha?'+Math.random();" id="change-image"><img src="<?php echo site_url();?>/simplecaptcha" id="captcha" /></a> [/php] 使用时注意字库路径. 可通过参数 输出不同类型的验证码图片

WordPress 学习 (插件开发 - 随机文章小工具)

Wordpress 插件是每个wordpress网站必不可少的 , 最近正好要给自己的网站建个随机显示文章的栏目的小工具.虽然网上已经有很多现成的插件 。 但为了学习WordPress的开发 ,所以还是打算自己开发个。 网上找了些资料,研究了半小时 终于完成了。 首先在plugin下 新建一个.php文件 专业点的可以放在文件内 文件名最好是插件名 打开php文件 写入以下代码 [php] /* Plugin Name: 随机显示文章 Plugin URI: http://www.frankway.net Description: 随机显示文章 Author: frank Version: 1.0 Author URI: http://www.frankway.net */ [/php] Plugin Name :插件名称 Plugin URI: 插件url地址 Description: 插件描述 Author: 作者信息 Version: 版本号 Author URI: 作者url地址 定义 widget_Random类 继承WP_Widget小工具类 里面包含widget_Random,widget,update,form 4个方法 [php] class widget_Random extends WP_Widget { function widget_Random() { $widget_ops = array('description' => '随机显示文章'); $this->WP_Widget('widget_test', '随机显示文章', $widget_ops); } function widget($args, $instance) { extract($args); $title = apply_filters('widget_title', esc_attr($instance['title'])); $limit = strip_tags($instance['limit']); $title = empty($title) ? "随机文章" : $title; $limit = empty($limit) ? 5 : $limit; echo $before_widget.$before_title.$title.$after_title; global $post; $rand_posts = get_posts("orderby=rand&numberposts=$limit"); //get_posts("orderby=rand&numberposts=$limit"); echo "<ul>"; /* foreach($rand_posts as $post) {?> <li><a href="<?php the_permalink();?>"><?php echo $post->post_title; ?></a></li> <?php }*/ foreach ($rand_posts as $post):?> <li><a href="<?php the_permalink();?>" title="查看 <?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endforeach; echo "</ul>"; unset($post); echo $after_widget; } function update($new_instance, $old_instance) { if (!isset($new_instance['submit'])) { return false; } $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['limit'] = strip_tags($new_instance['limit']); return $instance; } function form($instance) { global $wpdb; $instance = wp_parse_args((array) $instance, array('title' => '随机文章', 'limit' => '5')); $title = esc_attr($instance['title']); $limit = strip_tags($instance['limit']);?> <p> <label for="<?php echo $this->get_field_id('title'); ?>">标题:<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label> </p> <p> <label for="<?php echo $this->get_field_id('limit'); ?>">数量:<input class="widefat" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" type="text" value="<?php echo $limit; ?>" /></label> </p> <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" /> <?php } } [/php] widget_Random 构造方法 包含小工具的默认参数 widget 方法 网站前台显示在侧边栏内的内容 里面包含文章的查询和循环输出 form 方法 网站后台 小工具设置参数的表单 update 方法接收form提交的参数 [php] add_action('widgets_init', 'widget_random_init'); function widget_random_init() { register_widget('widget_Random'); } [/php] 最后通过add_action 方法把插件内的小工具 增加到工具栏