jquery ui dialog【jQueryuidialog一闪就没了】 收藏 0

jQuery WeUI微信公众号开发的瑞士军刀

如果你有开发过微信公众号的经历，想必一定了解WeUI这个微信的前端框架！当然不了解也没关系，现在小编介绍给你看~~

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：

• 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站

• 便捷获取快速使用，降低开发和设计成本

• 微信设计团队精心打造，清晰明确，简洁大方该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已经在 GitHub 上开源。访问 http://weui.github.io/weui/ 或微信扫码即可预览。

当然还有其他样式这里就不一一介绍了，毕竟JQuery WEUI才是今天的重头戏~

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共近30 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。

jQuery WeUI 的定位正如 jQuery 的定位：做一把锋利易用的小刀，而不是做一个笨重的大炮。

• 简单易用，无上手难度

• 丰富强大的组件库，并且还在不断完善中

• 轻量，无限制，可以结合任何主流JS框架使用，比如 `Vue, Angular, React` 等

• 高性能的 CSS3 动画，低端手机上依然可以较流畅运行

• 详尽完善的官方文档

• 标准稳定的API，基本可以保证版本透明更新

• 基于 MIT 协议发布，免费开源

那么这么优美的东西，我们该怎么使用呢？

看到这么优美的东西，会不会激动呀~反正小编是禁不住的尝试了下，比如他的时间选择器组件，

就是这么优美~

这里展示几个小编用WeUI做的页面~

学习web前端开发，需要掌握哪些知识？

可以按照我的教学框架学习，能都掌握也就满足企业目前的人才需求。

一、PC端页面重构

1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；

2、HTML5核心元素及布局应用；

3、CSS3核心属性及布局应用；

4、图形、图像软件的使用（PS,FW,AI）；

5、浏览器兼容及解决方案；

6、图片整合、滑动门及宽高自适应等应用技术；

7、初步接触Javascript。

二、PC端交互开发（原生JS）

1、Javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；

2、DOM操作和BOM操作；

3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；

4、Ajax动态读取数据、异步操作、与DOM、JSON的结合使用；

5、各种主流浏览器兼容性处理；

6、单例、工厂、代理、观察者等设计模式；

7、ECMA6.0新特性介绍。

三、PC端交互开发（JQuery）

1、初识jQuery、jQuery的优势、jQuery框架核心功能、容易混淆的几个概念；

2、jQuery各种选择器的使用，及选择器的应用优化；

3、Dom节点操作、插入、删除、复制、移动节点等操作；

4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；

5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；

6、表单开发，设计可用性表单、表单验证、增强型表单；

7、Ajax、XMLHttpRequest 基础、jQuery Ajax、工具函数、缓存；

8、在jQuery中编写插件、插件扩展、插件应用、jQuery.pagination分页、jQuery.qtip信息提示、jQuery.artDialog弹出层、jQuery.jscrollpane滚动条

9、理解模块式开发，以及requirejs插件的使用。

四、PC项目实训

1、前端开发框架-Bootstrap；

2、CSS预处理器-SASS；

3、分布式版本控制系统-GIT；

4、了解项目需求，项目流程；

5、了解项目管理，模块分配，项目时间预估；

6、了解产品周期，参与团队协作；

7、综合运用HTML+CSS,JS,JQ, Bootstrap,SASS,JQUERY UI, jquery easyui等技术，完成大型PC端项目开发。

五、HTML5+CSS3 精讲

1、HTML5与HTML4的区别, 表单域增强元素；

2、CSS3选择器, 文字与字体相关样式；

3、CSS3中的变形处理；

4、css3中的过度动画和关键帧动画；

5、弹性盒与媒体查询；

6、本地存储，本地缓存；

7、使用Canvas，svg绘制图形；

8、多媒体播放器开发 、workers。

六、WebAPP开发

1、移动端切图（viewport/meta，.Rem/vw的使用，iconfont，flexbox详解，移动web特别样式处理）；

2、页面交互（Tap，touch，ECMAScript 5，ECMAScript 6）；

3、前端工程（gulp，webpack）；

4、移动端常用框架（css framework，Zepto，iScroll/lazyload，swiper）；

5、css framework + SPA framework + Zepto + iScroll + swiper 构建WebApp；

6、微信场景项目。

七、HybridApp 开发基础

1、Phonegap

1 ) HybridApp介绍(独立App项目，嵌入式App项目，嵌入微信项目)

2 ) 工具与环境搭建

3 ) WebviewJsBridge(扫一扫，图像选择与上传，加速器，地理定位，通讯录，通知)

4 ) 构建，打包与发布

5 ) Hybrid里页面测试

2、微信接口开发

1 ) 熟悉WebAPP嵌入微信流程

2 ) 本地开发环境搭建与测试

3 ) JS-SDK使用

4 ) WebAPP X5浏览器兼容

八、Angular+ionic 框架

1、AngularJS

1 ) 基础知识（ng-app,Modules,Controller,$apply,$watch）

2 ) 指令(ng-repeat,ng-class,ng-show,ng-hide)

3 ) 过滤器(date,limitTo,filter)

4 ) 表单(NgModelController，表单验证)

5 ) 服务（自定义服务，Angular提供的服务：$log,$timeout,$q,$http）

6 ) 其他（Controller as 语法，安全的依赖注入方法）

7 ) directive（指令，组件）

8) ng-router

2、ionic基础

1 ) ionic css布局

2 ) ionic js指令布局

3 ) ionic路由 页面切换

4 ) ionic-tabs

5 ) ionic侧边栏ion-side-menus

6 ) ionic列表 ion-list

7 ) 上拉下载更多与下拉刷新

分享个人博客皮肤

我真正开始写博客也有一年了，记得最开始写博客之前做的第一件事就是自定义皮肤样式，还为此写过一篇博文《博客园页面设置》。当然从现在的我看那个时候的我是那么的菜，也许一年之后看现在的我也会同样的想法（其实这样也挺好的，证明自己进步了）。为什么要自定义皮肤样式？当然是为了编写出来的博文让人更有阅读欲，自己看着也舒服。很多时候没有一个好的皮肤样式也会成为我们不写博文的一个借口《我们为什么应该坚持写博客》。

其实，很多时候我是很懒的。不是实在看不下去了一般我也不会去动原来的样式。早就有写这篇博文的冲动，因为懒一直拖到现在。现在大冷天的周末躺在被子里面实在不想起床，拿着手机逛着博客园。可惜的是阅读体验非常的不好（我并没有装客户端）,有的甚至无法阅读。实在是受不了，今天决定编写此文，大家有空都让自己的博客兼容移动端吧。其实，我想很多园友并不是不会，也只是因为懒才没有兼容（分分钟的事，为了你的读者。）。本文最主要的目的就是想发动大家都来使用自定义样式来兼容移动端，顺便把自己一些其他自定义也分享了。

兼容移动端，其实非常简单，要做的事情也不多。在《一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）》文中我已经分析过了，今天再次分析下吧。

使用过bootstrap的同学都知道，必须在head标签内加上 <meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”> （参数1：设置屏幕宽度为设备宽度，参数2：缩放值为1。这样做是为了防止根据不同屏幕的像素密度对你的页面进行缩放），然我们博客园并没有默认加上这个meta。所以，我们只能通过javascript动态加上去了。

在移动端显示最大的问题应该就是屏幕太小，导致有些内容不能完全显示吧。我们可以让其左右滚动。

直接暴力决绝，任何元素只要溢出都让自动滚动。

如此简单的两步就实现了移动端的兼容，容易吧。所以，同志们都来兼容移动端吧。我们开始吧：

2.javascript部分的代码

$(\”head\”).prepend(\”<meta name=\’viewport\’ content=\’width=device-width, initial-scale=1\’>\”);

3.css部分的代码

View Code

效果图：

效果图：

尽量选多点显示的评论量。

2.固定最新评论的区域大小，并让其溢出内容隐藏。

3.用javascript动态改变滚动条位置。

很多人问我头像怎么出来的，其实你知道仔细观察过就会发现默认已经加载了图像，只是没显示出来而已。以dudu的博文评论为例：

然后我们在利用javascript动态组装就可以了。

其实这只是一张图片而已，在textarea取的焦点时隐藏背景图片。

1.设置类样式（背景图）

2.javascript添加类

日积月累，如果我们写的博文过多不方便查找时，可以搜索标签。

1.通过读取页面http://www.cnblogs.com/zhaopei/tag的所有标签存在隐藏域。

2.添加到Html5中的自动补全控件

用法（例）：

我们还可以使用必应站内搜索：http://cn.bing.com/search?q=js+site:cnblogs.com/zhaopei把最后的zhaopei修改成你自己的博客id就可以了。

我们在开通js权限的时候，我想大家应该都尝试过alert函数。发现没有效果，还以为是没有开通或是哪里出问题了。其实只是屏蔽了alert而已。

早在IE浏览器如果来个死循环alert，估计就只能杀死页面进程了，不然没完没了。我想就是因为这个原因，博客园才禁用alert的吧。看了其实只是把alert用console.log的方式实现了。代码应该是(猜的)：

这样你 alert(\”123\”); 就会以日志的形式输出了。不信你试试。

可以有时候我们就想有弹出框的效果怎办，比如之前写javascript的学习记录，就需要大量的弹出框效果。如：

我是怎么实现的呢？其实就和当时他们屏蔽alert的形式就可以了。

再次覆盖alert的定义就可以了。

注意这里的dialog就是jqeruy ui中的弹出框。（有现成的，自己也就懒得去实现了）,所以还需要引入jqeruy ui的js和css

有了弹出框，我们就可以添加执行代码区域框了。

搞定，这就实现了上面的效果图了。测试：

还有一些自定义的东西这里就不一一分析了，只要自己想要的效果多试试自然可以慢慢搞定的。如：页首推荐文章三篇、自动加载阅读目录。

这里给出我的样式代码下载。

注意：

1.我是在下面皮肤基础上修改的。你如果要使用我的样式，先选择这个默认皮肤。

2.请不要试图引用新的jqeruy进去，否则你的博客会有你想不到的问题。（因为博客园里面有基于Jquery的插件）。

（当然，你也可以在评论区分享你的自定义样式。）

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com