这里面介绍下H+后台主题UI框架里面插件的应用,不过都是最最简单最初级的功能。主要有日历插件,input单选多选(icheck)插件,input下拉搜索(chosen)插件。

一、日历插件

  有如下几种应用的形式:

  (一)

  

  1、首先,需要引入laydate.js,而且,只需要引入js即可。

  2、在script里面粘贴如下代码:

【外部js调用】
<input id="hello" class="laydate-icon"> //是在html里面的内容,也就是目标元素。
<script>
laydate({
elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event,则按照默认的click
});
</script>

  3、【图标触发日期】

【图标触发日期】
<input id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>

  (二)

  

  1、首先,需要引入laydate.js,而且,只需要引入js即可。

  2、在script里面粘贴如下代码:

//用哪个粘哪个。
【自定义日期格式】
<div id="test1" class="laydate-icon"></div> //我是HTML里面的。
<script>
laydate({
elem: '#test1',
format: 'YYYY/MM', // 分隔符可以任意定义,该例子表示只显示年月
festival: true, //显示节日
choose: function(datas){ //选择日期完毕的回调
alert('得到:'+datas);
}
});
</script> 【日期范围限定在昨天到明天】
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
elem: '#hello3',
min: laydate.now(-1), //-1代表昨天,-2代表前天,以此类推
max: laydate.now(+1) //+1代表明天,+2代表后天,以此类推
});
</script>

  (三)

  下述代码复制粘贴即可

开始日:<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>  //我是HTML里面的。
结束日:<li class="laydate-icon" id="end" style="width:200px;"></li> //我是HTML里面的。
<script>
var start = {
elem: '#start',
format: 'YYYY/MM/DD hh:mm:ss',
min: laydate.now(), //设定最小日期为当前日期
max: '2099-06-16 23:59:59', //最大日期
istime: true,
istoday: false,
choose: function(datas){
end.min = datas; //开始日选好后,重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
elem: '#end',
format: 'YYYY/MM/DD hh:mm:ss',
min: laydate.now(),
max: '2099-06-16 23:59:59',
istime: true,
istoday: false,
choose: function(datas){
start.max = datas; //结束日选好后,重置开始日的最大日期
}
};
laydate(start);
laydate(end);
</script>

二、iCheck插件

样式是这样:

  1、首先,需要引入js和css。

  

  

  2.在js里面写上

  

  green,就是H+自带的上面例子的绿色。下面的代码就是上面举例子的图片的代码。

三、input下拉搜索(chosen)插件。

先看下效果:点击会出现搜索框,可在里面输入要搜索的信息,适合信息量大的搜索输入。

  1、引入css和js

  

  

  

H+后台主题UI框架---整理(三)的更多相关文章

  1. H+后台主题UI框架---整理(二)

    本篇文章是针对H+后台主题UI框架的整理的第二部分.主要只有一个point.如下: 其代码如下: <div class="ibox float-e-margins"> ...

  2. H+后台主题UI框架---整理(一)

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  3. H+后台主题UI框架---整理

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  4. H+ 后台主题UI框架

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今天得到了一个非常完美的后端管理系统框架:H+ 后台主题UI框架 H+ 后台主题UI框架 H+是一个完全响应式,基于Bootstrap3.3.6最新 ...

  5. 游戏UI框架设计(三) : 窗体的层级管理

    游戏UI框架设计(三) ---窗体的层级管理 UI框架中UI窗体的"层级管理",最核心的问题是如何进行窗体的显示管理.窗体(预设)的显示我们前面定义了三种类型: 普通.隐藏其他.反 ...

  6. 中小后台系统UI框架--EasyUI

    后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...

  7. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  8. 前端UI框架整理

    JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...

  9. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. Java面试必会知识点

    1.== 和 equals()比较: (1)== 是运算符,equals()是Object中定义的方法: (2)== 比较的是 数值 是否相同,基本类型比较数值,引用类型比较对象地址的数值:且变量类型 ...

  2. 【bzoj3282】Tree

    LCT模板题: 话说xor和的意思是所有数xor一下: #include<iostream> #include<cstdio> #include<cstring> ...

  3. css3的渐变效果

    1.css3 渐变的属性 例子: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ back ...

  4. 自定义android 音乐通知栏 ——可伸缩扩展

    Android custom notification for music player Example   In this tutorial, you will learn how to creat ...

  5. C#方法参数总结

    C#中方法的参数的四种类型 C#中方法的参数有四种类型:       1. 值参数类型  (不加任何修饰符,是默认的类型)       2. 引用型参数  (以ref 修饰符声明)       3. ...

  6. UVA-10125(中途相遇法)

    题意: 给定一个整数集合,找出最大的d,使得a+b+c=d,a,b,c,d是集合中不同的元素; 思路: 如果单纯的枚举a,b,c的复杂度是O(n^3)的,为了降低复杂度,可以先把a+b的情形都找出来, ...

  7. Gym - 100342J:Triatrip(Bitset加速求三元环的数量)

    题意:求有向图里面有多少个三元环. 思路:枚举起点A,遍历A可以到的B,然后求C的数量,C的数量位B可以到是地方X集合,和可以到A的地方Y集合的交集(X&Y). B点可以枚举,也可以遍历.(两 ...

  8. maven(二)创建一个maven的web项目中解决Cannot change version of project facet Dynamic web module to 2.5

    我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的,而一 ...

  9. 微信小程序开发之https从无到有

    本篇不讲什么是https,什么是SSL,什么是nginx 想了解这些的请绕道,相信有很多优秀的文章会告诉你. 本篇要讲的在最短的时间内,让你的网站从http升级到https. 开始教程前再说一句:ht ...

  10. centos7命令行模式安装&&配置_br0+kvm+虚拟机+添加硬盘+快照及恢复

    KVM创建虚拟机步骤 Submitted by zhaoley on October 18, 2016 - 10:43am 测试环境: 1: 43.243.130.89, CentOS Linux r ...