JQUERYUI - 技术教程文章
jqueryUI tab标签页代码分享
本文实例为大家分享了jqueryUI tab标签页的具体代码，供大家参考，具体内容如下 var temp=1;var arr=["我的首页"];//号点击关闭li$("#tabs").delegate( ".ui-icon-close", "click", function() {var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );var val= $( this ).closest( "li" ).children("a").text();for( i=0;i<arr.length;i++){if(arr[i] == val) {arr.splice(i, 1);break;}}// alert(paneiId);$...
jQueryUI Sortable 应用Demo(分享)【图】
最近工作用需要设计一个自由布局的页面设计。我选了jQuery UI 的 sortable ，可以拖拽，自由排序 使用很方便，写一个demo，做个记录。 第一、单项目自由排序 下图效果代码段： <script type="text/javascript"> $(function () {$("#box_wrap").sortable({helper: "clone",placeholder: "box-holdplace",sort: function (e, ui) {//排序时触发事件},// handle: ".handle",//指定元素内的某种元素才可以拖动，非常有用}).disableSele...
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案【图】
前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛，在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下，也顺便告诉大家如何解决这个问题。 首先先上图描述一下问题： 先来张正常的图：如上图，整个div层被我设置了固定高度和滚动条。页面如上所示，在可排序区域（黄色列表区域）可见情况下，从左面向右边拖拽时，可以成功触发排序的操作。 接着再来张bug图上图为bug触发说明图，将滚动...
jQueryUI Datepicker组件设置日期高亮
最近在看JQueryUI Datepicker组件的时候想到有时候我们需要高亮某些日期，而不仅仅是当前日期和选中的日期，这是我们就需要在日历组件初始化的时候给某些日期设置成高亮，以表示这些日期和其它日期有区别，比如说可以表示这些日期有一些meeting或者task。对于这种需求可以通过使用组件的beforeShowDay(date)函数来实现，这个函数会在Datepicker组件初始化的时候对于每一天都调用一次这个函数来做一些定制的功能，从而正好可以实现我...
设置jQueryUI DatePicker默认语言为中文
datepicker控件默认是英文的，可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值，但是每次使用是都配置这些属性不免太麻烦了，可以增加一个js文件将中文配置都放在里面，每次使用直接引用即可，这里放在jquery.ui.datepicker-zh-CN.js中，内容如下：代码如下:jQuery(function($){ $.datepicker.regional[zh-CN] = { closeText: 关闭, prevText: <上月, nextText:...
jQueryUI DatePicker 添加时分秒【图】
jquery.ui 的 datepicker 默认是年月日的jquery 插件，如果添加时分秒 只需要做如下修改即可 1. 下载jquery-ui-timepicker-addon.js ，并在页面加载 2. 页面添加如下 timepicker 的样式即可代码如下:.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } .ui-timepicker-div dl dd { margin: 0 10...
jQueryUI中的datepicker使用方法详解【图】
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。 之前做的一个排班考勤系统，跟时间打交道较多，对时间控件做过一些对比，觉得jqueryUI里的这个datepicker更为实用，下面抽点时间给大家整理，方便以后查阅，同时也希望能帮助到大家！1，引入js，css<link rel="stylesheet" href="http://code.jquery.com/ui/1...
jquery实现仿JqueryUi可拖动的DIV实例【图】
本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下： 这是用Jquery写的代码，仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢，写的一个小东西。参考了下网上的其他人写的类似代码，但是不完全模仿 <html> <head> <meta charset="utf-8" /> <style type="text/css"> #typewords { } #write { } #container {border:2px solid red;width:800px;height:500px; } #draggable {position:absolute;z-ind...
jqueryUI里拖拽排序示例分析
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果） 其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序 这个是html代码代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h2><a href="#">T-Shirts</a></h2> <div> <ul> <li>Lolcat Shirt</li> <li>Cheezeburger Shirt</li> <li...
jQueryUI写一个调整分类的拖放效果实现代码【图】
所以还是自己动手丰衣足食，还是坚持简单就是美的代码风格。 试试在iframe里嵌入一个测试页面，你可以使用鼠标拖动项目，调整分类： 当然，这并不是我要的最终效果，只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上，还要增加自动排序，位置变更后恢复之前元素bind的jQuery事件等。 代码 代码如下，如要复制，请先查看纯文本版本！ 代码如下:<!DOCTYPE html> <html> <head> <title>Drag & Drop Test</title> <met...
jQueryUI如何自定义组件实现代码
如何开始使用 首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。 组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui'开头的，比如:‘ui.tabs'。我在下面的用‘我'的拼音(‘wo')。 代码如下:$.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype) $.Widget基类含有一个重要的属性‘...
jQueryUI的Dialog的简单封装
写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。DialogHelper的源代码如下： 代码如下://--对话框辅助对象-begin //现在这个对象只是简单的封装(未来可能会复杂些)。 //其作用就是简化jQuery UI的dial...
jqueryuitab_html/css_WEB-ITnose
jQuery UI HTML CSS 利用jquery ui调试了一天的切换效果没成功，这不晚上做个demo，做完这个demo后页没出现切换效果，不知道为什么，应当该引用的js或者css也都引用了啊，但就是没有切换效果，求大侠们解释，不胜感激，快啊 急急急！！！ <script src="js/jquery-ui-1.10.2.custom.min.js" type="text/javascript" /> <br /> <script type="text/javascript"> <br /> $("#tabs").tabs({ collapsible: tru...
在http://jqueryui.com/上下载的案例进入了太多的css,js，怎么取得这些？_html/css_WEB-ITnose
在http://jqueryui.com/上下载的源码，每一个案例上在css，js上引入了所有的css和js,太麻烦了，怎么去掉不需要的样式，脚本？ --菜鸟一枚 回复讨论(解决方案) 你想散看，就该在这下载。 https://github.com/jquery/jquery-ui https://github.com/jquery 你想散看，就该在这下载。 https://github.com/jquery/jquery-ui https://github.com/jquery 谢啦。
点击一下锁住其他内容，JqueryUI有这个功能吗？_html/css_WEB-ITnose
我要做个网站，要做个点击一块内容 弹出 然后锁住其他区域 怎么用jqueryUI做？ 回复讨论(解决方案) 在展示内容后面,要锁住区域前面,加一个DIV就行了 不就是 模式对话框
：关于使用jqueryUI组件后页面被某个div遮罩导致超级连接无法点击的问题_html/css_WEB-ITnose
我使用了jquery ui组件jqgird。 正常的显示效果为： 但是我在另一个项目使用的时候，就出现了一个问题，那就是貌似页面被一个半透明的层遮罩住了，导致了页面颜色变暗和导航栏无法被点击。 出现问题的页面（整个页面大部分出现颜色变暗以及导航栏的标签无法被点击的问题）： 其他正常的页面（没有使用jqgrid的页面颜色正常，导航栏可点击）： 估计出现遮罩效果的div： CSS： ...
jqueryuidialog在jsp页面中ie浏览器下(ie9)无法正常显示_html/css_WEB-ITnose
jQuery UI JSP IE dialog jquery ui1.8 dialog 最简单的demo在html静态页中，ie9浏览器下可以正常显示(ie其他版本未测试),如下图 但是完全相同的代码移植到jsp页面，运行在tomcat服务器下就无法正常显示，弹框不出现，只有遮罩层，见图 实在找不出原因了，求有相同经历且已经解决的前辈指点！ 回复讨论(解决方案) 补充下，移植到jsp中之后只是在ie下无法显示弹框，在火狐和google浏览器下是正常的。 demo正常 ...
jqueryui的dialog样式问题求助！！！右上角的关闭和右下角的控制大小的都和demo中的不一样！_html/css_WEB-ITnose【图】
jQuery UI 我刚开始学习使用jquery ui，用的是稳定版本的。 我引入的相关文件如下： html如下： 测试dialog js代码如下： $(function(){ $( "#dialog" ).dialog(); }) 我都是按要求写的，但是运行结果却是如下图： 求教高手指导一二啊！我这是什么问题啊？？？ 回复讨论(解决方案) jQuery UI Dialog - Default functionality $(function() { $( "#dia...
求助：关于使用jqueryUI组件后页面被某个div遮罩导致超级连接无法点击的问题_html/css_WEB-ITnose
本帖最后由 bbsince1991 于 2013-05-18 11:44:13 编辑 我使用了jquery ui组件jqgird。 正常的显示效果为： 但是我在另一个项目使用的时候，就出现了一个问题，那就是貌似页面被一个半透明的层遮罩住了，导致了页面颜色变暗和导航栏无法被点击。 出现问题的页面（整个页面大部分出现颜色变暗以及导航栏的标签无法被点击的问题）： 其他正常的页面（没有使用jqgrid的页面颜色正常，导航栏可点击）： 估计出...
jqueryuidialogie下的问题_html/css_WEB-ITnose
本帖最后由 chinaskysun 于 2012-11-26 16:31:50 编辑 ie下是这样样子： 应该是这个样子： 请问IE下 dialog 覆盖不了列表框的问题该如何解决。 回复讨论(解决方案) 给弹出的dialog外加一层iframe就行了 嗯，我也找到了一个解决问题的插件。 https://github.com/brandonaaron/bgiframe/downloads
javascript-使用JQueryUi draggable可拖动的选定HTML DIV元素【代码】
我有一个可拖动的jQuery对象数组.我想要的是拖动数组中存在的任何元素时,还应该拖动所有其他元素. 以下是我尝试过但没有成功的示例代码$(event.target).parents('.ui-class-name').draggable({disabled : false, helper: function() {var allSelectedEle = $($selected).map( function() {return this.toArray() });return allSelectedEle; } });这里$selected是jQuery对象的数组 更新：这是sample标记解决方法:您需要保存元素的初...
javascript-JqueryUI拖动：游标与可拖动元素不在同一位置【代码】
我正在使用最新版本的JQuery和JQuery UI来了解拖放功能.我面临一个小问题-主要是由于鼠标拖动.As you can see that I am creating stacks with some items in it. Now if these stacks are just inside body – I mean div.allstacks is inbody there is no problem. But as soon as I put all these stacks insidea div#left-panel, the problem of cursor losing focus starts. This means now when I drag an item, after hori...
javascript-如何手动触发搜索,然后在jQueryUI自动完成中手动选择第一个选项？【代码】
如何触发搜索并在jQueryUI自动完成中手动选择？在小提琴示例中,我设法触发了搜索,但是无法触发select方法并选择第一个选项. JSFIDDLE solution in this线程似乎已过时.它给出了这个错误：Uncaught TypeError: Cannot read property '_trigger' of undefined$(document).ready(function() {var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];var tag = $('#ta...
javascript – JQueryUI Slider – 当前位置的工具提示【代码】
目前我有一个滑块和一个小输入文本框,根据您在其上滚动的位置进行更新. 这是javascript：$("#slider").slider({value: 500,min: 0,max: 1000,step: 50,slide: function(event, ui) {$("#budget").val(ui.value);},change: function(event, ui) {} }); $("#budget").val($("#slider").slider("value"));?这是html / css：<input type="text" id="budget" style="width:50px;text-align:center"/><div id="slider"></div>?然而,看起来...
javascript – jQueryUI多个可放置的元素【代码】
为什么当我将可拖动的div拖到droppable1 div时,它总是放在droppable2 div中. 此外,我遵循jQuery UI快照选项,但它不起作用.我怎么能做到这一点,而不是拖动实际的可拖动元素,它拖动它的实例/副本,并有droppable接受这些可拖动元素的多个.<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script>$(function() {$( '#draggable' ).draggable();$( '#droppable1' ).droppable({drop: function(event, ui){$(th...
javascript – 如何使用jqueryui对话框按钮提交表单,【代码】
我想使用jqueryui按钮提交表单.我有一些代码,但它不起作用.这是代码：<script type="text/javascript"> function findUrls() {var text = document.getElementById("text").value;var source = (text || '').toString();var urlArray = [];var url;var matchArray;// Regular expression to find FTP, HTTP(S) and email URLs.var regexToken = /\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig;// Iterate through any URLs in the...
javascript – 从jQueryUI对话框中删除标题栏？【代码】
如何删除标题栏. 我在这里检查了API但找不到任何东西. http://api.jqueryui.com/dialog/ 我注意到其他“解决方案”具有更酷的GUI,然后是jQuery,尤其如此 http://www.ericmmartin.com/projects/simplemodal/ 但是我想使用jQueryUI b.c.所有资源……在线API文档,教程等 我只需要知道如何摆脱标题栏？ 谢谢解决方法:将el作为创建对话框的原始元素：$(el).siblings('.ui-dialog-titlebar').remove();见http://jsfiddle.net/alnitak/N9T...
javascript – “appendTo”-method在jQueryUI中将draggable连接到可排序元素时无法正常运行【代码】
我正在尝试将jQueryUI可拖动元素连接到可排序元素,并且助手始终附加到正文.当我将可拖动元素拖到可排序元素上时,帮助器将插入到可排序元素中.尽管可排序的元素都会在拖动时附加到body元素.$(".a").sortable({appendTo: document.body,connectWith: ".a",helper: "clone" }).disableSelection();$("section div").draggable({connectToSortable: ".a",helper: "clone",revert: "invalid",appendTo: document.body }).parent().disab...
javascript – 使用jQueryUI对话框,如何获取打开对话框的元素？【代码】
例如,我有许多行数据,每行都有一个带有“编辑按钮”类的“编辑”按钮. 我对.edit-button元素有一个.live()单击处理程序. 在其中一个“按钮”的对话框回调中,我想将该行作为参数传递. 具体来说,我想得到.edit-button的父tr(在表中)的ID属性. 通常,我可能会做以下事情：var tr = $(element).parents("tr:first");…获取tr元素. 这将如何实现？解决方法:与.live绑定时(‘click’,函数(eventObj) eventObj将允许您访问eventObj.target,...