前言
作为一个的后端开发人员,把前端技术做到很好这显然是矛盾的,如果所处团队没有前端人员,使用UI框架到也不失为一个不错的选择,UI框架有很多例如bootstrap、easyUI....本文主要介绍jQueryUI;
概述
Query UI 是建立在JavaScript、 jQuery之上的UI库,主要包含:交互组件、部件、高级效果....
下载:https://jqueryui.com/download/
文档: http://www.css88.com/jquery-ui-api/、 其他
一、交互组件
交互组件主要是一些以鼠标为核心的用户操作,比如:拖动、放置、拆分、排序、跳转元素大小....;
1. Draggable组件
顾名思义Draggable组件可以帮助我们随意鼠标拖动网页中的标签;
1.0 初探
$('#zhanggen').draggable() //随意拖动;
1.1 常见配置
$('#zhanggen').draggable({{axis:'x'}) //沿着X轴拖动
$('#zhanggen').draggable({{axis:'y'}) //沿着Y轴拖动
$('#zhanggen').draggable({containment:"window" }) //限制拖动区域: window/document(当前窗口/文档树)/ parent(父级标签) 默认:fase
$('#zhanggen').draggable({ containment:[0,0,200,200 ] }) //通过坐标位置限制拖动区域
$('#zhanggen').draggable({ containment:'#dragg_zone' }) //通过选择器 限制在某标签内拖动
$('#zhanggen').draggable({distance:10}) //鼠标移动N px之后再移动
$('#zhanggen').draggable({delay:2000}) //延时拖动 (单位毫秒)
$('#zhanggen').draggable({grid:[100,100] }) //按照 每次移动100px 的步伐 拖动
snap:'#dragg_zone' //吸附到目标 元素(滑动验证效果)
snapMode:"inner" //指定吸附到目标盒子的 哪里? inner/outer/both
snapTolerance:100 //多大间距 开始吸附
helper:'clone' //设置拖动分身 而非本身
1.2 常见方法
var option=$('.zhanggen').draggable('option','helper'); // 检查是否配置某选项?有返回配置项,没有返回false!
var option=$('.zhanggen').draggable('option','helper'); // 查看是否配置某选项?有返回配置项,没有返回false!
var option=$('.zhanggen').draggable('option','helper'); // 查看所有配置
var option=$('.zhanggen').draggable('option','helper','clone') ; //设置
var option=$('.zhanggen').draggable('option',{'helper':'clone', 'axis':'x'}); //设置多选配置
1.3 触发事件
create :拖动组件被创建时执行
start:开始拖动执行
drag:拖动中执行
stop:停止拖动执行
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <style> *{ margin: 0; } div{ display: inline-block; height: 40px; } #box{ display: inline-block; border: 1px solid red; width: 100%; } .zhanggen { width: 40px; background: #c0a16b; } #dragg_zone { width: 40px; background: slateblue; margin-left: 300px; } </style> <script> $(function () { $('.zhanggen').draggable({ axis:'x', //只能沿X轴拖动 //axis:'y', //只能沿X轴拖动 containment:"#box", //限制拖动区域 window/document(当前窗口/文档)、parent(父级标签) 默认:fase // containment:[0,0,200,200 ] //按坐标定位 {# distance:10, //鼠标移动N px之后再移动#} {# delay:2000,//延时拖动 (单位毫秒)#} {# grid:[100,100], //按每次100px的步伐 拖动#} snap: '#dragg_zone',//吸附到目标 元素(滑动验证效果) snapMode: "inner",//吸附到目标元素的 哪里? inner/outer/both snapTolerance: 100,//多大间距 快开吸附 helper: 'clone',//设置拖动分身 而非本身 containment: 'windown',//限制 在某标签内拖动 create: function (e, ui) { console.log('开启拖动效果') }, start:function (e,ui) { console.log('开始拖动') }, drag:function (e,ui) { console.log('正在拖动') }, stop:function () { alert('验证成功'); window.location.href='https://m.anysex.com/categorys/' } }); //$('.zhanggen').draggable( 'destroy') //注销拖动效果 {# $('.zhanggen').draggable( 'disable'); //禁用拖动效果#} {# $('.zhanggen').draggable( 'enable'); //开启拖动效果#} {# var option=$('.zhanggen').draggable('option','helper');// 查看是否配置某选项?有返回配置项,没有返回false!#} {# var option=$('.zhanggen').draggable('option','helper');// 查看所有配置#} {##} {# var option=$('.zhanggen').draggable('option','helper','clone');//设置#} {# var option=$('.zhanggen').draggable('option',{'helper':'clone', 'axis':'x'});//设置多选配置#} }) </script> </head> <body> <div id="box"> <div class="zhanggen"></div> <div id="dragg_zone"></div> </div> </body> </html>
2.droppable组件
droppable和Draggable组件相呼应,拖动一个可元素( Draggable)到达droppable元素之后产生的一系列效果;
2.0 初探
<script> $(function () { $('.zhanggen').draggable({ axis:'x', containment:"#box" }); $('#dragg_zone').droppable({ drop:function (event,ui) { alert('你想压死我了啊?')//被拖动元素 和接收元素 重叠并释放鼠标,触发! } }) }) </script>
2.1 常见配置
accept:'.zhanggen' //设置接受的 拖动元素
accept:function (drag) { console.log(drag)} // 设置拖动所有可拖动元素,释放鼠标时被执行,return true才可以被接收元素接收
activeClass:'class1' //拖拽时 为接收元素 增加一个class类
hoverClass:'class1' //可拖动元素经过 接收元素时 新增1个类
tolerance:'touch' //触发over事件时机;可拖动元素和放置元素完全重叠 / ntersect:至少重叠50% / pointer:中心点重叠 touch:只有触碰到
scope:"值" //使 Draggable和droppable设置的值一致,则产生配对(默认为default)
2.2. 触发事件
over:function //Draggable 经过 droppable触发
drop:function //Draggable 和 droppable重叠并释放鼠标之后触发
out:function //Draggable 离开 droppable
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <style> *{ margin: 0; } div{ display: inline-block; height: 40px; } #box{ display: inline-block; border: 1px solid red; width: 100%; } .zhanggen { width: 40px; background: #c0a16b; } .dragg_zone { width: 40px; background: slateblue; margin-left: 300px; } .class1{ background: springgreen; } </style> <script> $(function () { $('.zhanggen').draggable({ axis:'x', scope:"aaa", containment:"#box" }); $('.dragg_zone').droppable({ {# accept:'.zhanggen', //设置接受的 拖动元素#} {# accept:function (drag) { // 拖动所有可拖动元素,释放鼠标时被执行,return true才可以被接收元素接收#} {# console.log(drag);#} {# return true#} {# },#} {# activeClass:'class1', //拖拽时 为接收元素 add一个类#} hoverClass:'class1', //可拖动元素经过 接收元素时 新增1个类 tolerance:'touch', //fit:可拖动元素和放置元素完全重叠 ntersect:至少重叠50% pointer:中心点重叠 touch:只有触碰到 触发over事件 scope:"aaa", //使 Draggable和droppable设置的值一致,则产生配对(默认为default) over:function (ecen,ui) { //Draggable 经过 droppable触发 console.log('经过 我上面了!') }, drop:function (event,ui) { //Draggable 和 droppable重叠并释放鼠标之后触发 ui.droppable.appendTO(this); console.log('Draggable 和 droppable重叠并释放鼠标之后触发') }, out:function (event,ui) { //Draggable 离开 droppable console.log('离开了!') } }) }) </script> </head> <body> <div id="box"> <div class="zhanggen" droppable=true></div> <div class="dragg_zone"></div> </div> </body> </html>
3.sortable组件
使html元素,可拆分、排序;
3.0 初探
<script> $(function () { $('ul.u10').sortable() //调用jQuery-ui 的sortable方法
}) </script>
3.1 常见配置
connectWith: 'ul.ul1', //设置可以拖动、连接到哪个容器
dropOnEmpty: true, //是否允许拖动、连接到一个空白容器中(注意设置 空白容器的高度)
placeholder: 'placehodolder' //拖动新元素时 新增1个class
items:'> *' //限制可移动的元素(默认是$('ul.ul0').sortable方法,所有子代)
cancel:'> *' //设置不可以拖动的元素
var toArray_id=$('ul.ul0').sortable('toArray'); //返回1个 以排序元素id值 为内容的列表
3.2 触发事件
beforeStop:function (ele,ui) {} //当排序元素排序完成后,触发的事件;
change:function (ele,ui) {} //当排序元素位置发生变化时,执行;
receive:function () {} //连接的sortable中的元素,移动到当前sortable时触发该事件
remove:function () {} //当前sortable中的元素,移动到连接的sortable中触发
update:function () {} //sortable中的元素在移动过程中,顺序发生变化触发,顺序没有变化不触发;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <style> body, ul { margin: 0; padding: 0; } ul { list-style: none; width: 50%; float: left; } ul li { width: 90%; height: 30px; border: 1px solid #ccc; margin: 5px auto; } .ul0_li { background: #eee; } .ul1_li { background: pink; } .placehodolder { background: silver; border: 1px dashed springgreen; } </style> <script> $(function () { $('ul.ul0').sortable({ connectWith: 'ul.ul1', //设置可以拖动、连接到哪个容器 dropOnEmpty: true, //是否允许拖动、连接到一个空白容器中(注意设置 空白容器的高度) placeholder: 'placehodolder', //拖动新元素时 新增1个class items: '> *', //限制可移动的元素(默认是$('ul.ul0').sortable方法,所有子代) cancel: '> *', //设置不可以拖动的元素 beforeStop: function (ele, ui) { //当排序元素排序完成后,触发的事件; console.log('一次拖动结束') }, change: function () { //当排序元素位置发生变化时,执行; console.log('动起来了!') }, receive: function () { //连接的sortable中的元素,移动到当前sortable时触发该事件 console.log('来喽!') }, remove: function () { console.log('走喽') //当前sortable中的元素,移动到连接的sortable中触发 }, update: function () { console.log('位置发生改变') //sortable中的元素在移动过程中,顺序发生变化触发,顺序没有变化不触发; } }); $('ul.ul1').sortable({ connectWith: 'ul.ul0' //设置可以拖动、连接到哪个容器 }); $('button').click(function () { var toArray_id = $('ul.ul0').sortable('toArray'); //返回1个一排序元素id 为值为内容的列表 console.log(toArray_id) }); }) </script> </head> <body> <ul class="ul0"> <li id="ul0_li0" class="ul0_li">0</li> <li id="ul0_li1" class="ul0_li">1</li> <li id="ul0_li2" class="ul0_li">2</li> <li id="ul0_li3" class="ul0_li">3</li> <li id="ul0_li4" class="ul0_li">4</li> <li id="ul0_li5" class="ul0_li">5</li> <li id="ul0_li6" class="ul0_li">6</li> </ul> <ul class="ul1"> <li class="ul1_li">0</li> <li class="ul1_li">1</li> <li class="ul1_li">2</li> <li class="ul1_li">3</li> <li class="ul1_li">4</li> <li class="ul1_li">5</li> <li class="ul1_li">6</li> </ul> <button>确认</button> </body> </html>
4.resizable组件
通过鼠标动态调整html元素的大小;
4.0 初探
$('#div1').resizable() //可动态调整元素的大小
4.1 常见配置
containment:'#box' //限制调整的大小
alsoResize:'#img1' //调整元素大小的同时 关联上其他元素(默认 false) 例如:动态调整图片的大小
aspectRatio:true //是否保持 宽/高比例不变形
autoHide:true //设置鼠标悬停之后,右下角拖拽把手显示
maxWidth:1000 //限制最大调整 宽度
handles:'e,s,se' // 限制调整大小 方位
4.2 触发事件
create:function (event,ui) {} //创建resizable 时触发
start:function (event,ui){} //开始调整时触发
resize:function (event,ui) {} //调整中实时触发
stop:function (event,ui) {} //调整结束之后触发
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <style> #box{ width: 1000px; height: 680px; border: solid 1px red; padding: 10px; } </style> <script> $(function () { $('#box').resizable({ //可动态调整元素的大小 //containment:'#box', //限制调整的大小 alsoResize:'#img1', //调整元素大小的同时 关联上其他元素(默认 false) aspectRatio:true, //是否保持 宽/高比例不变形 autoHide:true, //设置鼠标悬停之后,右下角拖拽把手显示 maxWidth:1000, //限制最大调整 宽度 handles:'e,s,se', // 限制调整大小 方位 create:function (event,ui) { //创建resizable 时触发 alert('可调整大小了') }, start:function (event,ui){ //开始调整时触发 console.log('开始调整啦!') }, resize:function (event,ui) { //调整中实时触发 console.log('调整中') }, stop:function (event,ui) { //调整结束之后触发 console.log('调整结束了!') } }) }) </script> </head> <body> <div id="box"> <img id="img1" src="/static/666.jpg" > </div> </body> </html>
5、Selectable
点击选中某个元素后发生css样式变化;
5.0 初探
$('ul.ul0').selectable();
5.1 常见配置
cancel:'#0', //设置不可以被选中的元素
filter:'*' //设置那些元素可以被选中
5.2 事件
start:function () {} //选择开始执行的函数
stop:function () {} //选择结束执行的函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <style type="text/css"> ul.ul0 { list-style:none; margin:0 auto; width:80%; } ul.ul0 li { height:30px; background:#eee; border:1px solid #ccc; margin:10px 0; } .ui-selectable .ui-selected { background:pink; color:#fff; } </style> <script> $(function () { $('ul.ul0').selectable({ cancel:'#0', //设置不可以被选中的元素 filter:'*', //设置那些元素可以被选中 start:function () { //选择开始执行的函数 $('#div1').html(''); console.log('选择开始') }, stop:function () { //选择结束执行的函数 $('.ui-selected',this).each(function (index,element) { $('#div1').append($(element).html()) }); console.log('选择结束') } }); }); </script> </head> <body> <ul class="ul0"> <li id="0">0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div id="div1"></div> </body> </html>
二、部件
部件是指对页面的功能扩展,比如按钮、菜单、日期采集、对话框....
1.滑动条部件
滑动条部件是在页面呈现一个滑动条,让用户滑动选择自己想要的值 ,而不必使用单调的input输入框;
1.0 初探
$('#slider_wgedit').slider();
1.1 常见配置
animate:true //滑动手柄将以默认的时间执行动画效果
max:100 //设置滑动轨道的最大值
min:0 //设置滑动轨道的最小值
orientation:'horizontal' //设置滑动的方向 horizontal(默认横向)、vertical(纵向)
range:"min" //设置从哪里 开始;最小或者最大(进度条)max|min|true
step:10 //设置滑动步长,默认为1
values:[10,50] //设置默认节点
1.2 常见事件
create:function () {} //滑动条创建完毕之后执行
slide:function (evet,ui) {} //滑动过程中触发
change:function (evet,ui) {} //滑动完成时触发
1.3 界面
.ui-slider-handle 滑动手柄的class
.ui-slider-range 已滑动的区域的 class
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <script> $(function () { $('#slider_wgedit').slider({ animate: true,//滑动手柄将以默认的时间执行动画效果 max: 100, //设置滑动轨道的最大值 min: 0, //设置滑动轨道的最小值 orientation: 'horizontal', //设置滑动的方向 horizontal(默认横向)、vertical(纵向) range: "min", //设置从哪里 开始;最小或者最大(进度条)max|min|true step: 10, //设置滑动步长,默认为1 {# values:[10,50], //设置默认节点#} create: function () { //滑动条创建完毕之后执行 $(this).children('.ui-slider-handle').append('<i></i><i></i>') }, slide: function (evet, ui) { //滑动过程中触发 console.log() }, change: function (evet, ui) { //滑动完成时触发 console.log(ui) } /* 界面 .ui-slider-handle 滑动手柄的class .ui-slider-range 已滑动的区域的 class */ }); }) </script> <style type="text/css"> #sifangku { width: 420px; height: 28px; margin: 100px; background: #e8e8e8; } #sifangku .ui-slider-handle { width: 18px; height: 35px; background: #2dacd1; } #sifangku .ui-slider-handle i { display: inline-block; width: 2px; height: 12px; background: #68c3de; margin: 12px -3px 0px 6px; } #sifangku .ui-slider-range { background: #43bfe3; overflow: hidden; } #sifangku .ui-slider-range div.box { width: 420px; } #sifangku .ui-slider-range div.box div.sep div.data { color: #fff; } #sifangku .ui-slider-range div.box div.sep div.line { border-color: #2dacd1; } #sifangku div.sep { width: 105px; height: 28px; float: left; } #sifangku div.sep div.data { font-size: 13px; line-height: 28px; float: right; margin-right: 10px; color: #999; } #sifangku div.sep div.line { width: 1px; height: 28px; border-right: 1px solid #ddd; float: right; } </style> <script type="text/javascript"> $(function () { $('#sifangku').slider({ range: 'min', max: 200, animate: true, create: function () { var html = '<div class="sep"><div class="line"></div><div class="data">50M</div></div>' + '<div class="sep"><div class="line"></div><div class="data">100M</div></div>' + '<div class="sep"><div class="line"></div><div class="data">150M</div></div>' + '<div class="sep"><div class="data">200M</div></div>'; $(this).append(html); $(this).children('.ui-slider-range').append('<div class="box">' + html + '</div>'); $(this).children('.ui-slider-handle').append('<i></i><i></i>'); }, slide: function (e, ui) { $('#sValue').html(ui.value); } }); }); </script> </head> <body> <div id="sifangku"></div> <div id="sValue"></div> </body> </html>
2.按钮部件
按钮部件不可快捷得实现更加饱满、美观的button;
2.0 初探
$('button').button()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css"> <script> $(function () { $('button').button({ 'label':'提交' //设置button的内容 }); $('#sex').buttonset();//设置radio 分组按钮 $('#hobby').buttonset() }) </script> </head> <body> <button id="zhanggen">点我</button> <div id="sex"> <input type="radio" name="sex" id="boy"><label for="boy">男</label> <input type="radio" name="sex" id="girl"><label for="girl">女</label> </div> <div id="hobby"> <input type="checkbox" name="hobby" id="eat"><label for="eat">吃</label> <input type="checkbox" name="hobby" id="sport"><label for="sport">运动</label> <input type="checkbox" name="hobby" id="girls"><label for="girls">美女</label> <input type="checkbox" name="hobby" id="boys"><label for="boys">帅哥</label> </div> </body> </html>
3 进度条
3.0 初探
$('#zhanggen').progressbar() //生成进度条
3.1 常见配置
max:120, //设置进度条的最大值(默认为100) value:90 //设置完成进度值 Number | false(模糊值,例如正在进行中!)
3.2 常见方法
$('#zhanggen').progressbar('value'); //设置进度值 $('#zhanggen').progressbar('option','max') //设置最大值
3.3 事件
create:function () { console.log('创建完毕!') },
change:function () { console.log('进行中...') },
complete:function(e,ui){ //进度条完成之后,触发的函数; alert('完成啦!'); }
3.4 界面
.ui-progressbar-value //进度条已填充部分的class类
4.微调部件(Spinner Widget)
通过向上和向下箭头按键操作,调整文本输入框的值;
4.0 初探
$('#zhanggen').spinner();
4.1 常见配置
//disabled:true //禁用输入框 min:6, //设置初始值 step:2, //设置步进 max:10 //设置最大输入值
4.2 常见方法
$('#zhanggen').spinner('value',10); //设置input中的值 $('#zhanggen').spinner('stepUp'); //相当于 点击了一下向上按钮 $('#zhanggen').spinner('stepUp'); //相当于 点击了一下向上按钮 $('#zhanggen').spinner('stepDown'); //相当于 点击了一下向上按钮 var v=$('#zhanggen').spinner('value'); //获取输入的值
4.3 常见事件
create:function (event,ui) { //创建完成之后执行 console.log('已创建!') }, change:function (event,ui) { //修改值,焦点离开之后执行 console.log('注意你做了内容修改!') }, start:function (event,ui) { //1次微调开始执行 console.log('微调开始!') }, spin:function (event,ui) { //做微调的时候触发执行 console.log(ui.value) }, stop:function (event,ui) { //1次微调结束执行 console.log('微调结束!') }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js"></script> <link rel="stylesheet" href="/static/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.min.css"> <style> span .unit{ width: 40px; height: 20px; display: block; overflow: hidden; position: absolute; right: 25px; top: 3px; } input{ outline: none; outline-color: red; } </style> <script> $(function () { $('#zhanggen').spinner({ //disabled:true //禁用输入框 min:6, //设置初始值 step:2, //设置步进 max:10, //设置最大输入值 create:function (event,ui) { //创建完成之后执行 $(this).after('<span class="unit">Mbps</span>'); console.log('已创建!') }, change:function (event,ui) { //修改值,焦点离开之后执行 console.log('注意你做了内容修改!') }, start:function (event,ui) { //1次微调开始执行 console.log('微调开始!') }, spin:function (event,ui) { //做微调的时候触发执行 console.log(ui.value) }, stop:function (event,ui) { //1次微调结束执行 console.log('微调结束!') } }); }) </script> </head> <body> <label for="zhanggen">带宽:</label><input id="zhanggen" type="text" value="0"> </body> </html>
5.下拉菜单部件(selectmenu)
下拉菜单部件可以轻松得对原生select标签,做CSS样式优化;
5.0 初探
$('select').selectmenu()
5.1 常见配置
position:{my:'left top',at:'right bottom'}, //设置下拉option显示得位置 width: 100 //设置宽度
5.2 常见方法
$('select option:eq(2)').attr('selected','selected'); $('select').selectmenu('refresh'); //刷新 selectmenu
6.工具提示部件 tooltip Widget
提示部件可以轻松得对设置title属性的标签,做CSS样式优化;
6.0 初探
$('#zhanggen').tooltip()
6.1 常见配置
content:function () { //设置提示内容 function | 字符串 //ajax 向后端请求! return 1 }, tooltipClass:'class0', //给提示div 增加class track:true, //提示信息跟随鼠标移动 show:false, //提示信息显示效果 hide:'explode', //提示信息消失效果 disabled:false //设置禁用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/jquery-ui-1.12.1.custom/jquery-ui.min.css"> <script> $(function () { $('#zhanggen').tooltip({ content:function () { //设置提示内容 function | 字符串 //ajax 向后端请求! return '点我让你看簧片!' }, tooltipClass:'class0', //给提示div 增加class track:true, //提示信息跟随鼠标移动 show:false, //提示信息显示效果 hide:'explode', //提示信息消失效果 disabled:false //设置禁用 }) }) </script> </head> <div id="zhanggen"> <a href="https://m.anysex.com" title="点我让你看簧片!">点我</a> </div> <body> </body> </html>
7.选项卡切换部件 Tabs_widget
选项卡切换部件也就是网站中导航栏;
7.0 初探
$('#china').tabs()
7.1 常见配置
collapsible:true, //设置所有tab 选项都可以关闭! disabled:[3], //设置成禁用true为所有,[可选] event:'mouseover', //设置切换选项卡的事件(默认为 click事件) heightStyle:'auto', //设置每个选项卡的高度 auto取最高| 默认根据内容 active:false //设置默认打开的选项卡,默认为0,设置为false 全部关闭
7.2 常见方法
$('#china').tabs('load',3); //加载远程选项卡的内容 $('#china').tabs('refresh') //刷新选项卡
7.3 常见事件
7.4 界面
8.折叠菜单部件 Accordion Widget
折叠菜单也就是我们常见的网站菜单栏;
8.0 初探
$('#zhanggen,#ul').accordion()
HTML结构
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--布局方式1开始 --> <div id="zhanggen"> <h3>首页</h3> <div> </div> <h3>主机管理</h3> <div> <p><a>主机列表</a></p> <p><a>新增主机</a></p> <ul id="ul"> <li> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </li> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> </li> </ul> </div> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </div> <!--布局方式1结束 -->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--布局方式2开始 --> <ul id="ul" style="margin-top: 10px"> <li> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </li> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> </li> </ul> <!--布局方式2结束 -->
8.1 常见配置
collapsible: true, //所有部分都可以关闭
heightStyle: 'content' //默认 auto取最高 |content根据内容
//active:false, //设置默认打开的item
//event: 'mouseover' //设置打开的 事件 默认click
8.2 常见方法
8.3 触发事件
8.4 界面调整
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> <link rel="stylesheet" href="/static/jquery-ui-1.12.1.custom/jquery-ui.min.css"> <style> #zhanggen { width: 200px; } {# #ul {#} {# width: 200px;#} {# }#} </style> <script> $(function () { $('#zhanggen,#ul').accordion({ collapsible: true, //所有部分都可以关闭 heightStyle: 'content' //默认 auto取最高 |content根据内容 //active:false, //设置默认打开的item //event: 'mouseover'//设置打开的 事件 默认click }); }) </script> </head> <body> <!--布局方式1开始 --> <div id="zhanggen"> <h3>首页</h3> <div> </div> <h3>主机管理</h3> <div> <p><a>主机列表</a></p> <p><a>新增主机</a></p> <ul id="ul"> <li> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </li> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> </li> </ul> </div> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </div> <!--布局方式1结束 --> <!--布局方式2开始 --> <ul id="ul" style="margin-top: 10px"> <li> <h3>工单管理</h3> <div> <p><a>工单列表</a></p> <p><a>创建工单</a></p> </div> </li> <h3>监控管理</h3> <div> <p><a href="">监控列表</a></p> <p><a href="">添加监控</a></p> </div> </li> </ul> <!--布局方式2结束 --> </body> </html>
9.对话框部件 dialog Widget
9.0 初探
$('<div id="dialog0" title="对话框标题">内容</div>').dialog() //title属性=对话框标题 div内容=对话框显示的内容
9.1 配置
<script> $(function () { $('#dialog0').dialog({ resizable:true, //允许调整对话框的大小 hide:"fadeOut", //隐藏对话框的动画效果 show:'fadeIn', //展示对话框的动画效果 autoOpen:false, //自动打开对话框 //width:500, //指定对话框的宽度;默认为300 //height:100, //指定对话框高度,默认auto 根据内容而定 modal:true, //莫泰遮罩层效果 buttons:{ //定制对话框中的 button按钮 确定|取消 '确定':function () { //向后台提交数据 }, '取消':function () { $(this).dialog('close') } } }); $('#button0').click(function () { $('#dialog0').dialog('open') //open()打开 对话框 }) }) </script>
9.2 方法
ar isOpen=$('#dialog0').dialog('isOpen'); //对话框是否已经打开? $('#dialog0').dialog('open'); //open()打开 对话框 $(this).dialog('close') //close() 关闭对话框
9.3 事件
9.4 界面
10.日历部件 Datepicker widget
下载:https://www.helloweba.net/down/169.html
日历部件可以统一用户提交时间数据的格式,方便用户输入;
10.0 初探
$('[name="current_date"]').datepicker(); //年月日
$('[name="current_date"]').datetimepicker(); //年月日时分秒
10.1 配置
<script> $(function () { $('[name="current_date"]').datepicker({ //defaultDate:new Date('1993/6/28') //设置默认时间 | 默认 当前时间 //defaultDate:'+1d+1m' //做日期延期 //changeMonth:true, //允许编辑月 changeYear:true, //允许编辑年 dateFormat:"yy年mm月dd日", //设置日期格式 |@时间戳 //maxDate:new Date('2019/5/18'), //设置最大日期 //minDate:new Date('2015/5/18'), //设置最小日期 showOtherMonths:true, //显示当前月之后的日期 selectOtherMonths:true, //选择当前月之后的日期 yearRange:'c-1:c+1', //选择范围限制 前1年 后1年 hideIfNoPrevNext:true, //超出日期范围 按钮隐藏 }); }) </script>
jQueryUI的datapicker不能选择时、分、秒,若需求可选择jquery-ui-timepicker-addon.js,详情:https://www.helloweba.net/javascript/169.html
11.0:输入多个值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <style> .bs-glyphicons-list1 { padding-left: 0; list-style: none; } .bs-glyphicons-list1 li { display: inline-block; width: 215px; height: 215px; padding: 10px; font-size: 15px; text-align: center; line-height: 115px; background-color: #f9f9f9; border: 1px solid #fff; } .bs-glyphicons-list1 li:hover { display: inline-block; width: 215px; height: 215px; padding: 10px; font-size: 15px; text-align: center; line-height: 115px; background-color: #563d7c; border: 1px solid #fff; } </style> <script> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $('#tags').autocomplete({ appendTo: "#wocao", source: availableTags }); $("#tags") // 当选择一个条目时不离开文本域 .bind("keydown", function (event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function (request, response) { // 回到 autocomplete,但是提取最后的条目 response($.ui.autocomplete.filter( availableTags, extractLast(request.term))); }, focus: function () { // 防止在获得焦点时插入值 return false; }, select: function (event, ui) { var terms = split(this.value); // 移除当前输入 terms.pop(); // 添加被选项 terms.push(ui.item.value); // 添加占位符,在结尾添加逗号+空格 terms.push(""); this.value = terms.join(", "); return false; } }); }); </script> </head> <body> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">添加用户查询</h4> </div> <div class="modal-body"> <form> <div class="ui-widget"> <label for="tags">编程语言:</label> <input id="tags" size="50"> </div> <div id="wocao"></div> <div class="form-group"> <label for="sql">sql</label> <textarea class="form-control" id="sql" name="sqls" rows="16" style="min-width: 90%"></textarea> </div> {# <button type="submit" class="btn btn-default">提交</button>#} </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> <div style="border:solid 10px"> <a href="{% url 'instance_pool' %}?type_id={{ type_id }}" class="btn btn-info btn-sm">返回</a> <h1 style="text-align: center">{{ database_type }}功能列表</h1> <ul class="bs-glyphicons-list1"> <li data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size: 55px"></span> <span class="glyphicon-class">增加查询功能</span> </li> <li id="reboot_redis"> <span class="glyphicon glyphicon-refresh" aria-hidden="true" style="font-size: 55px"></span> <span>重启</span> </li> {% block function %} {% endblock %} </ul> </div> </body> <script> </script> </html>
11.1:远程+多个值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <style> .bs-glyphicons-list1 { padding-left: 0; list-style: none; } .bs-glyphicons-list1 li { display: inline-block; width: 215px; height: 215px; padding: 10px; font-size: 15px; text-align: center; line-height: 115px; background-color: #f9f9f9; border: 1px solid #fff; } .bs-glyphicons-list1 li:hover { display: inline-block; width: 215px; height: 215px; padding: 10px; font-size: 15px; text-align: center; line-height: 115px; background-color: #563d7c; border: 1px solid #fff; } </style> <script> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $('#tags').autocomplete({ appendTo: "#wocao", source: availableTags }); $("#tags") // 当选择一个条目时不离开文本域 .bind("keydown", function (event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { event.preventDefault(); } }) .autocomplete({ source: function (request, response) { $.getJSON("{% url 'get_user'%}", { term: extractLast(request.term) }, response); }, search: function () { // 自定义最小长度 var term = extractLast(this.value); if (term.length < 2) { return false; } }, focus: function () { // 防止在获得焦点时插入值 return false; }, select: function (event, ui) { var terms = split(this.value); // 移除当前输入 terms.pop(); // 添加被选项 terms.push(ui.item.value); // 添加占位符,在结尾添加逗号+空格 terms.push(""); this.value = terms.join(", "); return false; } }); }); </script> </head> <body> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">添加用户查询</h4> </div> <div class="modal-body"> <form> <div class="ui-widget"> <label for="tags">编程语言:</label> <input id="tags" size="50"> </div> <div id="wocao"></div> <div class="form-group"> <label for="sql">sql</label> <textarea class="form-control" id="sql" name="sqls" rows="16" style="min-width: 90%"></textarea> </div> {# <button type="submit" class="btn btn-default">提交</button>#} </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> <div style="border:solid 10px"> <a href="{% url 'instance_pool' %}?type_id={{ type_id }}" class="btn btn-info btn-sm">返回</a> <h1 style="text-align: center">{{ database_type }}功能列表</h1> <ul class="bs-glyphicons-list1"> <li data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size: 55px"></span> <span class="glyphicon-class">增加查询功能</span> </li> <li id="reboot_redis"> <span class="glyphicon glyphicon-refresh" aria-hidden="true" style="font-size: 55px"></span> <span>重启</span> </li> {% block function %} {% endblock %} </ul> </div> </body> <script> </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
def get_users(request): username=request.session.get('username') seach=request.GET.get('term') user_obj=cmdb_models.UserInfo.objects.filter(username__icontains=seach).first() if user_obj: username=user_obj.username return HttpResponse(json.dumps({"term":username}))
扩展
jQuery-UI的CSS框架
http://www.css88.com/jquery-ui-api/theming/css-framework/
jQuery-UI的图标
http://www.css88.com/jquery-ui-api/theming/icons/