vux中实现自定义皮肤

有时候我们需要根据自己的需要对 weui默认的颜色进行修改,如果在每个单面里修改的过过于麻烦,我们可以使用一个less配置文件来实现对默认配置进行重置。

修改 webpack.base.conf.js 文件,找到

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style', ]
})

修改如下:

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {
      name: 'less-theme',
      path: 'src/theme.less'
    }]
})

然后在项目的 src 目录里创建文件 theme.less,文件内容写为

@button-primary-bg-color: #FC4A26;

然后重启服务即可。

CSS3 利用@media screen实现网页布局的自适应,样式顺序

利用@media screen可以适应不同屏幕大小,做出相应的界面调整;

在css中@media (min-width: 768px)表示最小是768也就是>=768;

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

 

另外也支持混合写法

@media screen and (min-width: 960px) and (max-width: 1199px) { }

注意下面写了 and 关键字,and后面和左括号中间必须有一个空格,否则样式不生效。

bootstrap自动完成插件Typeahead.js的用法之ajax请求

官方对Typeahead.js的介绍太简单了,对于新手来说有些吃力,项目中使用了这个插件,困惑了两天,终于才搞定它的ajax用法。官方示例虽然可以使用,但从remote url 获取数据的时候,无法传递过多的自定义参数,如要根据省份、城市信息来获取当前城市的小区信息,这个时候我们就要想办法把省份和城市信息也同时发给后端才可以。这样可以过滤大部分的无用信息,产少数据量的产生。


js代码

$(function(){	
/*
	var filterResult = new Bloodhound({
		datumTokenizer: Bloodhound.tokenizers.whitespace,
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		initialize: false,
		remote: {
			url: '/getCommunityList?province_code=' + $("#province_code").val() + '&q=%QUERY',
			wildcard: '%QUERY'
		}
	});
*/	
	
	$('#community_name').typeahead({
			highlight: true,
			hint: true,
			minLength: 1
		},
		{

			name: 'result-list',
			limit: 10,
			async: true,
			source: function (query, processSync, processAsync) {
					//processSync(['This suggestion appears immediately', 'This one too']);
					var params = {
						province_code: $("#province_code").val(),
						city_code: $("#city_code").val(),
						area_code: $("#area_code").val(),	
						q: query
					};
					
					if (params.province_code == '' || params.city_code == '' || params.area_code == '' || params.q == '') {
						return false;	
					}
					
					$.post('/getCommunityList', params, function(json) {
						if (json.status == '0') {
							layer.msg(json.info);	
						} else {
							return processAsync(json.data);	
						}
					});
                },
			display:function(item){
						return item.name
					},
			templates: {
			  suggestion: function (item){
							return '

' + item.name + '

'; }, notFound: '
未找到小区,请确认区域信息!
', header: '

可使用键盘↑↓选择。

', // footer: '

支持剪头移动选择项

' } } ); //结果项被选中事件 $('#community_name').bind('typeahead:select', function(ev, suggestion) { $("#address").html(suggestion.address); // console.log(suggestion); }); //鼠标移动到选择项事件 $('#community_name').bind('typeahead:cursorchange', function(ev, suggestion) { // console.log(suggestion); }); $('#community_name').bind('typeahead:autocomplete', function(ev, suggestion) { console.log(suggestion); }); })

注意上面的 async: true 配置,还有source回调函数要使用三个参数。

pushState + Ajax 技术

有时间我们要实现动态修改URL地址,同时更新部分页面内容,但不刷新整个页面,这种情况下用就需要用到一些pjax技术了。

window.history.replaceState 和 window.history.pushState 类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适, 两者的参数是完全一样的。

window.history.replaceState(state, title , url) // “页面标题”目前浏览器暂不支持

state:一个与指定网址相关的状态对象{},popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。

title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。

url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

highcharts中对”另存为”进行汉化

$(function () {   
    var chart = new Highcharts.Chart({   
        chart: {   
            renderTo: 'container'  
        },   
       lang{   
                  printChart:"打印图表",
                  downloadJPEG: "下载JPEG 图片"  
                  downloadPDF: "下载PDF文档"  
                  downloadPNG: "下载PNG 图片"  
                  downloadSVG: "下载SVG 矢量图"  
                  exportButtonTitle: "导出图片"  
      },  
  .....
  })
})

Vue.js学习资料

在学习vue前,建立先了解一下 webpack https://fakefish.github.io/react-webpack-cookbook/index.html

官方网站(中文版):http://cn.vuejs.org/
构建大型应用使用组件 Vue-router: https://github.com/vuejs/vue-router
网络通讯插件Vue-resource:https://github.com/vuejs/vue-resource
单元测试karma:http://karma-runner.github.io/0.12/index.html 

https://cn.vuejs.org/
https://cn.vuejs.org/v2/api/
https://router.vuejs.org/zh-cn/
https://vuex.vuejs.org
https://vue-loader.vuejs.org/zh-cn/
https://ssr.vuejs.org

https://github.com/jsfront/src/blob/master/vuejs.md

==============

Vue快速入门:https://segmentfault.com/a/1190000003968020
Vue.js基本语法的介绍:https://segmentfault.com/a/1190000004012600

 

jQuery.extend和jQuery.fn.extend的区别-转

jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别.

1. 我们先把jQuery看成了一个类,这样好理解一些。

jQuery.extend(),是扩展的jQuery这个类。

假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人…..等能继承这个技能(方法)了。

可以如下图这样写着:

jquery-1

Continue reading

JavaScript垃圾回收机制

一、垃圾回收的必要性

下面这段话引自《JavaScript权威指南(第四版)》

  由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。

这段话解释了为什么需要系统需要垃圾回收,JS不像C/C++,他有自己的一套垃圾回收机制(Garbage Collection)。JavaScript的解释器可以检测到何时程序不再使用一个对象了,当他确定了一个对象是无用的时候,他就知道不再需要这个对象,可以把它所占用的内存释放掉了。例如: Continue reading

如何理解react中虚拟DOM?

http://www.zhihu.com/question/29504639

中间会有一次用diff生成的补丁操作。这样理解起来很容易的,和git的patch一样。最终render的为原来dom的差异部分DOM,详细见:http://www.infoq.com/cn/articles/react-dom-diff

可见Infoq视频 http://www.infoq.com/cn/presentations/pracitise-of-reactjs

http://study.163.com/course/courseLearn.htm?courseId=1262004#/learn/video?lessonId=1507023&courseId=1262004