jquery 弹出层注册页面等_jquery_脚本之家

jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。
这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法:
第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer)
复制代码 代码如下:

jqPlot是一个非常强大的图表工具,曲线,柱状,饼图,应该有尽有,更要命的是,调用方便~~
官网:
这里贡献上中文教程,基本上所有的api都很齐全,供有需要的童鞋们瞧瞧,更重要的是作为自己滴收藏~~哦耶耶~
jqPlot整的来说有三个地方需要配置。格式如: $.jqplot(‘target’, data,
options);target:要显示的位置。data:显示的数据。options:其它配置
seriesColors: [ “#4bb2c5”, “#c5b47f”, “#EAA228”, “#579575”,
“#839557”, “#958c12”, “#953579”, “#4b5de4”, “#d8b83f”, “#ff5800”,
“#0085cc”], //
默认显示的分类颜色,如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类,
那么每个分类在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值(eg,
当前分类纵轴值为Y3 复制代码 代码如下:
title: ”, //设置当前图的标题 title: { text: ”, //设置当前图的标题
show: true,//设置当前图的标题是否显示 }, axesDefaults: { show: false,
是否自动显示坐标轴。 min: null, 横轴最小刻度值 max: null, 横轴最大刻度值
pad: 1.2, 横轴度值增涨因子 ticks: [],
//设置横坐标的刻度上的值,可为该ticks数组中的值 numberTicks:
undefined,//一个相除因子,用于设置横坐标刻度间隔值=横坐标区间长度/
renderer: $.jqplot.LinearAxisRenderer, // 设置横轴上数据加载的渲染器
rendererOptions: {}, // 设置renderer的Option配置对象,线状图不需要设置
tickOptions: { mark: ‘outside’, //
设置刻度在坐标轴上的显示方式:分为:坐标轴外显示,内显示,和穿过显示;其值分别为
‘outside’, ‘inside’ or ‘cross’。 showMark: true, //设置是否显示刻度
showGridline: true, // 是否在图表区域显示刻度值方向的网格 markSize: 4,
// 每个刻度线顶点距刻度线在坐标轴上点距离如果mark值为 ‘cross’,
那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴
在刻度线中间交叉,那么这时这个距离×2 show: true,
//是否显示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值
showLabel: true, //是否显示刻度线以及坐标轴上的刻度值 formatString: ”,
//设置坐标轴上刻度值显示格式,eg:’%b %#d, %Y’表示格式”月 日,年”,”AUG
30,2008″ fontSize:’10px’, //刻度值的字体大小 fontFamily:’Tahoma’,
//刻度值上字体 angle:40,
//刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向 fontWeight:’normal’,
//字体的粗细 fontStretch:1//刻度值在所在方向度 } showTicks: true,
//是否显示刻度线以及坐标轴上的刻度值, showTickMarks: true, //
设置是否显示刻度 useSeriesColor: true
//如果有多个纵坐标轴,通过该属性设置这些坐标轴是否以不同颜色显示 },
axes: { xaxis: { // same options as axesDefaults }, yaxis: { // same
options as axesDefaults }, x2axis: { // same options as axesDefaults },
y2axis: { // same options as axesDefaults } }, seriesDefaults:
{//如果有多个分类,这可通过该配置属性设置各个分类的共性属性 show: true,
//设置是否渲染整个图表区域. xaxis: ‘xaxis’, // either ‘xaxis’ or
‘x2axis’. yaxis: ‘yaxis’, // either ‘yaxis’ or ‘y2axis’. label: ”, //
用于显示在分类名称框中的分类名称. color: ”, // 分类在图标中表示的颜色.
lineWidth: 2.5, // 分类图哪宽度. shadow: true, //
各图在图表中是否显示阴影区域. shadowAngle: 45, //参考grid中相同参数.
shadowOffset: 1.25, //参考grid中相同参数. shadowDepth: 3,
//参考grid中相同参数. shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, //是否显示图表中的折线 showMarker: true, //
是否强调显示图中的数据节点 fill: false, //
是否填充图表中折线下面的区域以及legend
//设置的分类名称框中分类的颜色,此处注意的是如果fill为true,
//那么showLine必须为true,否则不会显示效果 fillAndStroke: false,
//在fill为true的状态下,在填充区域最上面显示一条线 fillColor: undefined,
// 设置填充区域的颜色 fillAlpha: undefined, // 梃置填充区域的透明度
renderer: $.jqplot.PieRenderer, // 利用渲染器渲染现有图表
//,从而转换成所需图表 rendererOptions: {}, //
传给上个属性所设置渲染器的option对象,线状图的渲染器没有option对象,
//不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》
//中各个图表的配置Option对象 markerRenderer: $.jqplot.MarkerRenderer, //
renderer to use to draw the data // point markers. markerOptions: {
show: true, // 是否在图中显示数据点 style: ‘filledCircle’, //
各个数据点在图中显示的方式,默认是”filledCircle”,
//其他几种方式circle,diamond, square, filledCircle, // filledDiamond
or filledSquare. lineWidth: 2, //
数据点各个的边的宽度(如果设置过大,各个边会重复,会显示的类似于实心点)
size: 9, // 数据点的大小 color: ‘#666666’ // 数据点的颜色 shadow: true,
// 是否为数据点显示阴影区 shadowAngle: 45, // 阴影区角度,x轴顺时针方向
shadowOffset: 1, // 参考grid中相同参数 shadowDepth: 3,
//参考grid中相同参数 shadowAlpha: 0.07 // 参考grid中相同参数 }
isDragable: true,//是否允许拖动,默认可拖动 }, series:[
//如果有多个分类需要显示,这在此处设置各个分类的相关配置属性
//eg.设置各个分类在分类名称框中的分类名称 //[label: ‘Traps
Division’},{label: ‘Decoy Division’},{label: ‘Harmony
Division’}]//配置参数设置同seriesDefaults ], legend: { show:
false,//设置是否出现分类名称框 location: ‘ne’, // 分类名称框出现位置,
nw, n, ne, e, se, s, sw, w. xoffset: 12, //
分类名称框距图表区域上边框的距离 yoffset: 12, //
分类名称框距图表区域左边框的距离 background:”
//分类名称框距图表区域背景色 textColor:”
//分类名称框距图表区域内字体颜色 }, grid: { drawGridLines: true, //
wether to draw lines across the grid or not. gridLineColor: ‘#cccccc’
// 设置整个图标区域网格背景线的颜色 background: ‘#fffdf6’, //
设置整个图表区域的背景色 borderColor: ‘#999999’, //
设置图表的边框的颜色 borderWidth: 2.0, //设置图表的边框宽度 shadow:
true, // 为整个图标边框设置阴影,以突出其立体效果 shadowAngle: 45, //
设置阴影区域的角度,从x轴顺时针方向旋转 shadowOffset: 1.5, //
设置阴影区域偏移出图片边框的距离 shadowWidth: 3, // 设置阴影区域的宽度
shadowDepth: 3, // 设置影音区域重叠阴影的数量 shadowAlpha: 0.07 //
设置阴影区域的透明度 renderer: $.jqplot.CanvasGridRenderer, // renderer
to use to draw the grid. rendererOptions: {} // options to pass to the
renderer. Note, the default // CanvasGridRenderer takes no additional
options. }, //jqPlot各个不同插件的Option对象设置 // BarRenderer
//该Option对象适用与柱状图的series和seriesDefault属性的相关配置对象设置
seriesDefaults: { rendererOptions: { barPadding: 8,
//设置同一分类两个柱状条之间的距离 barMargin: 10,
//设置不同分类的两个柱状条之间的距离 barDirection: ‘vertical’,
//设置柱状图显示的方向:垂直显示和水平显示 //,默认垂直显示 vertical or
horizontal. barWidth: null, // 设置柱状图中每个柱状条的宽度
shadowOffset: 2, // 同grid相同属性设置 shadowDepth: 5, //
同grid相同属性设置 shadowAlpha: 0.8, // 同grid相同属性设置 } }, //
Cursor // 鼠标移动到图中时,鼠标在图中显示形式,常与和高亮功能同时使用
//此外,通过设置该属性的zoom相关属性来对图中某个区域钻取
//该配置对象直接在option下配置 cursor: { style: ‘crosshair’,
//当鼠标移动到图片上时,鼠标的显示样式,该属性值为css类 show: true,
//是否显示光标 showTooltip: true, // 是否显示提示信息栏 followMouse:
false, //光标的提示信息栏是否随光标一起移动 tooltipLocation: ‘se’, //
光标提示信息栏的位置设置。如果followMouse=true,那么该位置为
//提示信息栏相对于光标的位置。否则,为光标提示信息栏在图标中的位置 //
该属性可选值: n, ne, e, se, etc. tooltipOffset: 6,
//提示信息栏距鼠标或坐标轴的位置 showTooltipGridPosition:
false,//是否在信息提示栏中显示光标位置 showTooltipUnitPosition: true,//
是否显示提示光标所在位置的信息栏
//注:注意此处与showTooltipGridPosition值区别,前者显示坐标值,该处显示的是数据值
tooltipFormatString: ‘%.4P’, // 同Highlighter的tooltipFormatString
useAxesFormatters: true, // 同Highlighter的tooltipFormatString
tooltipAxesGroups: [], // show only specified axes groups in tooltip.
Would specify like: // [[‘xaxis’, ‘yaxis’], [‘xaxis’, ‘y2axis’]].
By default, all axes // combinations with for the series in the plot are
shown. }, // Dragable
//该配置对象通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
dragable: { color: undefined, // 当拖动数据点是,拖动线与拖动数据点颜色
constrainTo: ‘none’, //设置拖动的的范围: ‘x’, // ‘y’, or ‘none’. }, },
// Highlighter //设置高亮动作option属性对象
//鼠标移动到某个数据点上时,该数据点增大并显示提示信息框
//该配置对象直接在option下配置 highlighter: { lineWidthAdjust: 2.5,
//当鼠标移动到放大的数据点上时,设置增大的数据点的宽度 //
目前仅适用于非实心数据点 sizeAdjust: 5, //
当鼠标移动到数据点上时,数据点扩大的增量增量 showTooltip: true, //
是否显示提示信息栏 tooltipLocation: ‘nw’, // 提示信息显示位置: n, ne, e,
se, s, sw, w, nw. fadeTooltip: true, // 设置提示信息栏出现和消失的方式
tooltipFadeSpeed: “fast”//设置提示信息栏淡入淡出的速度: slow, def,
fast, 或者是一个毫秒数的值. tooltipOffset: 2, //
提示信息栏据被高亮显示的数据点的偏移位置,以像素计。 tooltipAxes:
‘both’, //
提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式。
//值分别为 x, y or xy. tooltipSeparator: ‘, ‘ //
提示信息栏不同值之间的间隔符号 useAxesFormatters: true //
提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
tooltipFormatString: ‘%.5P’ //
用于设置提示信息框中数据显示的格式,前提条件是useAxesFormatters //
为false. 此时信息提示框中数据格式不再与坐标轴一致,而是以此为准
//同时,该属性还支持html格式字符串 //eg:’hello %.2f’ }, // LogAxisRenderer //
该渲染器只有两个属性, 指数渲染器通过axesDefaults和axes配置对象进行配置
axesDefaults: { base: 10, // 指数的底数 tickDistribution: ‘even’, //
坐标轴显示方式:’even’ or ‘power’. ‘even’ 产生的是均匀分布于坐标
//轴上的坐标刻度值 。而’power’
则是根据不断增大的增数来确定坐标轴上的刻度 }, // PieRenderer //
饼状图通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
rendererOptions: { diameter: undefined, // 设置饼的直径 padding: 20, //
饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 sliceMargin: 20,
// 饼的每个部分之间的距离 fill:true, // 设置饼的每部分被填充的状态
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 shadowDepth:
5, // 设置阴影区域的深度 shadowAlpha: 0.07 // 设置阴影区域的透明度 } },
//pointLabels //用于在数据点所在位置显示相关信息 seriesDefaults: {
pointLabels: { location:’s’,//数据标签显示在数据点附近的方位 ypadding:2
//数据标签距数据点在纵轴方向上的距离 } } // Trendline //
饼状图通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
trendline: { show: true, // 是否显示趋势线 color: ‘#666666’, //
趋势线颜色 label: ”, // 趋势线名称 type: ‘linear’,
//趋势线类型’linear’, ‘exponential’ or ‘exp’ shadow: true, //
同grid相同属性设置 lineWidth: 1.5, // 趋势线宽度 shadowAngle: 45, //
同grid相同属性设置 shadowOffset: 1.5, // 同grid相同属性设置 shadowDepth:
3, // 同grid相同属性设置 shadowAlpha: 0.07 // 同grid相同属性设置 } } }

1、$.click{ //adding your code here }); }); 2、$.ready.click{ //adding
your code here }); }); 3、window.onload = function.click{ //adding your
code here }); } html代码为点击,且页面需要引用jquery的js文件
一般的加载页面时调用js方法如下: window.onload = function() { $(“table
tr:nth-child.addClass; //这个是jquery代码 };
这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM
tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。
但是用jquery的方法: $.ready { // 任何需要执行的js特效 $(“table
tr:nth-child.addClass;
就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM
tree之前就执行js效果。包括在加载外部图片和资源之前。
还有一种简写的方式: $ { // 任何需要执行的js特效 $(“table
tr:nth-child.addClass;

需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查,
3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择。
5:尽力提高用户体验,吸引用户注册。 无图无真相。

第二步,增加一个图表展示区域的容器 复制代码 代码如下:

1:简化后的页面:

第三步,获取数据 复制代码 代码如下: line1
= [[‘frogs’, 3], [‘buzzards’, 7], [‘deer’, 2.5], [‘turkeys’,
6], [‘moles’, 5], [‘ground hogs’, 4]];
第四步,配置Option对象,并创建图表 复制代码 代码如下: $.jqplot(‘chart’, [line1],
{ title:’pieRenderer ‘,//设置饼状图的标题 seriesDefaults: {fill: true,
showMarker: false, shadow: false, renderer:$.jqplot.PieRenderer,
rendererOptions:{ diameter: undefined, // 设置饼的直径 padding: 20, //
饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 sliceMargin: 9,
// 饼的每个部分之间的距离 fill:true, // 设置饼的每部分被填充的状态
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 shadowDepth:
5, // 设置阴影区域的深度 shadowAlpha: 0.07 // 设置阴影区域的透明度 } },
legend:{ show: true,//设置是否出现分类名称框 location: ‘ne’, //
分类名称框出现位置, nw, n, ne, e, se, s, sw, w. xoffset: 12, //
分类名称框距图表区域上边框的距离 yoffset: 12, //
分类名称框距图表区域左边框的距离; 完整的代码如下: 复制代码 代码如下:

2:浮出文字提示和圆角边框:

Simple Test

3:支持民意调查

生成图表展示如下:

4:自动检索推荐用户名

de life” alt=”jqPlot——基于jquery的页面图表绘制工具 – gaoyusi – My code
life” src=”;

5:数据有效性验证

下面是一些其他类型的图标的截图:

6:日历

1.多纵轴图

7:支持拖拽

de life” alt=”jqPlot——基于jquery的页面图表绘制工具 – gaoyusi – My code
life” src=”;

8:滑入显示

2.带提示信息的甘特图

9:over

de life” alt=”jqPlot——基于jquery的页面图表绘制工具 – gaoyusi – My code
life” src=”;

代码分析1.弹出层的制作, a.先引用这三个: 复制代码 代码如下:

3.以table方式展示提示信息的甘特图

b.调用这个方法$.prompt,实现弹出。 2.浮出文字 a.先引用这两个: 复制代码 代码如下:

de life” alt=”jqPlot——基于jquery的页面图表绘制工具 – gaoyusi – My code
life” src=”;

b.调用下面代码实现浮出: 代码 复制代码
代码如下: $.tooltip({bodyHandler: function() {return
“用户名必须以字母开头”;},showURL: false}); $.tooltip({bodyHandler:
function() {return “建议使用新浪游戏”;},showURL: false});
$.tooltip({bodyHandler: function() {return
“未成年人请不要注册”;},showURL: false}); 3.投票 a.先引用下面两个: 复制代码 代码如下:

4.带提示信息的线状图

b.调用$.rater实现投票 4.自动检索推荐用户名 a.先引用下面两个 复制代码 代码如下:

de life” alt=”jqPlot——基于jquery的页面图表绘制工具 – gaoyusi – My code
life” src=”;

b.调用
$.autocomplete;实现自动检索,(用的是localdata.js里面的本地测试数据)
5.数据校验 a.先引用这

对于jqPlot功能的具体介绍请关注本文的后续文章——jqPlot的Option配置对象详解。

再写如下CSS: 复制代码 代码如下:

b.调用这个$.validate()实现验证;form里面的class和一些属性配置好,一切验证全自动。
如:邮箱 6.日历
说到这个惭愧啊!开始用的JQuery的日历插件,后来由于其不能置于弹框的上面,所以改用另外一个。
a.先引用这两个 复制代码 代码如下:

b.再写如下代码 复制代码 代码如下: var c =
new Calendar; document.write; //下面两个用为微调定位 c.offsetTop =22;
c.offsetLeft = 25; html代码: 复制代码
代码如下: 可以看得出,他 自动验证时间格式 7.拖拽 a.先引用这个:

b.再写这个$;实现拖拽 8.滑入显示: 插件提供了扩展: 复制代码 代码如下: $.ready { $.fn.extend({
dropIn: function{ var $t = $; if == “none”){ eltop = $t.css;
elouterHeight = $t.outerHeight; $t.css({ top: -elouterHeight, display:
‘block’ }) .animate({ top: eltop },speed,’swing’, callback); } } }); });
调用$.prompt(“mes”,{show:’dropIn’}即可实现滑入。 9.圆角边框。
a.先引用这个

b.调用$..corner;
c.注意事项:四个角所缺的地方的颜色也是可设置的,一般都和背景色一致。
总结
一般命名插件的CSS和脚本命名都很规范,所以难得出现冲突。只要CSS和Js不冲突,就可以
放心用,随便用,乱着用。
本来想清一色的JQuery插件的,结果JQuery日历插件浮不到弹出层的上面,所以换了另外一个日历控件。气得我把z-index设成10000000000000000,结果可想而知—-依然浮不上。找不到哪里CSS冲突了,哪个发现了告诉我一下。
复制代码 代码如下: table.jCalendar {
border: 1px solid #000; background: #aaa; border-collapse: separate;
border-spacing: 2px; z-index: 100000000000000000000000000000000;
position:absolute; } 解决办法: 方法一: 在你的页面开始出定义下面的样式
.ui-datepicker {z-index:1200;} 当调用dialog时用下面的代码 jQuery.dialog;
方法二: [code] .datepicker({ beforeShow: function { var z =
jQuery.closest.css + 4; e.dpDiv.css 代码打包下载作者:张磊

相关文章