network_networkx - CSDN
精华内容
参与话题
  • 1:创建两个.jsp,分别是登录界面和显示页面。(注意第一行的“utf-8”) <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&......

    1:创建两个.jsp,分别是登录界面和显示页面。(注意第一行的“utf-8”)

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <%@ taglib prefix="s" uri="/struts-tags" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        <title>登录页面</title>
      </head>
      <body>
        <!-- 局部定义使用哪一种国际化语音 -->
       <s:i18n name="messages">  
      	<s:text name="check"></s:text>:
      	<a href="Login?request_locale=zh_CN"><s:text name="chinese"></s:text></a>  
    	<a href="Login?request_locale=en_US"><s:text name="english"></s:text></a>  
    	<br/>
       <form action="<%=basePath%>t1" method="post">
                 <table>
                   <tr>
                     <td><s:text name="login.username"/></td>
                     <td><input type="text" name="user.userName"/></td>
                   </tr>
                   <tr>
                     <td><s:text name="login.password"/></td>
                     <td><input type="text" name="user.password"/></td>
                   </tr>
                   <tr>
                    <td colspan="2"><input type="submit" value="<s:text name="login"/>"/></td>
                  </tr>              
                 </table>                             
        </form>
       </s:i18n>
      </body>
    </html>
    
    
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>显示页面</title>
        
      </head>
      
      <body>
    	用户名:${requestScope.name };<br />
    	密码:${requestScope.pwd };
      </body>
    </html>
    
    

    2:创建两个.class文件 ,以下是代码。

    package com.hngy.action;
    
    public class Login {
    
    	public String execute(){
    		
    		return "tianxiao";
    		
    	}
    
    	
    }
    
    
    package com.hngy.action;
    
    public class TianAction {
    
    	private String name;
    	private String pwd;
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getPwd() {
    		return pwd;
    	}
    	public void setPwd(String pwd) {
    		this.pwd = pwd;
    	}
    	
    	public String tian(){
    		
    		return "tianxiaohe";
    		
    	}
    
    	
    }
    
    

    3:最重要的一步,也是本篇文章的重点–(实现中英文切换),创建两个.properties。
    在这里插入图片描述
    在这里插入图片描述
    直接Add添加属性即可。

    4:创建一个xml文件(即配置文件),这里说一下怎么创建这个配置文件;
    在src下new下XML(Advanced Templates)。以下是配置文件的代码。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE struts PUBLIC
       "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
       "http://struts.apache.org/dtds/struts-2.0.dtd">
    	
    	<struts>
    	<package name="default" namespace="/" extends="struts-default">
    	<action name="t1" class="com.hngy.action.TianAction" method="tian">
    	<result name="tianxiaohe">/xiao.jsp</result>
    	
    	</action>
    	<action name="Login" class="com.hngy.action.Login">
    	<result>/index.jsp</result>
    	
    	</action>
    	</package>
    	</struts>
    

    5:.jar包必不可少
    在这里插入图片描述
    6:web文件的完善

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
      <filter>
      <filter-name>struts2</filter-name>
      <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
      </filter>
      <filter-mapping>
      <filter-name>struts2</filter-name>
      <url-pattern>/*</url-pattern>
      
      </filter-mapping>
      
      
    </web-app>
    
    

    很多人感觉web文件中的太难找(包括本人)
    接下来用几张图片简单演示一下,希望能帮到你哦。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    效果图如下:
    在这里插入图片描述
    今天也是充满希望的一天!

    展开全文
  • 对于使用前端的jquery实现国际化,求一个使用i18n的全代码
  • 国际化英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。在计算机领域,国际化是指设计能够适应各种区域和语言...

    一、简介

    在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化。国际化英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程。

    jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件。与 Java 里的资源文件类似,jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的(或浏览器提供的 )语言和国家编码(符合 ISO-639 和 ISO-3166 标准)来解析对应的以“.properties”为后缀的资源文件。

    利用资源文件实现国际化是一种比较流行的方式,例如 Android 应用就可以采用以语言和国家编码命名的资源文件来实现国际化。jQuery.i18n.properties 插件中的资源文件以“.properties”为后缀,包含了区域相关的键值对。我们知道,Java 程序也可以使用以 .properties 为后缀的资源文件来实现国际化,因此,当我们要在 Java 程序和前端 JavaScript 程序中共享资源文件时,这种方式就显得特别有用。jQuery.i18n.properties 插件首先加载默认的资源文件(例如:strings.properties),然后加载针对特定语言环境的资源文件(例如:strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。开发人员可以以 JavaScript 变量(或函数)或 Map 的方式使用资源文件中的 key。rties 插件首先加载默认的资源文件(例如:strings.properties),然后加载针对特定语言环境的资源文件(例如:strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。开发人员可以以 JavaScript 变量(或函数)或 Map 的方式使用资源文件中的 key。

    二、jQuery.i18n.properties API

    jQuery.i18n.properties 的 API 非常简单,只有少数几个 API,即 jQuery.i18n.properties()、jQuery.i18n.prop()、jQuery.i18n.browserLang()。当然,和其他 jQuery 插件一样,我们也可以采用 $.i18n.properties()、$.i18n.prop() 和 $.i18n.browserLang() 的形式使用这用这些 API。

    jQuery.i18n.properties(settings)

    该方法加载资源文件,其中 settings 是配置加载选项的一系列键值对,各配置项的具体描述如表 1 所示。

    表 1. settings

    jQuery.i18n.properties() 的使用方法如清单 1 所示。

    清单 1. jQuery.i18n.properties() 用法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    jQuery.i18n.properties({
       name:'strings',// 资源文件名称
       path:'bundle/',// 资源文件所在目录路径
       mode:'both',// 模式:变量或 Map
       language:'pt_PT',// 对应的语言
       cache:false,
       encoding: 'UTF-8',
       callback: function() {// 回调方法
       }
    });

    jQuery.i18n.prop(key)

    该方法以 map 的方式使用资源文件中的值,其中 key 指的是资源文件中的 key。当 key 指定的值含有占位符时,可以使用 jQuery.i18n.prop(key,var1,var2 … ) 的形式,其中 var1,var2 …对各占位符依次进行替换。例如资源文件中有“msg_hello= 您好 {0},今天是 {1}。”的键值对,则我们可以采用“jQuery.i18n.prop( ‘ msg_hello ’ , ’小明’ , ’星期一’ );”的形式使用 msg_hello。

    jQuery.i18n.browserLang() 用于获取浏览浏览器的语言信息,这里不再单独介绍。


    三、具体实现国际化的思路


    1.首次进入浏览器,前端页面会根据浏览器设置的语言来显示对应的语言,一般大陆地区显示的简体中文(zh-CN),港澳台地区会显示繁体中文(zh-TW/zh-HK..),国外则是英文(en\en-US),如何查看或者设置浏览器语言??打开浏览器-设置-高级设置-语言即可看到,拿谷歌为例。


    代码会根据浏览器的语言,将浏览器语言保存到cookie中,看清楚,一定要存到cookie中,不能存到session,原因是session一旦关闭了浏览器就会消失,而cookie不会,会根据你设置的时间保留起来(主要目的是为了下次登录仍然显示cookie保存的语言)



    2.然后,前端页面(一般在头部)应该有个下拉框,选择是简体中文、繁体中文、英文等,绑定选择事件,选择某个后就会刷新浏览器中的cookie,自动刷新页面后,语言显示也会随之改变。



    四、如何实现?

    1.引入jquery和i18n插件(jQuery.i18n.properties)还有cookie插件(jquery.cookie.js)以及我们的language.js(该js是自己定义)

    <script type="text/javascript" src="resources/lib/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" src="resources/lib/jquery.i18n.properties-1.0.9.js">
    </script>

    插件的目录结构应该是这样的,下面还有对应的en(英文),zh-CN(简体中文)的文件包,下面有对应的properties文件,






    2.html代码

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title class="i18n" name='title'></title>
        <meta id="i18n_pagename" content="index-common">
        <meta name="viewport" content="width=device-width">
        <meta name="keywords" content="" />
        <meta name="description" content=""/>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <div class="lan">
        <div class="lan1"><label class="i18n" name="lan"></label></div>
        <div class="lan2">
            <select id="language">
                <option value="zh-CN">中文简体</option>
                <option value="zh-TW">中文繁體</option>
                <option value="en">English</option>
            </select>
        </div>
    </div>
    <br>
    <hr>
    <div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br>
    <div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br>
    <div>
        <input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
    </div>
    
    <script src="js/jquery.js "></script>
    <script src="js/jquery.cookie.js"></script>
    <!-- 加载语言包文件 -->
    <script src="js/jquery.i18n.properties.js"></script>
    <script src="js/language.js"></script>
    </body>
    </html>
    
    


    language.js代码如下:
    /**
     * 获取浏览器语言类型
     * @return {string} 浏览器国家语言
     */
    var getNavLanguage = function(){
        if(navigator.appName == "Netscape"){
            var navLanguage = navigator.language;
            return navLanguage;
        }
        return false;
    }
    
    /**
     * 设置语言类型: 默认为中文
     */
    var i18nLanguage = "zh-CN";
    
    /*
    设置一下网站支持的语言种类
     */
    var webLanguage = ['zh-CN', 'zh-TW', 'en'];
    
    /**
     * 执行页面i18n方法
     * @return
     */ 
    var execI18n = function(){
        /*
        获取一下资源文件名
         */
        var optionEle = $("#i18n_pagename");
        if (optionEle.length < 1) {
            console.log("未找到页面名称元素,请在页面写入\n <meta id=\"i18n_pagename\" content=\"页面名(对应语言包的语言文件名)\">");
            return false;
        };
        var sourceName = optionEle.attr('content');
        sourceName = sourceName.split('-');
    
    
        /*
        首先获取用户浏览器设备之前选择过的语言类型
         */
        if ($.cookie('userLanguage')!=undefined||$.cookie('userLanguage')!=null||$.cookie('userLanguage')!="") {
    
    
            i18nLanguage = $.cookie('userLanguage');
    
            console.log(i18nLanguage);
    
        } else{
            // 获取浏览器语言
            var navLanguage = getNavLanguage();
    
            console.log(navLanguage);
    
            if (navLanguage) {
                // 判断是否在网站支持语言数组里
                var charSize = $.inArray(navLanguage, webLanguage);
                if (charSize > -1) {
                    i18nLanguage = navLanguage;
                    // 存到缓存中
                    $.cookie('userLanguage',navLanguage, { expires: 30})
                };
            } else{
                console.log("not navigator");
                return false;
            }
        }
        /* 需要引入 i18n 文件*/
        if ($.i18n == undefined) {
            console.log("请引入i18n js 文件")
            return false;
        };
    
        /*
        这里需要进行i18n的翻译
         */
        jQuery.i18n.properties({
            name : sourceName, //资源文件名称
            path : 'i18n/' + i18nLanguage +'/', //资源文件路径
            mode : 'map', //用Map的方式使用资源文件中的值
            language : i18nLanguage,
            callback : function() {//加载成功后设置显示内容
                var insertEle = $(".i18n");
                console.log(".i18n 写入中...");
                insertEle.each(function() {
                    // 根据i18n元素的 name 获取内容写入
                    $(this).html($.i18n.prop($(this).attr('name')));
                });
                console.log("写入完毕");
    
                console.log(".i18n-input 写入中...");
                var insertInputEle = $(".i18n-input");
                insertInputEle.each(function() {
                    var selectAttr = $(this).attr('selectattr');
                    if (!selectAttr) {
                        selectAttr = "value";
                    };
                    $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
                });
                console.log("写入完毕");
            }
        });
            
    }
    
    
    
    
    
    /*页面执行加载执行*/
    $(function(){
    
        /*执行I18n翻译*/
        execI18n();
    
        /*将语言选择默认选中缓存中的值*/
        $("#language option[value="+i18nLanguage+"]").attr("selected",true);
    
        /* 选择语言 */
        $("#language").bind('change', function() {
            var language = $(this).children('option:selected').val()
            console.log(language);
    
            $.cookie('userLanguage',language, { expires: 30});
    
            location.reload();
        });
    });

    简体中文界面:
    
    
    
    
    繁体中文界面:
    
    
    
    
    
    
    英文界面:
    
    
    
    
    
    
    对应的三个语言的资源文件如下:
    
    
    
    
    
    
    可以看到界面展示图片中浏览器控制台有404报错信息
    
    

    要求你在一种webServer里面去访问.properties文件,这个问题你只需要使用任何一种webserver运行即可,比如IIS、Apache、Node的web服务器等。博主的代码是在Visual Studio里面跑的,所以是基于IIS的,当你把代码搬到VS里面跑的时候,第一个问题来了

    坑一:配置IIS对.properties文件的支持

    如果本文仅仅是上面的内容,是没啥意义的。接下来才是本文要介绍的重点!

    将上述代码直接搬到VS里面,运行的时候你会发现第一个问题:

    为什么这里会请求三个properties文件?因为jquery.i18n.properties.js组件支持三种类型的命名方式,这点很多文章都有介绍,组件代码运行的时候会去请求三种规则的properties文件,只要找到任何一种规则的文件都可以读取到里面的内容。按照博主上文给出的文件目录

    根据这个目录,那我们通过 http://localhost:12770/Content/i18n/zh-CN/common.properties 这个url应该能访问到zh-CN/common.properties这个文件,可实际情况确实这样:

    对于这种IIS报错404的问题,C#程序员肯定是不陌生的,无非就两个原因:

    1. url不正确,这个目录下面确实没有找到这个资源文件
    2. 文件的类型iis默认不支持,直接拒绝请求

    排除了第一个原因,那么只可能是第二个原因引起的了。那么我们如何处理呢,在网上搜索半天资料,找到一种解决方案:

    这样确实能绕过IIS的文件名验证,但是改源码不是一个好的解决方案,博主有一千个理由来说明改源码的弊端。这种方式肯定不是一个最好的解决方案,于是博主决定另辟蹊径。

    还记得当初博主学习less的时候,iis默认也是不支持.less文件的,于是我们在web.config里面加了如下一些配置:

    这绝对属于同类型的问题,加这个配置是显式告诉IIS,我们系统里面某种后缀的文件需要哪种Processer(处理器或处理组件)去处理,受此启发,那么我们这里的.properties文件的404问题是不是也可以通过此种方式解决?如果需要通过这种思路去解决,首要问题是需要找到.properties文件的mimeType,博主思考,既然是在js里面调用这个.properties文件,那么我们是否可以使用JavaScript的处理机制来处理.properties文件呢,考虑到上面那种将所有.properties替换成.js的处理方式,似乎.properties和.js有很多相似之处,于是我们加上如下一条配置:

    得到结果:

    试验成功,就是这么简单。当然如果发布到IIS,可能需要在IIS的MIME类型里面添加.properties这种类型的映射。

    好了,这个问题就这么愉快的解决了。如果你的WebServer不是基于IIS的,可能没有这个问题,但我想思路或许相通,供参考!

    坑二:使用html的data属性初始化国际化内容

    一般情况下,我们标签里面的内容如果要做国际化,需要使用 $('#id').text($.i18n.prop('proName')); 来给标签赋值,现在问题来了,我们开发一个界面,有很多地方都需要去做国际化,我们总不能这样每一个页面每一个标签通过这种方式去赋值吧,这样工作量不是一点大,于是乎博主想,有没有一种比较好的通用的解决方案去给这些需要做国际化的标签统一赋值呢。html的data属性似乎是一个不错的选择!它具有可读性强、可维护性强、兼容jquery的data()方法等优点。比如我们修改国际化组件的方法如下:

    复制代码
    jQuery.i18n.properties({
            name: 'common',
            path: '/Content/i18n/' + i18nLanguage + '/', //资源文件路径
            mode: 'map', //用Map的方式使用资源文件中的值
            language: i18nLanguage,
            callback: function () {//加载成功后设置显示内容
                console.log("i18n赋值中...");
                try {
                    //初始化页面元素
                    $('[data-i18n-placeholder]').each(function () {
                        $(this).attr('placeholder', $.i18n.prop($(this).data('i18n-placeholder')));
                    });
                    $('[data-i18n-text]').each(function () {
                        //如果text里面还有html需要过滤掉
                        var html = $(this).html();
                        var reg = /<(.*)>/;
                        if (reg.test(html)) {
                            var htmlValue = reg.exec(html)[0];
                            $(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
                        }
                        else {
                            $(this).text($.i18n.prop($(this).data('i18n-text')));
                        }
                    });
                    $('[data-i18n-value]').each(function () {
                        $(this).val($.i18n.prop($(this).data('i18n-value')));
                    });
                }
                catch(ex){ }
                console.log("i18n写入完毕");
            }
        });
    复制代码

     通过data属性获取标签,然后对每个标签通过对应的data-i18n-属性进行国际化赋值即可,这里暂时定义了三种类型data-i18n-placeholder、data-i18n-text、data-i18n-value的属性,如果有其他需求,可以增加其他类型。

    然后看下我们html页面的使用

    <input class="typeahead" type="text" id="menu_search" data-i18n-placeholder = "searchPlaceholder"/>
    <span data-i18n-text="setting"></span>

    这样不用写一句标签的赋值代码,即可对标签进行国际化。

    坑三:第三方组件的国际化(一)

    对于第三方组件,我们自定义的代码里面的中文要做国际化,我只需要使用$.i18n.prop('key')即可,比如bootstrapTable:

    {
            field: 'AuditEventType',
            title: '业务类型',
            width: '12%'
    }

    直接使用

    {
            field: 'AuditEventType',
            title: $.i18n.prop('bllType'),
            width: '12%'
    }

    即可。这个解决思路很简单,没啥好说的,可是有一些第三方组件,自己有国际化的功能,初始化的时候需要指定国际化的类型,形如:

    $(".date").datetimepicker({
         format: 'YYYY-MM-DD',//日期格式化,只显示日期
         locale: 'zh-CN'      //中文化
    });

    目前想到的解决方案,就是根据cookie里面存储的当前语言来显式赋值

    //获取cookie里面的语言
    var userLanguage = getlanguageCookie("userLanguage");
    $(".date").datetimepicker({
         format: 'YYYY-MM-DD',//日期格式化,只显示日期
         locale: userLanguage =='zh-CN'?'zh-CN':'en-US'     //国际化
    });

    如果是多种语言,这里可以在前端自己去处理。

    坑四:第三方组件的国际化(二)

     上面介绍了第三方组件初始化时候指定国际化,除此之外,还有另外一种情况,就是很多组件有自己的本地化(关于国际化和本地化的区别,请自行谷歌)文件,它的国际化是通过引用不同的本地化js文件来实现的,比如博主常用的bootstrapTable组件,它的目录:

    还有其他组件也是这样,比如:

     

    那么针对这种情况,我们的国际化该如何实现了,这里博主提供的思路是动态引用js,通过当前cookie里面保存的语言的类型来引用对应语言的js文件,比如针对bootstrapTable,我们这样去动态引用js

    复制代码
         //组件根据国际化动态引入js
    var userLanguage = getlanguageCookie("userLanguage");
            //如果cookie里面没有,则使用默认值
            if (!userLanguage) {
                userLanguage = 'zh-CN';
            }
            if (userLanguage == 'zh-CN') {
                var script = $('<script><\/script>');
                script.attr('src', '/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js');
                $('body').append(script);
            }
            else if (userLanguage == 'en') {
                var script = $('<script><\/script>');
                script.attr('src', '/Content/bootstrap-table/locale/bootstrap-table-en-US.js');
                $('body').append(script);
            }
    复制代码

    如果要想代码写得更加优雅,可以自己去实现前端的抽象工厂,这里只是提供一种实现思路。


    示例下载链接:去下载


    本文参考:

    https://www.cnblogs.com/landeanfen/p/7581609.html

    https://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/



    展开全文
  • JavaWeb

    千次阅读 多人点赞 2018-11-12 11:35:21
    JavaWeb知识点总结
    最终那间凌乱的房子充斥着垃圾,再也不能岁月静好了
    
    
    html和htm是一种静态的页面格式,也就是说不需要服务器解析其中的脚本,或者说里面没有服务器执行的脚本,而shtml和shtm基于SSI技术,当有服务器端可执行脚本时被当做一种动态编程语言来看待,就如asp、jsp、php一样,当其中不包含服务器端可执行脚本时,作用就和html和htm一样
    
    相对定位占位置
    静态定位占位置
    
    hyper	亢奋,超越
    markup	标记
    meta	元
    title	标题
    face	脸
    heading	标题
    paragraph	段落
    bold	粗体字
    italic	斜体字
    center	居中
    horizontal	水平线
    break	换行
    preformatted	预定于格式的,HTML中的原生标签pre
    image	图像
    source	根源,源头
    bootstrap
    使用bootstrap来设计响应式页面点点干】】】
    
    SQL:结构化的查询语言
    DDL:数据定义语言create,alter,drop..
    DML:数据操纵语言update,insert,delete..
    DCL:数据控制语言grand,if..
    DQL:数据查询语言select..
    特点:
    非过程性语言:一条语句就会有一个运行的结果。
    
    create database 数据库名 [character set 字符集 collate 字符集校对];
    表的CRUD操作
    约束:primary key 
    
    less\sass\stylus
    它们是三种类似的样式动态语言,属于CSS预处理语言,它们有类似css的语言,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等。这么做就是为了CSS的编写和维护
    //不会被编译的注释//
    /*会被编译的注释*/
    变量:@w:
    Node.js可以理解为时一门后端脚本语言,使用了和JavaScript相同的语法,会使用JavaScript的程序员能很快的上手node.js、nodejs在处理高并发性能卓越,目前很多公司在使用nodejs作为后端数据服务和前端开发的中间层
    
    
    1.HTML
    HTML概述和基本结构
    HTML标题
    HTML段落、换行与字符实体
    HTML块、含样式的标签
    HTML图像、绝对路径和相对路径
    HTML链接
    HTML列表
    HTML表格及传统布局
    HTML表单
    HTML内嵌框架
    2、CSS
    CSS基本语法及页面使用
    CSS文本设置
    CSS颜色表示器
    CSS选择器
    CSS盒模型
    CSS元素溢出
    块元素、内联元素、内联块元素
    浮动
    定位
    background属性
    3、PS
    4、前端开发流程
    5、HTML5和CSS3
    CSS权重
    CSS3新增选择器
    CSS3圆角、阴影、rgba
    CSS3 transition动画
    CSS3 transform变换
    CSS3 animation动画
    CSS浏览器前缀
    HTML5新结构标签
    HTML5新增表单控件
    HTML5音频和视频
    6、移动端页面开发流程
    7、JavaScript
    JavaScript介绍
    JavaScript嵌入页面的方式
    变量
    获取元素
    操作元素属性
    函数
    条件语句
    数组及操作方法
    循环语句
    JavaScript组成
    字符串处理方法
    调试程序的方法
    定时器
    类型转换
    变量作用域
    封闭函数
    闭包
    内置对象
    面向对象
    新选择器
    8、jQuery
    jQuery介绍
    jQuery加载
    jQuery选择器
    jQuery样式操作
    jQuery属性操作
    绑定click事件
    jQuery特殊效果
    jQuery链式调用
    jQuery动画
    尺寸相关,滚动事件
    jQuery事件
    主动触发与自定义事件
    事件冒泡
    事件委托
    jQuery元素节点操作
    滚轮事件与函数节流
    json
    ajax和jsona
    正则表达式
    本地存储
    jQueryUI
    9、移动端库
    移动端js事件
    zepto
    swiper
    bootstrap
    10、前端自动化及优化
    less、sass、stylus
    grunt、gulp
    
    
    MySQL:
    常用的关系型数据库:
    MySQL:免费的小型数据库,现在被Oracle收购
    Oracle:Oracle公司收费的大型数据库
    SQLServer:微软公司收费的中型数据库
    DB2:IBM公司收费的大型数据库
    SyBase:
    SQLite:小型,移动端
    
    SQL:结构化的查询语句
    SQL分类:
    DDL:数据定义语句create,alter,drop
    DML:数据操纵语句update,insert,delete
    DCL:数据控制语句grand,if
    DQL:数据查询语句
    SQL语句的特点:非过程性语言:一条语句就会有一个运行的结果
    创建数据库:create database 数据库名【character set 字符集 collate 字符集校对】
    create databese db charater set utf8 collate utf8_bin;
    查看数据库:
    查询数据库中所有的数据库show databases;
    查询某个数据库的定义信息show create database 数据库名;
    查看当前正在使用的数据库select database();
    删除数据库:
    drop database 数据库名
    修改数据库:
    修改数据库是指修改数据库的字符集和校队规则:
    alter database 数据库名 character set 新字符集 collate 校对规则
    切换数据库:
    use 数据库名
    
    使用sql语句操作数据库中的表(对数据库表的CRUD操作)
    创建表:
    create table employee(
    	eid int primary key auto_increment,
    	ename varchar(20) not null,
    	email varchar(30) unique,
    )
    
    表的查看:
    查看数据库中有那些表
    show tables;
    查看表结构
    desc 表名;
    表的删除:
    drop table 表名;
    表的修改:
    修改表添加列:
    alter table 表名 add 列名 类型(长度) 约束;
    修改表删除列:
    alter table 表名 drop 列名;
    修改表的列的类型的长度或约束
    alter table 表名 modfiy 列名 新类型(长度) 新约束;
    修改表的列名:
    alter table 表名 change 旧列名 新列名 类型(长度) 约束;
    修改表名:
    reneme table 旧表名 to 新表名;
    修改表的字符集:
    alter table 表名 character set 字符集; 
    CRUD:
    插入:insert into 表名 (列名,列名……) values(值1,值2……);
    insert into 表名 values (值1,值2……)
    修改:update 表名 set 列名=值,列名=值……【where 条件】
    删除:
    delete from 表名 【where 条件】
    
    
    数据库都是关系数据库:存的是实体之间的关系,实体之间有哪些关系?
    一对多
    多对多
    一对一         
    多表的设计:
    一对多建表原则:在多的一方添加外键,指向一的一方的主键
    多对多建表原则:创建一张中间表,中间表至少有两个字段,分别作为外键指向多对多双方各自的主键。
    一对一:唯一外键或者主键对应
    
    使用sql创建一对多的关系:
     alter table orders add foreign key(cid) references customer(cid)
    
    /* primary key auto_increment	foreign key*/
    
    连接池改造:
    自定义连接池中的问题及如何去解决:
    没有面向借口编程
    解决:不额外的提供api,就可以解决上诉问题:
    能不能还调用connection的close方法
    增强一个Java类中的某个方法有几种方法?
    1、继承:前提是你能控制这个类的构造(找到它的父类)
    2、装饰着模式:包装对象和被包装对象都要实现相同的接口;包装的对象中需要获得被包装对象的引用,缺点:如果接口的方法比较多,增强其中的某个方法,其他的功能方法需要原有调用如bufferedinputstream和inputstream
    3、动态代理:被增强的对象实现接口就可以
    
    
    手动的抽取一个dbutils工具类
    需求:每一次进行jdbc的crud操作的时候,有很多代码都是相同的,可不可以抽取工具类,完成一个通用性的代码
    分析:
    技术分析:
    JDBC的元数据
    DATAbaseMetData:获得数据库连接的信息,获得数据库表的信息
    	获得数据库元数据:Connection中的getMethodData();
    ParameterMetData:获得sql中的参数个数及类型
    	获得参数元数据:preparedStatement中的getParameterMetaData()
    ResultSetMetData:获得结果集中的列名及列的类型
    	获得结果集元数据:resulr中的get
    
    使用xml作为配置文件的方式来完成模拟Tomcat
    需求:现有一套页面,这套页面想被其他人访问到,端口号可以修改的
    分析:
    Java基础的网络编程
    XML的概述:可扩展的标记语言,类似HTML,允许用户自定义(EXTensible Markup Language)
    XML的作用:
    传输和存取数据;
    软件的配置文件:
    (现在传输数据一般使用Json,存储数据使用数据库);
    XML的语法:
    XML的文档注释:
    	文档声明:文档声明必须放在文档的第一行
    	写法:<?xml 属性名=“属性值”……>
    	  version:必须的,使用"1.0"
    	  encoding:字符集,是使用浏览器打开的时候采用默认的字符集编码
    	  standalone:描述xmL 文档是否需要依赖其他的文件.
    XML的注释:
    	<!--注释-->
    XML的元素:
    	命名规则:
    	名称可以包含字母,数字
    	不能以数字或者标点符号开头
    	不能以XML开头
    XML的shuxing
    XML的特殊字符和指令
    	&lt;……
    	CDATA区:里面的所有内容都会被当成字符串
    		<![CDATA[这里面的所有内容全部都是字符串]]>
    XML解析:
    DOM:
    SAX:
    Document:
    Element:
    Attribute:
    Text:
    Node:
    
    
    
    
    Servlet:就是一个运行在服务器端的小的Java程序,用来接收和响应从客服端发送过来的请求,通常使用HTTP协议
    HTTP协议的详解:
    请求部分:
    	提交方式:GET、POST
    	请求头:一般一个可以一个value
    
    响应行状态码:
    200:成功
    302:重定向
    304:查找本地资源
    404:资源不存在
    500:服务器内部错误
    
    Servlet的生命周期:
    	第一次访问Servlet的时候,服务器就会创建一个Servlet对象,init方法就会执行。任何一次请求服务器就会创建一个Service方法。service方法内部根据请求方式调用doXXX.当服务器关闭的时候,Servlet就会被销毁,destroy方法就会执行。
    
    Request何时创建和销毁?
    创建:从客户端向服务器发送请求,name服务器就会创建一个request对象。
    销毁:服务器为这次请求做出了响应之后,服务器就会销毁request对象。
    作用范围:一次请求。
    
    ServletConfig对象(了解)
    ServletContext对象(掌握):
    	1、获得文件的MIME类型
    	2、获得全局初始化参数
    	3、存取数据作为域对象使用
    		setAttribute(String name,String value);
    		getAttribute(String name);
    		removeAttribute(String name);
    	4、读取WEB项目的文件
    		getResourceAsStream(String path);
    		getRealPath(String path);
    
    Request:
    	使用request获得客户机的信息:getRemoteAddr(),getMethod(),getRequestURI(),getRequestURL()
    	获得请求参数:getParameter(),getParameterValues(),getParamterMap();
    	作为域对象存取数据:setAttribute(),getAttribute(),removeAttribute();
    
    Response:
    	通过response设置状态码:setStatus(int status);
    	通过response设置响应头:setHeader(String name,String value);
    	通过response设置响应体:getOutputStream(),getWriter();
    
    
    文件下载:
    	设置两个头一个流:
    	Contant-Type		----MIME类型
    		//response.setHeader("Contant-Type",this.getServletContext().getMimeType(filename))
    	Contant-Disposition	----告诉浏览器用下载的方式接受响应
    		//response.setHeader("Content-Dispositon","attrachment;filename=xxxx");
    	InputStream
    重定向:response.sendRedirect("客服端路径");
    转发:	request.getRequestDispatcher("服务端路径").forword(req,resp);
    区别:	转发是一次请求一次响应,重定向两次请求,两次响应
    	转发地址栏不变,重定向会变
    	转发的路径不需要就工程名,重定向需要加工程名
    	转发只能在本网站内部,重定向可以定向到任何网站
    
    中文处理:
    1、get请求有中文:
    String value = new String(value.getBytes("iso-8859-1"),"utf-8");
    2、post请求有中文
    response.setCharacterEncoding("utf-8");
    3、响应有中文(字符流---一定会乱码):
    response.setContant-Type("text/html;charset=utf-8");
    4、响应有中文(字节流---不一定):
    response.setHeader("Contant-Type","text/html;charset=utf-8");
    response.getOutputStream().write("中文".getBytes("utf-8"));
    5、文件下载有中文:
    	String userAgent = request.getHeader("User-Agent");
    		if(userAgent.contains("Firefox")) {
    			filename = base64(filename)
    		} else {
    			filename = URLEncode.encode(filename, "utf-8");	
    		}
    		response.setHeader("Content-Disposition", "attachment;filename="+filename);
    
    
    Cookie:就是将数据保存到客户端浏览器的会话技术
    *从浏览器获取Cookie:request.getCookies();
    *向浏览器回写Cookie:response.addCookie(Cookie cookie);
    
    Cookie的相关API:
    	setPath(String path);---客户端路径
    	setMaxAge(int time); ---有效时长
    	setDomain(String domain);
    Cookie的分类:
    	会话级别的Cookie:会话级别关闭浏览器的时候Cookie就销毁了,默认的分类
    	持久级别的Cookie:设置有效时长,关闭浏览器不会被销毁
    
    Session:就是将数据保存到服务器端的会话技术。基于Cookie回写SessionID的。
    *session存取数据:
    	setAttribute(String name,Object value);
    	getAttribute(String name);
    *Session作用域:
    	session的作用范围:一次会话(多次请求);
    	session的生命周期:
    		创建:第一次调用getSession的时候创建session。
    		销毁:
    			非正常关闭服务器
    			session过期
    			手动调用invalidate方法的时候
    
    
    
    JSP:Java Server Pages(Java服务器端的页面)
    执行JSP的过程:JSP翻译成Servlet,编译这个Servlet的类,生成Class文件,得到执行
    
    JSP的脚本:
    <%!  %>	:翻译成Servlet的中成员内容,定义变量,方法,类---不安全,不建议
    <%    %>	:翻译成Servlet中的service方法内部的内容。定义类,变量
    <%=   %>	:翻译成Servlet中Service方法中的out.print();
    
    JSP的注释:HTML/JAVA/JSP
    
    ***JSP的三个指令:page、include、taglib
    	指令的语法:<%@ 指令名称 属性名称="属性值" 属性名称="属性值" ……%>
    
    **JSP的page指令:设置JSP的
    
    	language	:JSP脚本中使用的语言。现在只能写Java
    	*contentType	:设置浏览器打开这个JSP的时候采用的默认的字符集编码
    	*pageEncoding	:设置文件保存到本地硬盘,以及生成Servlet后,Servlet保存到硬盘上的编码
    	*import		:在JSP中引入类对象,但是import可以出现多次
    	extends		:设置JSP翻译成Servlet之后继承的类
    	autoFlush	:设置JSP的缓存自动刷出。true:自动刷出
    	buffer		:设置JSP的缓冲区大小,默认是8KB
    	session		:设置在JSP中是否可以直接使用session对象。默认值是true;
    	isELIgnored	: 设置在JSP中是否忽略EL表达式,默认值是false不忽略
    	errorPage	:设置错误友好页面的提示;
    	isErrorPage	:通过这个设置显示JSP的错误消息;
    
    **JSP的include指令:指示JSP包含其他页面。
    	<%@ include file="logo.jsp" %>
    	<%@ include file="menu.jsp" %>
    	<h1>BODY部分</h1>
    	<%@ include file="footer.jsp" %>
    
    **JSP的taglib指令:指示JSP引入标签库:
    	<%@ taglib uri="标签的URI的路径" prefix="标签的别名" %>
    
    ***JSP的9大内置对象:
    	内置对象:在JSP中可以直接使用的对象
    
    	* request	HttpServletRequest	getParameter(),setAttribute(String name,Object value);
    	* response	HttpServletResponse	setHeader(String name,String value);getOutputStream();getWriter();
    	* session	HttpSession		setAttribute();getAttribute();
    	* application	ServletContext		setAttribute();getAttribute();
    	* page		Object			toString();wait();
    	* pageContext	pageContext		setAttribute();
    getAttribute();
    	* config	ServletConfig		getServletName();getServletContext();
    	* out		JspWriter		write();print();
    	* exception	Throwable		getMessage();getCause();		设置isErrorPage="true"
    
    page内置对象:	真是对象是Object,就是JSP翻译成Servlet后类的引用
    out内置对象:	out和response.getWriter是不是同一个对象?区别是什么?(out输出的先转到response.gerWriter)(out真是对象是JSPWriter,response获得Writer是PrintWriter。)
    *pageContext内置对象:
    	* 获得其他8个内置对象:编写通用性代码或者框架的时候
    	* 向JSP中的四个域中存取数据:
    	JSP的四个域范围:
    	* PageScope	:当前页面有效
    	* RequestScope	:一次请求范围
    	* SessionScope	:一次会话范围
    	* ApplicationScope:应用范围
    
    
    JSP的动作标签:(列出6个)
    	<jsp:forward page="……" />:用于页面转发
    	<jsp:include />		:用于页面包含(动态包含)
    		****静态包含和动态包含的区别?(<%@ include%> 和 <jsp:include >)
    	<jsp:param />		:用于带有路径的标签下传递参数
    	<jsp:useBean />		:用于在JSP中使用JavaBean
    	<jsp:setProperty />	:用于在jsp中设置JavaBean属性的
    	<jsp:getProperty />	:用于在JSP中获得JavaBean的属性
    
    EL表达式:
    	目的:为了使JSP写起来更加简单。提供了在JSP中简化表达式的方法,减少<%%>
    	表达式:${ EL表达式 }
    	EL的功能:
    		获取数据:(JSP的四个域)
    		执行运算
    		操作WEB开发额常用对象
    		调用Java中的方法:--很小用
    EL获取数据:数组、list、map、对象、对象的集合(.和[]的区别?)
    EL执行运算:逻辑运算、关系运算、三元运算、empty运算
    EL操作WEB开发的常用的对象11个:获取JSP中域的数据(4个:pageScope,requestScope,sessionScope,applicationScope)、接受参数(2个:param,paramValues)、获取请求头信息(header、headerValues)、获取全局初始化参数(initParam)、web开发中cookie(cookie)、web开发中的pageContext(pageContext)。
    
    JSTL:JSP标准标签库,由4个定制标记库(core、format、xml和sql)和一对通用标记库验证器组成,使用必须导包
    
    为什么学习JSTL:JSTL和JSP结合,替换页面中的<%%>
    版本:JSTL1.0:不支持EL表达式。1.1和1.2支持
    
    JSTL的标签库:包含了五类标签
    	*core(核心标签),fmt(国际化标签),xml(xml标签),sql(sql标签),fn(JSTL提供EL函数库)
    
    使用JSTL:
    引入JSTL的相关jar包
    在页面中引入标签库:<%@ taglib uri="" prefix=""%>
    
    JSTL的核心标签的用法:
    	*if
    	*forEach
    JSTL的提供的EL的函数库:
    	${ fn:contains("hello world","hello") }
    	contains,length,toLowerCase,forEach
    	<c:forEach var="i" items='${ fn:split("a-b-c-d-e","-")}'>
    		${ i }
    	</c:forEach>
    
    
    JSP的设计模式:
    	JSP的设计模式一:JSP + JavaBean设计模式:
    	JSP的设计模式二:JSP + Servlet + JavaBean设计模式:MVC模式
    	M;Model
    	V:View
    	C:Controller
    	MVC和EE开发三层结构的关系
    	反射:
    	获得类的字节码对象:Class对象。三种获得方式
    		类名.class;
    		类的实例.getClass();
    		Class.forName();
    	获得构造器:Constructor
    	获得属性:Field
    	获得方法:Method
    
    JDBC的事务管理:
    	事务:指的是逻辑上的一组操作,要么一起成功,要么一起失败
    	事务特性:
    		原子性:不可分割
    		一致性:数据完整性
    		隔离性:一个事务执行不应该受到另一个事务干扰
    		持久性:事务一旦结束,将永远修改到数据库
    	如果不考虑隔离性:脏读、不可重复度、需读
    JDBC进行事务管理:
    	Connection:
    		setAutoCommit(boolean flag);
    		commit();
    		rollback();
    
    MVC架构模式:
    *查询所有的商品:
    在首页上点击【查询所有的商品】链接
    提交到Servlet中:
    	调用业务层-->调用DAO层
    	将商品信息保存到request域中:
    	转发到商品列表的页面
    在商品列表的页面显示商品
    *商品的添加功能:
    在首页上点击【添加】,跳转到添加页面:
    在添加页面输入参数,提交到Servlet中
    在Servlet中:
    	接受参数:
    	封装数据:
    	调用业务层:
    	页面跳转:
    解决是否重复提交的问题:令牌机制(一次性)session
    
    *商品信息的修改:
    在列表页面上点击【修改】:
    提交到Servlet中:根据ID查询该商品,将该商品信息显示到修改页面:
    在修改页面上修改该商品数据,点击【提交】按钮:
    提交到Servlet中:完成商品的修改
    
    *商品的信息的删除:
    在列表页面上点击【删除】:
    提交到Servlet中:
    调用业务层完成删除的操作:
    
    *商品的模糊查询:
    *商品的分页显示:
    分页条:【首页】 【上一页】 [1] [2] [3] [4] [5] 【下一页】 【尾页】
    
    分页类型:
    	 *物理分页:缺点:经常和数据库交互。优点:数据量特别大不会导致内存的溢出;
    	 逻辑分页:
    不同的数据库对分页的语句也是不一样的:
    MySQL:limit
    Oracle:使用sql语句嵌套
    SQL Server:top
    
    
    Ajax和JQuery:
    什么是Ajax:异步的JavaScript And XML
    功能:完成页面的局部刷新,不中断用户的体验
    XMLHTTPRequest:
    	readyState:XMLHTTPRequest的状态
    	onreadstatechange:当XMLHTTPRequest状态发生改变的时候触发一个函数
    	status:获得响应的状态码:200、404、
    	requestText:获得响应的文本数据
    	requestXML:获得响应的XMl的数据
    	**方法:
    	open(请求方式,请求路径,是否异步):异步的去向服务器发送数据
    	send(请求参数):发送请求
    	setRequestHeader(头信息,头得值):处理post请求方式中文乱码的问题
    创建XMLHTTPRequest对象:
    
    (乱入):内省Introspector.getBeanInfo(User.class);
    AJAX的入门:
    	第一步:创建一个新的异步对象
    	第二步:设置对象状态改变触发一个函数
    	第三步:设置后台提交的路径
    	第四步:发送请求
    
    JQuery的AJAX:
    部分方法:
    	Jq的对象.load(路径,参数,回调函数);
    	$.get(路径、参数、回调函数、数据类型);
    	$.post(路径、参数、回调函数、数据类型);
    	$.ajax();
    	serialize();--JQ的AJAX传递参数的时候需要使用的方法
    
    AJAX的响应的数据:
    	文本,一段HTML的数据,XML,JSON
    使用工具生成XML的文件:
    	通常使用xStream工具,将集合,数据,对象转成XML。
    
    JSON:是一种轻量级的数据交换结构。
    数据格式:键值对对象数组
    JSON的生成工具:
    	JSONArray	:将数组或List集合转成JSON
    	JSONObject	:将对象或Map集合转成JSON
    
    Listener $$  Filter
    Listener:就是一个Java类,用来监听其他Java类的状态的变化	用途:主要是用在图形化界面比较多:GUI、Android
    监听器的术语:
    	事件源:指被监听的对象
    	监听器:指的是监听的对象
    	事件源和监听器绑定:
    	事件:指的是事件源的改变
    WEB中的监听器:3类8种
    一类:监听三个域对象的创建和销毁的监听器:
    	ServletContextListener
    	HttpSessionListener
    	ServletRequestListener
    二类:监听三个域对象的属性的变更的监听器(属性添加、移除、替换)
    	ServletContextAttributeListener
    	HttpSessionAttributeListener
    	ServletRequestAttributeListener
    三类监听HTTPSession中的JavaBean的状态码的改变(绑定、解除绑定、钝化、活化)
    	HttpSessionBingdingListener
    	HttpSessionActivationListener
    
    ServletContextListener监听ServletContext对象的创建和销毁:
    contextDestroyed、contextInitialized
    ServletContext对象的创建和销毁:
    	创建:服务器启动的时候,服务器为每个WEB应用创建一个属于该web项目的对象ServletContext
    	销毁:服务器关闭或者项目从服务器移除的时候
    
    HttpSessionListener:监听HttpSession的创建和销毁的监听器:
    sessionCreated\sessionDestroyed
    HttpSession何时创建和销毁的
    	创建:当服务器第一次调用getSession();
    	销毁:三种情况
    
    ServletRequestListener:监听ServletRequest对象的创建和销毁的监听器:
    contextDestroyed、contextInitialized
    request对象何时创建何时销毁:
    	创建:客户端向服务器发送请求一次,服务器就会常见·创建request对象。	
    	销毁:服务器对这次请求做出响应之后就会request对象。
    
    二类:
    attributeAdded、attributeRemove、attributeReplaced
    三类:
    valueBound(绑定)、valueUNbound(解除绑定)
    sessionDidActivate(活化--反序列化)
    sessionWillPassivate(钝化--序列化到硬盘)
    
    Filter:可以过滤从客户端向服务器发送的请求。
    使用:IP过滤、脏话过滤、自动登录、响应压缩……
    过滤器的生命周期:
    	创建:服务器启动的时候
    	销毁:服务器关闭的时候
    FilterConfig:过滤器的配置对象
    FilterChain:过滤器链
    
    配置中的<dispatcher>:
    	REQUEST	:默认值
    	FORWORD	:转发
    	INCLUDE	:包含
    	ERROR	:错误页面跳转(全局错误页面)
    
    通用的字符集编码过滤器:
    	增强request中的getParamter方法:
    		继承:控制这个类的构造
    		装饰着模式:增强的类和被增强的类实现相同的接口,增强的类中获得到被增强的类的引用(缺点:接口中方法太多)
    		动态代理:被增强的类实现接口就行
    
    展开全文
  • 转载:http://eonasdan.github.io/bootstrap-datetimepicker/Options/Bootstrap-datetimepicker 配置详解OptionsAll options that take a “Date” can handle a Date object; a String formatted according to ...

    转载:http://eonasdan.github.io/bootstrap-datetimepicker/Options/


    Bootstrap-datetimepicker 配置详解

    Options

    All options that take a “Date” can handle a Date object; a String formatted according to the given format; or a timedelta relative to today, eg “-1d”, “+6m +1y”, etc, where valid units are “d” (day), “w” (week), “m” (month), and “y” (year). Use “0” as today. There are also aliases for the relative timedelta’s: “yesterday” equals “-1d”, “today” is equal to “+0d” and “tomorrow” is equal to “+1d”.

    Most options can be provided via data-attributes. An option can be converted to a data-attribute by taking its name, replacing each uppercase letter with its lowercase equivalent preceded by a dash, and prepending “data-date-” to the result. For example, startDate would be data-date-start-dateformat would be data-date-format, and daysOfWeekDisabled would be data-date-days-of-week-disabled.

    See the quick reference for an overview of all options and their default values

    autoclose

    Boolean. Default: false

    Whether or not to close the datepicker immediately when a date is selected.

    assumeNearbyYear

    Boolean or Integer. Default: false

    If true, manually-entered dates with two-digit years, such as “5/1/15”, will be parsed as “2015”, not “15”. If the year is less than 10 years in advance, the picker will use the current century, otherwise, it will use the previous one. For example “5/1/15” would parse to May 1st, 2015, but “5/1/97” would be May 1st, 1997.

    To configure the number of years in advance that the picker will still use the current century, use an Integer instead of the Boolean true. E.g. “assumeNearbyYear: 20”

    beforeShowDay

    Function(Date). Default: $.noop

    A function that takes a date as a parameter and returns one of the following values:

    • undefined to have no effect
    • A Boolean, indicating whether or not this date is selectable
    • A String representing additional CSS classes to apply to the date’s cell
    • An object with the following properties:
      • enabled: same as the Boolean value above
      • classes: same as the String value above
      • tooltip: a tooltip to apply to this date, via the title HTML attribute
      • content: the content to display in the day cell, rather than the default (day of month as text)

    beforeShowMonth

    Function(Date). Default: $.noop

    A function that takes a date as a parameter and returns one of the following values:

    • undefined to have no effect
    • A Boolean, indicating whether or not this month is selectable
    • A String representing additional CSS classes to apply to the month’s cell
    • An object with the following properties:
      • enabled: same as the Boolean value above
      • classes: same as the String value above
      • tooltip: a tooltip to apply to this date, via the title HTML attribute

    beforeShowYear

    Function(Date). Default: $.noop

    A function that takes a date as a parameter and returns one of the following values:

    • undefined to have no effect
    • A Boolean, indicating whether or not this year is selectable
    • A String representing additional CSS classes to apply to the year’s cell
    • An object with the following properties:
      • enabled: same as the Boolean value above
      • classes: same as the String value above
      • tooltip: a tooltip to apply to this year, via the title HTML attribute

    beforeShowDecade

    Function(Date). Default: $.noop

    A function that takes a date as a parameter and returns one of the following values:

    • undefined to have no effect
    • A Boolean, indicating whether or not this year is selectable
    • A String representing additional CSS classes to apply to the year’s cell
    • An object with the following properties:
      • enabled: same as the Boolean value above
      • classes: same as the String value above
      • tooltip: a tooltip to apply to this year, via the title HTML attribute

    beforeShowCentury

    Function(Date). Default: $.noop

    A function that takes a date as a parameter and returns one of the following values:

    • undefined to have no effect
    • A Boolean, indicating whether or not this year is selectable
    • A String representing additional CSS classes to apply to the year’s cell
    • An object with the following properties:
      • enabled: same as the Boolean value above
      • classes: same as the String value above
      • tooltip: a tooltip to apply to this year, via the title HTML attribute

    calendarWeeks

    Boolean. Default: false

    Whether or not to show week numbers to the left of week rows.

    _images/option_calendarweeks.png

    clearBtn

    Boolean. Default: false

    If true, displays a “Clear” button at the bottom of the datepicker to clear the input value. If “autoclose” is also set to true, this button will also close the datepicker.

    _images/option_clearbtn.png

    container

    String. Default: “body”

    Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)

    datesDisabled

    String, Array. Default: []

    Array of date strings or a single date string formatted in the given date format

    daysOfWeekDisabled

    String, Array. Default: []

    Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '06' or '0,6' or [0,6].

    _images/option_daysofweekdisabled.png

    daysOfWeekHighlighted

    String, Array. Default: []

    Days of the week that should be highlighted. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: highlight weekends: '06' or '0,6' or [0,6].

    defaultViewDate

    Date, String or Object with keys yearmonth, and day. Default: today

    Date to view when initially opening the calendar. The internal value of the date remains today as default, but when the datepicker is first opened the calendar will open to defaultViewDate rather than today. If this option is not used, “today” remains the default view date.

    This option can be:
    • A date, which should be in local timezone.
    • A string which must be parsable with format.
    • An object with keys yearmonth and day (can’t be set from a data attribute). If the given object is missing any of the required keys, their defaults are:
      • year: the current year
      • month: 0 (Note that it starts with 0 for January)
      • day: 1

    disableTouchKeyboard

    Boolean. Default: false

    If true, no keyboard will show on mobile devices

    enableOnReadonly

    Boolean. Default: true

    If false the datepicker will not show on a readonly datepicker field.

    endDate

    Date or String. Default: End of time

    The latest date that may be selected; all later dates will be disabled.

    Date should be in local timezone. String must be parsable with format.

    _images/option_enddate.png
    <input type="text" class="form-control" data-date-end-date="0d">
    

    Will disable all dates after today.

    forceParse

    Boolean. Default: true

    Whether or not to force parsing of the input value when the picker is closed. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input’s value to the new, valid date, conforming to the given format.

    format

    String. Default: “mm/dd/yyyy”

    The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.

    • d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
    • D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
    • m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
    • M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
    • yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.

    Object.

    Custom formatting options

    • toDisplay: function (date, format, language) to convert date object to string, that will be stored in input field
    • toValue: function (date, format, language) to convert string object to date, that will be used in date selection
    $('.datepicker').datepicker({
        format: {
            /*
             * Say our UI should display a week ahead,
             * but textbox should store the actual date.
             * This is useful if we need UI to select local dates,
             * but store in UTC
             */
            toDisplay: function (date, format, language) {
                var d = new Date(date);
                d.setDate(d.getDate() - 7);
                return d.toISOString();
            },
            toValue: function (date, format, language) {
                var d = new Date(date);
                d.setDate(d.getDate() + 7);
                return new Date(d);
            }
        }
    });
    

    immediateUpdates

    Boolean. Default: false

    If true, selecting a year or month in the datepicker will update the input value immediately. Otherwise, only selecting a day of the month will update the input value immediately.

    inputs

    Array, jQuery. Default: None

    A list of inputs to be used in a range picker, which will be attached to the selected element. Allows for explicitly creating a range picker on a non-standard element.

    <div id="event_period">
        <input type="text" class="actual_range">
        <input type="text" class="actual_range">
    </div>
    
    $('#event_period').datepicker({
        inputs: $('.actual_range')
    });
    

    keepEmptyValues

    Boolean. Default: false

    Only effective in a range picker. If true, the selected value does not get propagated to other, currently empty, pickers in the range.

    keyboardNavigation

    Boolean. Default: true

    Whether or not to allow date navigation by arrow keys.

    Keyboard navigation is not supported at all for embedded / inline mode. Also it’s not working if input element hasn’t focus. This could be an issue if used as component or if opened by showmethod.

    language

    String. Default: “en”

    The IETF code (eg “en” for English, “pt-BR” for Brazilian Portuguese) of the language to use for month and day names. These will also be used as the input’s value (and subsequently sent to the server in the case of form submissions). If a full code (eg “de-DE”) is supplied the picker will first check for an “de-DE” language and if not found will fallback and check for a “de” language. If an unknown language code is given, English will be used. See I18N.

    _images/option_language.png

    maxViewMode

    Number, String. Default: 4, “centuries”

    Set a maximum limit for the view mode. Accepts: 0 or “days” or “month”, 1 or “months” or “year”, 2 or “years” or “decade”, 3 or “decades” or “century”, and 4 or “centuries” or “millenium”. Gives the ability to pick only a day, a month, a year or a decade. The day is set to the 1st for “months”, the month is set to January for “years”, the year is set to the first year from the decade for “decades”, and the year is set to the first from the millennium for “centuries”.

    minViewMode

    Number, String. Default: 0, “days”

    Set a minimum limit for the view mode. Accepts: 0 or “days” or “month”, 1 or “months” or “year”, 2 or “years” or “decade”, 3 or “decades” or “century”, and 4 or “centuries” or “millenium”. Gives the ability to pick only a month, a year or a decade. The day is set to the 1st for “months”, and the month is set to January for “years”, the year is set to the first year from the decade for “decades”, and the year is set to the first from the millennium for “centuries”.

    multidate

    Boolean, Number. Default: false

    Enable multidate picking. Each date in month view acts as a toggle button, keeping track of which dates the user has selected in order. If a number is given, the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded.true equates to no limit. The input’s value (if present) is set to a string generated by joining the dates, formatted, with multidateSeparator.

    For selecting 2 dates as a range please see date-range

    _images/option_multidate.png

    multidateSeparator

    String. Default: ”,”

    The string that will appear between dates when generating the input’s value. When parsing the input’s value for a multidate picker, this will also be used to split the incoming string to separate multiple formatted dates; as such, it is highly recommended that you not use a string that could be a substring of a formatted date (eg, using ‘-‘ to separate dates when your format is ‘yyyy-mm-dd’).

    orientation

    String. Default: “auto”

    A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.

    “orientation” refers to the location of the picker popup’s “anchor”; you can also think of it as the location of the trigger element (input, component, etc) relative to the picker.

    “auto” triggers “smart orientation” of the picker. Horizontal orientation will default to “left” and left offset will be tweaked to keep the picker inside the browser viewport; vertical orientation will simply choose “top” or “bottom”, whichever will show more of the picker in the viewport.

    showOnFocus

    Boolean. Default: true

    If false, the datepicker will be prevented from showing when the input field associated with it receives focus.

    startDate

    Date or String. Default: Beginning of time

    The earliest date that may be selected; all earlier dates will be disabled.

    Date should be in local timezone. String must be parsable with format.

    _images/option_startdate.png

    startView

    Number, String. Default: 0, “days”

    The view that the datepicker should show when it is opened. Accepts: 0 or “days” or “month”, 1 or “months” or “year”, 2 or “years” or “decade”, 3 or “decades” or “century”, and 4 or “centuries” or “millenium”. Useful for date-of-birth datepickers.

    templates

    Object. Default:

    {
        leftArrow: '&laquo;',
        rightArrow: '&raquo;'
    }
    

    The templates used to generate some parts of the picker. Each property must be a string with only text, or valid html. You can use this property to use custom icons libs. for example:

    {
        leftArrow: '<i class="fa fa-long-arrow-left"></i>',
        rightArrow: '<i class="fa fa-long-arrow-right"></i>'
    }
    

    showWeekDays

    Boolean. Default: true

    If false, the datepicker will not append the names of the weekdays to its view. Default behavior is appending the weekdays.

    title

    String. Default: “”

    The string that will appear on top of the datepicker. If empty the title will be hidden.

    todayBtn

    Boolean, “linked”. Default: false

    If true or “linked”, displays a “Today” button at the bottom of the datepicker to select the current date. If true, the “Today” button will only move the current date into view; if “linked”, the current date will also be selected.

    _images/option_todaybtn.png

    todayHighlight

    Boolean. Default: false

    If true, highlights the current date.

    _images/option_todayhighlight.png

    toggleActive

    Boolean. Default: false

    If true, selecting the currently active date in the datepicker will unset the respective date. This option is always true when the multidate option is being used.

    updateViewDate

    Boolean. Default: true

    If false viewDate is set according to value on initialization and updated * if a day in last oder next month is selected or * if dates are changed by setDatesetDatessetUTCDate and setUTCDatesmethods. If multidate option is true the last selected date or the last date in array passed to setDates or setUTCDates is used.

    weekStart

    Integer. Default: 0

    Day of the week start. 0 (Sunday) to 6 (Saturday)

    _images/option_weekstart.png

    zIndexOffset

    Integer. Default: 10

    The CSS z-index of the open datepicker is the maximum z-index of the input and all of its DOM ancestors plus the zIndexOffset.

    Quick reference

    This is a quick overview of all the options and their default values

    OptionDefault value
    autoclosefalse
    assumeNearbyYearfalse
    beforeShowDay 
    beforeShowMonth 
    beforeShowYear 
    beforeShowDecade 
    beforeShowCentury 
    calendarWeeksfalse
    clearBtnfalse
    container‘body’
    datesDisabled[]
    daysOfWeekDisabled[]
    daysOfWeekHighlighted[]
    defaultViewDatetoday
    disableTouchKeyboardfalse
    enableOnReadonlytrue
    endDateInfinity
    forceParsetrue
    format‘mm/dd/yyyy’
    immediateUpdatesfalse
    inputs 
    keepEmptyValuesfalse
    keyboardNavigationtrue
    language‘en’
    maxViewMode4 ‘centuries’
    minViewMode0 ‘days’
    multidatefalse
    multidateSeparator‘,’
    orientation‘auto’
    showOnFocustrue
    startDate-Infinity
    startView0 ‘days’ (current month)
    templates 
    title‘’
    todayBtnfalse
    todayHighlighttrue
    toggleActivefalse
    weekStart0 (Sunday)
    zIndexOffset10

    展开全文
  • 最近在做毕设,同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件,然后自己又在刷题的时候遇到一个这个demo的实现,于是就自己去官网文档上学习了一下,尝试实现这个demo 官方文档:DataTable ...
  • 来自于...使用Ajax对后台进行请求,要求的数据结构以及说明:jquery datatable 1.10.4 分页数据格式[javascript] view plain copy{ "draw": 2, "recordsTotal": 11, ...
  • Bootstrap-table介绍 在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率。Bootstrap-table插件提供了非常丰富的...
  • Bootstrap Table数据表格的使用指南

    千次阅读 2020-02-08 11:01:11
    Bootstrap-Table: 在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,Bootstrap-Table是一款非常好用的开源表格...
  • daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件 这个插件很好用 也很容易操作 引入相关插件 &lt;!-- 需要引用的依赖库 --&gt; &lt;script type="text/javascript&...
  • jQuery Datatable插件 表格基本初始

    万次阅读 2016-11-15 16:58:39
    jQuery Datatable插件 表格基本初始本文介绍jQuery Datatable插件的表格初始的基本使用,Datatable是目前使用度比较高的前端表格界面插件,可以很方便地创建响应式的表格,容易实现表格的翻页、过滤、排序等功能...
  • MiniUI、Easyui、layui与Bootstrap对比

    千次阅读 2019-07-20 15:18:07
    MiniUI、Easyui、layui与Bootstrap对比MiniUIEasyuilayuiBootstrap 最近要做一个后端的系统,boos让找个框架给他,顺道就写了一个这个。首先声明一下自己并不是专门做前端的不对的地方请评论指出,而且大多此文章以...
  • jquery datatables 初始配置归纳

    千次阅读 2017-10-16 16:56:18
    稍稍归纳了一下datatables的初始配置方法,更为详细的配置及用法请参考https://datatables.net/examples/index var oTable = $('#table').dataTable({ "bProcessing" : true, //DataTables载入数据时,是否...
  • 兼容IE8浏览器,Plupload js文件上传插件:支持多文件上传和上传进度。使用pluploadQueue(settings)实例的uploader的刷新、重新上传、地址动态修改。
  • 什么是Datatables? Datatables是一款jquery表格插件。...目前最新版本为1.10.19。 分页,即时搜索和排序(支持前端或后端分页) 几乎支持任何数据源:DOM...支持不同主题 DataTables, jQuery UI, Bootstrap, Foundati...
  • 基于jQuery+JSON联动效果,直接copy下来就可以应用了,完美测试过 ()"> <select class="serviceType" id="serviceType" name="serviceType"></select>
  • 本博文源于jQuery基础,旨在实现折叠卡片制作。
  • 第一次面试,没怎么准备,基础也学的不太好,简历是之前做的前端的简历,所以去面试时,面试官是Java组的项目经理,也很无奈,不知道问啥, 总结一下问题,都是偏前端方向的问题,面试官很nice,指出了我的很多问题...
  • datatables使用教程

    万次阅读 2019-08-01 18:40:14
    title: bootstrap-datatables使用教程 date: 2018-12-18 12:00:00 +0800 update: 2018-12-20 15:00:00 +0800 author: me cover: https://ws1.sinaimg.cn/large/006jIRTegy1fyd7q1vnfgj31z4140k2q.jpg tags: 前端 ...
  • 关于组件开发

    2019-06-16 21:01:37
    2019独角兽企业重金招聘Python工程师标准>>> ...
1 2 3 4 5 ... 9
收藏数 164
精华内容 65
关键字:

network