datatime组件jq

2024-11-02

JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log("hello~"); } }); $.sayHello(); 2.$.fn 向JQ添加新方法(这次选择这种方法) $.fn.blue=function(){ this.css("background","blue"); } $("div&qu

3d轮播图——类似酷狗的轮播

说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层出不穷,其实它们看着都很炫酷,但实际实现的原理很简单,我们来试着扒一扒看看: 以下我要说的轮播图呢,是这样的: 那具体是怎么实现的呢? 先给你看张图,看似很炫酷的轮播图实际上的这样的: 或者说是这样的: 好了,它跟以往的拖ul或上浮下沉不同,它最大的特点是样式是被保存起来了,再在下一个规定好的时间帧

手摸手教你bootstrap定制

老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内心是抵触的,在讨论上,我也提出了如下几个问题: 1.栅格化布局不支持小数点.(若UI设计的不合理,算出来可能就是col-md-7.5,但bootstrap不支持小数点) 2.bootstrap核心优势是响应式布局,目前需求是PC适配,有点大材小用.(事实上是组长需求弄错了,项目要求是多端适配响应式布

看JQ时代过来的前端，如何转换思路用Vue打造选项卡组件

前言在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来,正文从这开始~ 先来看一下用Vue写的选项卡组件在浏览器上的展示效果: 其实,你在浏览器上看到的UI界面效果也就是那么回事,中规中矩.当点开Chrome的Devtools下面的Elements选项,你看到的dom节点其实和jQuery的dom节点如出一辙,不同的是,现在你看到的dom树是在Vue组件

jq 自定义标注小组件 $.widget

html 部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

基于JQ的自定义弹窗组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于JQ的自定义弹窗组件</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" h

react随笔-1(为什么在react使用jq无法正确渲染组件位置)

今天心血来潮,打开了sublime想玩玩react,然后大家都知道的先引入一大串就是在百度静态资源库里找到的. 然后贴html代码对的,没错,就这么一行,毕竟只是测试嘛然后js代码大家一定要注意,在script的开头标签里,一定要注明,否则浏览器会报错,解析不了. 就按照这样的代码,照理来说应该没问题吧. 但是不知道为什么,浏览器就是出不来这样的效果.并且还给我报这样的错误找了半天才发现,在react中的ReactDOM.render()方法中有两个参数,第一个是要渲染的组件,第二个必

jq demo 点击评分组件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

MUI开发APP，scroll组件，运用到区域滚动

最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果如下: 这里面需要注意到的地方就是,头和底是固定的,但是中间的部分呢,由于要设置24小时的内容,从图中可以看到,只显示了03:00~13:00的内容,剩下的内容没显示出来.这里面,我们就需要用到区域滚动了,就是保持头和底不动,中间滚动,所以,我们就要用到MUI的scorll组件,根据MUI官网的介绍

列表组件抽象（2）-listViewBase说明

这是我写的关于列表组件的第2篇博客.前面的相关文章有: 1. 列表组件抽象(1)-概述 listViewBase是列表组件所有文件中最核心的一个,它抽象了所有列表的公共逻辑,将来如果有必要添加其它公共的逻辑,都可以考虑在这个类中处理.它主要做的事情包括:初始化,如排序组件初始化,分页组件初始化,模板管理引擎初始化,事件绑定和请求发送及处理等.这个文件看起来比较长,有300度行,但是非常好理解.下面我会把它的每个要点内容一一说明. 源码地址:https://github.com/liuyunzhu

C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码）

前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5842030.html BootstrapHelper系列文章目录 C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二) C

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

jquery技巧之让任何组件都支持类似DOM的事件管理

本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样,虽然在最后当你看到这个小技巧的具体内容时,你可能会觉得原来如此或者不过如此,但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制,那开发出来的组件一定会有更大的灵活性和扩展性,而且我也是第一次使用这种方法(见识太浅的原因),觉得它

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

分离的思想结合单链表实现级联组件：CascadeView

本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图.虽然这是个很常见的功能,但是本文的实现逻辑清晰,代码好理解,脱离了省市级联这样的语义,考虑了表现与行为的分离,希望本文的内容能够为你的工作带来一些参考的价值,欢迎阅读和指正. 演示效果(代码下载,注:该效果需要http才能运行,另外效果中的数据是模拟数据,并不是后台真实返回的,所以看到的省市县的下拉数据都是一样的)

多步骤多分步的组件StepJump

最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这种功能很好做,就跟tab页的实现原理差不多,真做下来才发现,这里面的相关逻辑还是挺多的(有可能是我没想到更好地办法~),尤其是当这个功能跟表单,还有业务数据的状态结合起来的时候.我把这个功能相关的一些逻辑抽象成了一个组件StepJump,这个组件能够实现纯静态的分步切换和跳转,以及跟业务相结合的复杂

JS组件系列——封装自己的JS组件，你也可以

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——使用HTML标签的data属性初始化JS组件

前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的

bootscript/javascript组件

javascript组件 (1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件. bootstrap框架里的轮播图,他有自己的js文件. JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.j

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期