您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQueryUi > 正文

jquery ui Interactions selectable可选择元素

2013-12-12 11:12:33 作者:天外飞仙 人气:2484 Views

jquery ui Interactions selectable可选择元素

使用鼠标来选择元素,单独或在一组。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"/><title>jquery ui Interactions selectable可选择元素</title><meta name="keywords" content="jquery,jquery博客,jquery吧,jquery插件,jquery 特效,jquery 教程,jquery 效果,jquery ui,前端开发,web前端,web前端开发,天外飞仙,前端资源,html+CSS,JavaScript,html5,css3,css,css学习,css教程,浏览器兼容,php" /><meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发" /><link rel="shortcut icon" href="http://www.jqueryba.com/favicon.ico" type="image/x-icon"/><link rel="profile" href="http://gmpg.org/xfn/11" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.jqueryba.com/rss/" /> <link rel="stylesheet" href="http://www.jqueryba.com/jqueryui/jquery-ui.css"> <script src="http://www.jqueryba.com/jqueryui/jquery-1.9.1.js"></script> <script src="http://www.jqueryba.com/jqueryui/jquery-ui.js"></script> <link rel="stylesheet" href="http://www.jqueryba.com/jqueryui/style.css"> <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script></head><body><ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li></ol></body></html>

使一个DOM元素(或一组元素是可选的)。点击一个框,光标选择项目。按住CTRL键,使多个不相邻的选择。

jQuery吧的在线效果DEMO

链接:http://www.jqueryba.com/1636.html(转载时请注明本文出处及文章链接)
分类:jQueryUi
标签:,

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!