标签归档:jquery

【转】值得收藏的14款响应式前端开发框架

前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。

本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。

使用这些前端框架,有如下好处:

 

  • 跨浏览器。这一点已被证实。
  • 一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。
  • 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
  • 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

 

InK


Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。

 

  • HTML&CSS:布局、导航、排版、图标、表单、提示框、表格
  • JS:Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为(停靠、折叠、关闭)
  • 其他:Sass Mixins

 

GroundworkCSS Beta


GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

 

  • HTML&CSS:网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
  • JS:导航、制表符(Tab)、提示框、Cycle2
  • 其他:Sass Mixins

 

Ivory


这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。

 

  • HTML&CSS:网格、排版、表单、按钮、提示框、页码、面包屑导航(breadcrumb)、列表、表格
  • JS:提示框、制表符(Tab)、切换开关(Toggle switch)、折叠

 

ZURB


Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

 

  • HTML&CSS:网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航(breadcrumbs)、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
  • JS:下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局(通过转换图片大小来实现)、旅游导航、麦哲伦全局导航(Magellan Sticky Nav)、Orbit图片滑动幻灯片插件等
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SCSS Mixin

 

Grumby


Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。

 

  • HTML&CSS:网格、表单、按钮、导航、标签、Entypo图标
  • JS:下拉、浮窗、制表符(Tab)、开关与转换(Toggles & Switches)
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SASS和Compass

 

HTML KickStart


该框架集合了HTML5、CSS和JavaScript,帮助开发人员快速开发Web产品。它覆盖了所有UI组件,同时也包含一些有用的JavaScript插件。

 

  • HTML&CSS:网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单
  • JS:菜单、代码高亮插件、制表符(Tab)、幻灯片播放、表单验证
  • 其他:CSS帮助文档

 

Maxmertkit


Maxmertkit拥有完整的文档,包含大量实例,并且提供了拖拽生成代码的功能。

 

  • HTML&CSS:网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示
  • JS:按钮、旋转木马、通知、弹出框、滚动条、制表符(Tab)
  • 其他: Sass、Coffee脚本语言

 

Twitter Bootstrap


大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件,Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

 

  • HTML&CSS:网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏
  • JS:模态窗口(Modals)、提示效果(Tool Tips)、“泡芙”效果(Popovers)、滚动监控(Scrollspy)、旋转木马(Carousel)、输入提示(Typeahead)等等。
  • 其他:定制器(Customizer)、 LESS CSS

 

Skeleton


Skeleton 是一个小的JS和CSS文件集合,可帮你快速开发漂亮的网站,适合各种屏幕设备,包括手机。Skeleton基于960 Grid开发,是一个UI框架。

 

  • HTML&CSS:GRid、排版、按钮、表单、媒体查询(Media Queries)

 

Kube


Kube是一款最小化的,支持响应式的前端框架,包括一个简洁的CSS文件,用于方便地创建响应式布局,包括了两个JS文件来完成Tab以及页面的按钮操作。

 

  • HTML&CSS:排版、网格、表单、表格、按钮、导航、图标
  • JS:按钮、制表符(Tab)
  • 其他: LESS CSS

 

Helium


Helium是一个前端响应式Web框架,使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation,事实上,Helium使用了两者不少的代码。但与这两个框架不同的是,Helium设计更加轻量级,而且更容易修改。Helium只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。

 

  • HTML&CSS:网格、按钮、排版、表单
  • JS:下拉、表单验证
  • 其他:Sass、Compass

 

The Markup Framework


Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

 

  • HTML&CSS:布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单
  • JS:没有JavaScripts,只有单纯的CSS

 

Topcoat


TopCoat是一套免费的开源UI元素类库,整套类库不使用任何JavaScript,而是使用CSS和HTML来生成。

 

  • HTML&CSS:图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
  • JS:没有JavaScripts,只有单纯的CSS

 

PureCSS


Pure是一个相当小的框架,压缩及最小化后仅有5.7KB。它没有使用任何JavaScript,只是HTML和CSS。该CSS框架为响应式布局,采用模块化结构,每个模块的样式可以单独使用。

 

  • HTML&CSS:网格、排版、表单、按键、表格、菜单
  • JS:没有JavaScripts,只有单纯的CSS
  • 其他:程序皮肤制作工具(Skin Builder)、YU 库。

 

结论

根据你的需要,选择可以与设计相匹配的框架。我们不应该根据框架来构建网站,因为它会很大程度上限制设计者的思维。

如果前端设计/布局不是那么重要,那么我们可以选择使用某一框架。

原文来自:queness.com

jquery ajax请求缓存问题解决

当通过jquery来做一个ajax请求的时候默认在IE下会使用浏览器的缓存,当前我遇到的问题如下:

请求:***/delete?id=1时不能删除,因为他有子节点,或者有条件不满足,当我把子节点删除,或者调整为可删除时,再请请求浏览器就自动的返回304

解决办法:

1. 链接上加上时间,如:***/delete?id=1&t=time

2.把jquery的cache设置为false

data: 'id=1',
cache:false,
success: function(nodedate) {
    if (nodedate.status == '0') {

添加完后jquery会自动帮你加上一个随机串,浏览器这样就不会缓存了。

jquery ColModel属性说明

Property Type Description Default
align string Defines the alignment of the cell in the Body layer, not in header cell. Possible values: left, center, right.
定义单元格对齐方式;可选值:left, center, right。例如:{name:’id’,align:’left’},实现左对齐。
left
classes string This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:’class1 class2′ will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
置列的css。多个class之间用空格分隔,如:’class1 class2′ 。表格默认的css属性是ui-ellipsis。这个属性在火狐浏览器中也是有效的。
empty string
datefmt string Governs format of sorttype:date (when datetype is set to local) and editrules {date:true} fields. Determines the expected date format for that column. Uses a PHP -like date formatting. Currently ”/”, ”-”, and ”.” are supported as date separators. Valid formats are:
y,Y,yyyy for four digits year
YY, yy for two digits year
m,mm for months
d,dd for days.
当sorttype为date和编辑规则的date为true是有效。使用的格式和php一样。默认为Y-m-d
ISO Date (Y-m-d)
defval string The default value for the search field. This option is used only in Custom Searching and will be set as initial search.
查询字段的默认值。这个选项只在自定义所属中有效。
empty
editable boolean Defines if the field is editable. This option is used in cell, inline and form modules.设定是否可以对单元格进行编辑{name:’id’,index:’id’, width:180,editable:true}, false
editoptions array Array of allowed options (attributes) for edittype option editing
编辑的一系列选项。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},这个是演示动态从服务器端获取数据。
empty array
editrules array sets additional rules for the editable field editing
编辑的规则{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},设定 年龄的最大值为100,最小值为10,而且为数字类型,并且为必输字段。
empty array
edittype string Defines the edit type for inline and form editing Possible values: text, textarea, select, checkbox, password, button, image and file.
编辑的类型,可为text、textarea,select、checkbox、password、button、image、file等。
text
fixed boolean If set to true this option does not allow recalculation of the width of the column if shrinkToFit option is set to true. Also the width does not change if a setGridWidth method is used to change the grid width.
如果设定为true的话,单元格的大小将无法进行调整(即不可更改其宽度),同样,调用setGridWidth的方法也不会改变其大小。
false
formoptions array Defines various options for form editing.
form编辑的一些选项
empty
formatoptions array Format options can be defined for particular columns, overwriting the defaults from the language file. See Formatter for more details.
对某些列进行格式化的设置
none
formatter mixed The predefined types (string) or custom function name that controls the format of this field.
对列进行格式化时设置的函数名或者类型{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0′ />”
return temp;
}},//返回性别的图标。
none
hidedlg boolean If set to true this column will not appear in the modal dialog where users can choose which columns to show or hide.
如果设置为true将显示在对话框中,可以让用户选择该列是显示或隐藏。
false
hidden boolean Defines if this column is hidden at initialization.
定义在初始化的时候是否隐藏此列
false
index string Set the index name when sorting. Passed as sidx parameter.
索引。其和后台交互的参数为sidx
empty string
jsonmap string Defines the json mapping for the column in the incoming json string.
定义返回的json的映射。
none
key boolean In case if there is no id from server, this can be set as as id for the unique row id. Only one column can have this property. If there are more than one key the grid finds the first one and the second is ignored.
如果从服务器返回的数据没有id属性,那么此列将被作为唯一的属性而设置为id,只有一个列可以做这项设置。如果设置多于一个,那么只选取第一个,其他被忽略。
false
label string When colNames array is empty, defines the heading for this column. If both the colNames array and this setting are empty, the heading for this column comes from the name property.
如果colNames为空则用此值来作为列的显示名称,如果都没有设置则使用name 值
none
name string Set the unique name in the grid for the column. This property is required. As well as other words used as property/event names, the reserved words (which cannot be used for names) include subgrid, cb and rn.
必输项,表格列的名称,所有关键字,保留字都不能作为名称使用包括subgrid, cb and rn.
Required
resizable boolean Defines if the column can be re sized
是否可以改变大小(主要是宽)
true
search boolean When used in search modules, disables or enables searching on that column.
在搜索模式下,定义此列是否可以作为搜索列
true
searchoptions array Defines the search options used searching
设定搜索的选项。
empty
sortable boolean Defines is this can be sorted.
定义是否可以排序
true
sorttype string Used when datatype is local. Defines the type of the column for appropriate sorting.Possible values:
int/integer – for sorting integer
float/number/currency – for sorting decimal numbers
date – for sorting date
text – for text sorting
用在当datatype为local时,定义搜索列的类型,可选值:int/integer – 对integer排序float/number/currency – 排序数字date – 排序日期text – 排序文本
text
stype string Determines the type of the element when searching.
定义搜索元素的类型
text
surl string Valid only in Custom Searching and edittype : ‘select’ and describes the url from where we can get already-constructed select element
搜索的地址。只在自定义搜索和editype为select的时候有效。
empty string
width number Set the initial width of the column, in pixels. This value currently can not be set as percentage
在初始化的宽度,这个值不可以使用百分比的格式。初始化为150pixels。{name:’id’,index:’id’, width:180,editable:true,editoptions:{readonly:true,size:10}}
150
xmlmap string Defines the xml mapping for the column in the incomming xml file. none
unformat function Custom function to “unformat” a value of the cell when used in editing Unformat is also called during sort operations. The value returned by unformat is the value compared during the sort.)
和format对应。

jquery validation和tinymce非空验证问题

jquery validation对tinymce的内容都要点击两次才能提交,第一次点击即使用内容还是提示为空。于是用firebug看了下,是因为textaera里的内容是点击以后才付值进去,网上找了下解决办法如下:

tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "fullscreen",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,fullscreen",
        theme_advanced_buttons2 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        elements : "content",
        init_instance_callback : "initialiseInstance"
    });
    function initialiseInstance(editor)
    {
        //Get the textarea
        var container = $('#' + editor.editorId);
 
        //Get the form submit buttons for the textarea
        $(editor.formElement).find("input[type=submit]").click(
        function(event)
        {
            container.val(editor.getContent());
        });
    }

封装自己的jQuery插件.

很早就想把自己写过的一些公共的jquery和我们业务结合的方法封装起来,作为内部的jquery的插件来使用,以前也看过jquery插件写法,不过好久没有再去看了,今天又找来温习下,并且写下实用的一个实例。这也是大家平时用得比较多的。不过插件还有别的写法,个人比较喜欢这样来实现。
写法一:

jQuery.extend({
	get_window_sizes: function()
	{
		var iebody = (document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body;
		return {
			'offset_x'   : iebody.scrollLeft ? iebody.scrollLeft : (self.pageXOffset ? self.pageXOffset : 0),
			'offset_y'   : iebody.scrollTop  ? iebody.scrollTop : (self.pageYOffset ? self.pageYOffset : 0),
			'view_height': self.innerHeight ? self.innerHeight : iebody.clientHeight,
			'view_width' : self.innerWidth ? self.innerWidth : iebody.clientWidth,
			'height'     : iebody.scrollHeight ? iebody.scrollHeight : window.height,
			'width'      : iebody.scrollWidth ? iebody.scrollWidth : window.width
		}
	},
	is: {
		email: function(email)
		{
			return /^([\w-+=_]+(?:\.[\w-+=_]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(email) ? true : false;
		},
 
		blank: function(val)
		{
			if (val == null || val.replace(/[\n\r\t]/gi, '') == '') {
				return true;
			}
 
			return false;
		},
 
		integer: function(val)
		{
			if (val.indexOf('0') == 0) {
				val = val.replace(/^[0]+/, '');
			}
 
			if (jQuery.is.blank(val) || parseInt(val) != val) {
				return false;
			}
 
			return true;
		},
 
		phone: function(val)
		{
			return val.match(/^\(?\d{3}\)?[ ]?[\d-]*$/gi) ? true : false;
		},
 
		zipcode: function(val, country)
		{
			if (zip_validators && zip_validators[country]) {
				return val.match(zip_validators[country]['regex']) ? true : false;
			}
 
			return true;
		}
	},
 
	cookie: {
		get: function(name)
		{
			var arg = name + "=";
			var alen = arg.length;
			var clen = document.cookie.length;
			var i = 0;
			while (i < clen) {
				var j = i + alen;
				if (document.cookie.substring(i, j) == arg) {
					var endstr = document.cookie.indexOf (";", j);
					if (endstr == -1) {
						endstr = document.cookie.length;
					}
 
					return unescape(document.cookie.substring(j, endstr));
				}
 
				i = document.cookie.indexOf(" ", i) + 1;
				if (i == 0) {
					break;
				}
			}
			return null;
		},
 
		set: function(name, value, expires, path, domain, secure)
		{
			document.cookie = name + "=" + escape (value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");
		},
 
		remove: function(name, path, domain)
		{
			if (jQuery.cookie.get(name)) {
				document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
			}
		}
	},
	redirect: function(url)
	{
		if ($('base').length && url.indexOf('/') != 0) {
			url = $('base').attr('href') + url;
		}
		window.location.href = url;
	}
});

一个验证的实例,也是自己从别的地方收集的。

(jquery插件)在文本框和文本域光标位置插入文本

jquery.caretInsert.js

[coolcode lang="javascript"]
jQuery.extend({
/**
* 清除当前选择内容
*/
unselectContents: function(){
if(window.getSelection)
window.getSelection().removeAllRanges();
else if(document.selection)
document.selection.empty();
}
});
jQuery.fn.extend({
/**
* 选中内容
*/
selectContents: function(){
$(this).each(function(i){
var node = this;
var selection, range, doc, win;
if ((doc = node.ownerDocument) &&
(win = doc.defaultView) &&
typeof win.getSelection != 'undefined' &&
typeof doc.createRange != 'undefined' &&
(selection = window.getSelection()) &&
typeof selection.removeAllRanges != 'undefined')
{
range = doc.createRange();
range.selectNode(node);
if(i == 0){
selection.removeAllRanges();
}
selection.addRange(range);
}
else if (document.body &&
typeof document.body.createTextRange != 'undefined' &&
(range = document.body.createTextRange()))
{
range.moveToElementText(node);
range.select();
}
});
},
/**
* 初始化对象以支持光标处插入内容
*/
setCaret: function(){
if(!$.browser.msie) return;
var initSetCaret = function(){
var textObj = $(this).get(0);
textObj.caretPos = document.selection.createRange().duplicate();
};
$(this)
.click(initSetCaret)
.select(initSetCaret)
.keyup(initSetCaret);
},
/**
* 在当前对象光标处插入指定的内容
*/
insertAtCaret: function(textFeildValue){
var textObj = $(this).get(0);
if(document.all && textObj.createTextRange && textObj.caretPos){
var caretPos=textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?
textFeildValue+'' : textFeildValue;
}
else if(textObj.setSelectionRange){
var rangeStart=textObj.selectionStart;
var rangeEnd=textObj.selectionEnd;
var tempStr1=textObj.value.substring(0,rangeStart);
var tempStr2=textObj.value.substring(rangeEnd);
textObj.value=tempStr1+textFeildValue+tempStr2;
textObj.focus();
var len=textFeildValue.length;
textObj.setSelectionRange(rangeStart+len,rangeStart+len);
textObj.blur();
}
else {
textObj.value+=textFeildValue;
}
}
});
[/coolcode]

使用实例:

[coolcode lang="html"]







phpstu.cn


Dog

[/coolcode]