新jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第5章.pptVIP

5.6.1 旋钮插件knob knob插件可以定义一个用于选择一个数值的。knob插件的脚本文件是jquery.knob-1.0.1.js 引用knob插件的代码 script src=js/jquery.js/script script src=js/jquery.knob-1.0.1.js/script 需要将一个input元素绑定到knob插件，定义knob旋钮的方法如下 input元素对应的jQuery对象.knob({ max: 旋钮可以选择的最大数值, min: 旋钮可以选择的最小数值, thickness: 旋钮的宽度（0~0.1）, fgColor: 旋钮的前景色, bgColor: 旋钮的背景色, release:function(e){ //选择旋钮时松开鼠标的处理函数，参数e为选择的数值 } }); 也可以使用绑定的input元素属性定义旋钮的属性 ? data-fgColor：旋钮的前景色； ? data-bgColor：旋钮的背景色； ? data-thickness：旋钮的宽度（0~0.1）； ? data-min：旋钮可以选择的最小数值； ? data-max：旋钮可以选择的最大数值。 【例5-20】 div id=imgwrapper img id=img src=img/super.jpg / /div div id=knobwrapper input class=knob data-width=300 data-skin=tron data-displayInput=true value=200 div input class=knob2 data-width=150 data-fgColor=green data-bgColor=#303030 data-skin=tron data-thickness=.3 data-min=200 data-max=600 value=200 /div /div 将input元素绑定到knob插件 script $(function() { $(.knob).knob({ max: 940, min: 500, thickness: .3, fgColor: #2B99E6, bgColor: #303030, release:function(e){ $(#img).animate({width:e}); } }); $(.knob2).knob({ release:function(e){ $(#img).animate({width:e}); } }); }); /script 浏览【例5-20】的结果 5.6.2 显示模态弹窗的插件Avgrund Avgrund插件可以定义一个模式弹出框。所谓模式弹出框就是想要对该弹出框以外的界面进行操作时，必须首先对该弹出框进行响应。 Avgrund插件的脚本文件是jquery.avgrund.js 用Avgrund插件的代码如下： script src=js/jquery.js/script script src=js/jquery.knob-1.0.1.js/script Avgrund插件还提供一个CSS样式文件avgrund.css，引用avgrund.css的代码如下： link rel=stylesheet href=./style/avgrund.css 指定单击某个HTML元素时打开模式弹出框 HTML元素对应的jQuery对象. avgrund ({ width: 弹出框的宽度, // 最大为640px height: 弹出框的高度, //最大为350px showClose: 是否显示关闭按钮, showCloseText: 关闭按钮显示的文字, enableStackAnimation: 是否显示动画效果, onBlurContainer: 单击指定的块元素会使弹出框失去焦点, template: 弹出框中的内容 }); 【例5-21】 在网页中定义一个按钮，代码如下： div class=buttons a href=# id=show class=button leftShow it/a /div 然后将按钮绑定到Avgrund插件，代码如下 script s