前言 由于时间的原因。这个demo只兼容IE8，IE9。其他浏览器暂时不支持。不过jsplumb本身是支持各种浏览器的。 写这篇文章是因为我在实际开发中遇到一个需求，支持拖拽模块到指定的容器里。并且每个模块会有自己的output 和input。开始觉得很酷也很变态。经过一段时间的调研，特把结果分享给大家。不足之处，敬请指正。 看了题目里的3个J。可能有的朋友觉得头晕，需要这么多东东？我先逐一介绍一下。 第一个jquery是我们平时经常使用...
先给大家展示下效果图： 目录： 这里是以corethink模块的形式，只需要安装上访问 index.php?s=/test/index 1.建好模块目录，写好模块的总体文件 opencmf.PHP <?php return array( // 模块信息 info => array( name => Test, title => Test, icon => fa fa-newspaper-o, icon_color => #9933FF, description => Test, developer => pangPython, website => http://blog.csdn.net/u012995856/, version => 1.3.0, dependences =>...
首先看一下自定义提示框的效果图 alert 普通的提示当然可以自定义样式confrim 确认框 支持callback代码如下: //message 提示的信息 ,callback(true/false)回调函数window.shconfirm = function (message, callback) 回调函数参数为 true/falseprompt 邀请用户输入框代码如下: //message 提示的信息 ,callback(msg)回调函数（用户输入的消息）, param：regex 输入的 正则验证，regexmsg 正则验证不通过的提示window.shprompt = fun...
截图: controller代码： 代码 代码如下: public ActionResult CalendarDisplay() { BL.DateEventBL de = new BL.DateEventBL(); //获取当日日期,使用能被javascript转换成日期的格式 DateTimeFormatInfo myDTFI = new CultureInfo("en-US", false).DateTimeFormat; string utcTime = DateTime.Now.ToString("MMM dd,yyyy HH:mm:ss", myDTFI); ViewData["currentDay"] = utcTime; //获取当月有事件的日期 List dateHaveEvent = de....
如何开始使用 首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。 组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui'开头的，比如:‘ui.tabs'。我在下面的用‘我'的拼音(‘wo')。 代码如下: $.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype) $.Widget基类含有一个重要的属性‘...
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。 拖拽原理 首先要明确几个概念。 ource：拖拽源，要拖动的元素。 taerget：拖放目标，能够放入source的容器。 拖拽的动作分解如下： 1. drag start：在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4. drag lea...
主要参数 jQuery UI Dialog常用的参数有： 1、autoOpen：默认true，即dialog方法创建就显示对话框 2、buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3、modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住 4、title：标题 5、draggable：是否可手动，默认...
所以还是自己动手丰衣足食，还是坚持简单就是美的代码风格。 试试在iframe里嵌入一个测试页面，你可以使用鼠标拖动项目，调整分类： 当然，这并不是我要的最终效果，只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上，还要增加自动排序，位置变更后恢复之前元素bind的jQuery事件等。 代码 代码如下，如要复制，请先查看纯文本版本！ 代码如下: Drag & Drop Test <script type="text/javascript" src="https://...
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告，今天这篇文章将介绍怎样使你的页面中的元素震动起来。要达到这个目的我们需要使用到Jquery和Jquery UI。 首先让我创建一个震动块，可以是图片，也可以是普通的dom元素，如div、span等，把元素的id命名为shake，这里可以任意命名。我们用图片如下： 代码如下: Jquery UI没有现成的使元素震动的方法，我们需要借助于effect方法来实现，语法如下： 代...
今天我们用jquery ui dialog来做一个弹窗特效。我们先看下效果截图： 我们可以看到，点击的时候，弹窗出现，而且这个弹窗是居中的，还是可以拖动的。。。实现这一切，只要以下代码： 我们可以看到，我对pop这个div，实现的方式是让它不要autoopen，点击的时候，我只要一句dialog,open就搞定了，借助于jquery ui，我们做弹窗就是这么简单。。。当然了，大家可以看到，我还有一个插入数据的功能，这个功能，我采用了jquery 的appendt...
效果： 代码如下: 使用了Jquery UI ,要导入的js和css: var emails=["163.com","yahoo.com","yahoo.cn","126.com","sina.com"]; $( function () { //为输入框绑定事件 $( "#email" ).keyup( function(){ emailiInp(); }); }); function emailiInp(){ var arrs= new Array() inpVal=$( "#email" ).val(); //根据输入的值，动态的创建下拉列表 $.each(emails, function (index,info){ if (inpVal.indexOf("@" )==-1) { //没...
使用jQuery ui首先需要引入jQuery类库，jQuery ui js脚本和jQuery ui css样式表。代码示例如下：代码如下: 注：引入js脚本时，需先引入jQuery类库，后引入jQuery ui 脚本 下面为两种实现步骤： 思路一： 第一步 实现两个datepicker组件。需要定义两个input标签，类型为text，并指定id属性 HTML代码如下代码如下:开始日期：结束日期： 在js代码中得到两个input元素的jQuery对象，并将其转化为datepicker组件 Js代码如下代码如下...
本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下： 这是用Jquery写的代码，仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢，写的一个小东西。参考了下网上的其他人写的类似代码，但是不完全模仿#typewords { } #write { } #container {border:2px solid red;width:800px;height:500px; } #draggable {position:absolute;z-index:5;width:200px;height:200px;top:20px;left:50px;border: 3px sol...
本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码。分享给大家供大家参考。具体如下： 今天给大家分享一款基于jQuery UI的网站渐变导航菜单，可作为主导航，带渐入渐出效果，鼠标移过菜单后，菜单项上显示圆角背景，本地测试时，请注意引入的几个JS脚本文件，最好是保存到你本地，菜单兼容性也不错。 先来看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-c...