文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

WEB入门之十九 UI

jQuery UI是在jQuery的基础上，利用jQuery的扩展性而设计的针对UI的插件。它提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。...交互行为组件：交互部件是一些与鼠标交互相关的内容，包括Draggable（拖动）、Droppable（置放）、Resizable（缩放）、Selectable（选择）和Sortable（排序）等。...，其中jquery.ui.dialog.js是实现对话框组件的js文件；jquery.ui.mouse.js提供了鼠标拖动对话框的支持；jquery.ui.draggable.js实现了鼠标拖动；jquery.ui.position.js...9.8的基础上多导入了一个jquery.ui.button.js文件，该文件不是必须的，它的作用是可以把页面上原始的input按钮自动封装成jQuery UI中的Button。...表9-1-2 交互行为组件 ​组件名称​ ​说明​ Draggable 该组件可以使鼠标拖动页面元素 Resizable 该组件可以使鼠标调整页面元素的大小 9.1.1 Draggable

1.4K10

jQuery插件jQueryUI

jQuery UI是一个功能丰富的jQuery插件集合，提供了一系列用户界面组件和效果，可用于创建交互性强、视觉效果丰富的网页应用程序。...引入jQuery UI 首先，需要引入jQuery库和jQuery UI的JavaScript文件。可以通过CDN（内容分发网络）或将文件下载到本地并引用。...themes/base/jquery-ui.css">基本用法 jQuery UI提供了一系列易于使用的UI组件和效果，包括对话框、拖拽、排序、自动完成、日期选择器等。...常用UI组件和效果 以下是jQuery UI中一些常用的UI组件和效果：对话框（Dialog）：用于创建自定义对话框。拖拽（Draggable）：使元素可被拖动。...除了上述组件和效果外，还有很多其他组件和效果可供选择和使用。可以根据具体需求，在jQuery UI官方文档中查找相关组件的详细文档和示例。

4.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

    基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式，我们必须自定义布局来适合业务场景打印！我们想要什么效果？看下图 （我们没有布局之前的表单和设置布局后的表单） ?...本节知识点： easyui draggable 与 resizable 的结合使用（拖动与设置大小） 在Form添加Action Action提取来自48节的Create代码。...代码提取：jquery-easyui-1.4.3\demo\droppable 与resizable 文件下的代码 提取后代码：我自己加了点Style FormLayout.cshtml draggable({ edge: 5 }).resizable(); 代码解析： onDrag e 在拖动过程中触发，当不能再拖动时返回false。...$('.easyui-draggable').draggable({ edge: 5 }).resizable(); 边框位置5px内都可以做为设置大小的边界 运行结果：任意拖动位置 ?

    99690

    easyui(一) 初始easyui「建议收藏」

    easyui就是一个前端框架，JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的...javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签，一大段废话，通俗一点，就是简化开发，它是一个框架，和jQuery只是一个js类库， 　　　　　　easyui...soeasy~ 通过实现resizable组件效果来讲解(教会如何看文档和例子) 第一步：将下载的整个easyui文件赋值到项目下。 　　...行，导入了js类库和一些css。...-- resizable实现的属性信息讲解(HTML) data-options：该resizable组件的属性。

    3.5K30

    ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面

    实现思路 本次实现主要用到EasyUI一个非常不常用的组件Draggable（拖拽） 虽然图显示简单，但是实际做起来非常的耗时，有兴趣的朋友在尾部下来看看拖拽和实现，下面是实现思路和功能： 拖拽之后DIV...中保存了DIV的位置 部件筛选是以Css 的Display属性来控制的 部件复位是初始化全部部件 保存是保存整个范围内的Div内容来保存到数据库 实现代码 整个拖拽功能的代码如下（展开查看） jquery.min.js"> jquery-easyui-1.5/jquery.easyui.min.js">...; $('#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9').draggable('enable').resizable('enable....ddcontent").height(ddh-40) } 布局，我写了1280*800，你可以根据你系统自行计算浏览器的宽高来自适应 总结 大概说到这里，虽然是基于EasyUI的，但是其他UI

    1.7K100

    前端之JQuery

    Ajax JQuery UI JQueryUI简介 JQuery UI 是以JQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互，动画和特效和可更换主题的可视控件，我们可以直接用它来构建具有很好交互性的...(Widget) 支持版本 IE6.0+Firefox 3 + Safari 3.1 + Opera9.6和GoogleChrome JQuery UI主要分为3个部分: 交互,小部件和效果库...a: 交互 交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortabie等 b: 小部件 主要是一些界面的扩展,包括..., k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性 用于checkbox和radio prop() // 获取属性 removeProp...() // 移除属性 注意： 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。

    3.8K50

    Raphael path 拖动实现

    在官方网站上也有拖放操作的例子。可惜的是，官方的这个例子的写法只对 Circle，Rect 等有效，但对于 Path 却不起作用。...而不是距离上次 move 回调时鼠标位置的相对位移值 我们在 start 和 move 中记录并不断更新相对上次鼠标位置的相对位移值，并保存在 this.lastX 和 this.lastY 中 我们通过...那么，是不是能做出来类似 jQuery.ui 里面的 draggble 的函数呢。下面就是一个简单的扩展，为 Raphael 对象加入了 draggable 方法。...，扩展了 Raphael 对象的方法，让它们拥有了类似 jquery.ui 里 draggable 的能力。...(); 可以看到，像 jquery.ui 提供的功能一样，只需要简单的调用 .draggable() 就可以让对象被鼠标拖拽

    2K50

    jQuery基础(五)一Ajax应用与常用插件-imooc

    UI型插件 本章介绍包括拖曳、放置、排序在内的各类UI插件的使用过程，介绍各类微型插件的使用方法和注意事项，以及最新版UI中菜单工具、微调按钮、工具提示插件的效果和使用方法。  ...拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector)....draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。...3-2放置插件——droppable 除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下： $(selector...4-2检测浏览器是否属于W3C盒子模型 浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border

    17.8K20

    JavaScript学习笔记（五）——Ajax

    jQuery与Ajax的综合应用 Ajax是 Asynchronous JavaScript And XML 的缩写，意思是异步的JavaScript和xml，他是基于JavaScript和HTTP请求的一种网页编程模式...GET和POST模式： GET方式一般用来传送简单数据，大小限制在1kb以下，请求的数据被转化成查询字符串并追加到请求的URL之后发送； POST可以达到2MB，他是将数据存放在send方法中发送，在数据发送之前必须先设置...]); 参数同get serialize()序列化表单 在jQuery中，可以使用serialize函数将表单数据序列化为键值对，创建url编码文本字符串进行提交。...文档及下载地址 2. jQuery UI插件 jQueryUI 插件是一个基于 jQuery 的用户界面开发，该库提供了UI控件。...鼠标拖拽页面板块 只需要分别在拖拽源和目标上调用 draggable() 函数即可。 实现拖入购物车功能 droppable()方法实现接收容器。

    2.3K10

    treetable php,jQuery树型表格插件jQuery treetable

    插件描述：jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。...它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。 jQuery-treetable 有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。...它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。该插件使用这些属性来确定你的树看起来像。 特点 它可以显示在表列中的数据树。 它可以折叠和展开想到的目录结构。...) { var droppedEl = ui.draggable.parents(“tr”); $(“#example-advanced”).treetable(“move”, droppedEl.data...(“ttId”), $(this).data(“ttId”)); }, hoverClass: “accept”, over: function(e, ui) { var droppedEl = ui.draggable.parents

    2.2K30

    JQuery EasyUI window 用法

    JQuery代码 var $win; $win = $('#test-window').window({ title: '添加课程设置信息', width: 820, height...Window需要依存于以下的三个组件： * 可拖放(Draggable) * 调整大小(Resizable) * 面板(panel) 下面来介绍Window的具体用法，首先来看属性大多数的属性和面板...9000 draggable 布尔 定义窗口是否可被拖动 true resizable 布尔 定义窗口是否可以被改变大小 true shadow 布尔 如果设置为true，窗口的阴影也将显示。...false border 布尔 定义面板的边框 true doSize 布尔 当设置为true，面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false...布尔 定义在初始化的时候最大化面板 false closed 布尔 定义在初始化的时候关闭面板 false href 字符串 一个远程的URL加载数据，然后显示在面板中 null loadingMessage

    1.4K20

    弹出层之1：JQuery.Boxy (二)

    在《弹出层之1：JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法，本次讲下手动创建实例，new一个boxy对象是很容易的，传递一些参数对象就能满足不同的需求了。...Boxy.confirm(message, callback, options) 显示模式，非可关闭对话框显示的含有确定和取消按钮的消息。回调只会在用户选择了“确定”时被调用。...getInner() 返回一个jQuery对象包装对话框的内部区域-框架内包括标题栏一切。 getContent() 返回一个jQuery对象包装对话框的内容区域-框架内的一切，不包括标题栏。...centerAt(x,y) 把对话框移动到中心坐标为(x,y)的位置上。 center(axis) 移动对话框，使其在视野的中央。可选参数axis可以是"x","y"中的任意一个中心轴。可链接。...toggle() 触发对话框的显隐属性。可链接。 hideAndUnload(after) 在隐藏后立即执行卸载。在卸载之前执行after回调函数。可链接。

    5.1K20

    基于jsplumb构建的流程设计器

    jsplumb依赖的库 jquery-ui.js jsplumb依赖的库，进行拖拽绑定 contextMenu.js 实现右击菜单 mustache.js 模板引擎渲染活动，避免字符串拼接 实现思路...活动添加 通过mustache的render方法渲染添加到html后，需要调用draggable方法让活动能够进行自由拖动，其中grid参数作用是固定每次拖拽移动最小距离，便于不同节点经过移动后对齐...containment: 'parent', grid: [8, 8] }) 活动删除 通过jsPlumb.remove方法删除，会删除相关活动与连接的变迁，参数是活动id，通过右键菜单的点击事件获取属性...，通过jsPlumb.draggable方法的stop方法注册实现 jsPlumb.draggable(id, { containment: 'parent',...节点可以添加相关锚点，连接不同锚点会自动绘制连线，在实际操作时连线要求锚点对准操作精度较高不便捷，所以我们通过设置节点整体对象为连接对象，可实现鼠标放置在活动div范围内进行拖拽连线，需要注意makeSource

    67220
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券