jQuery 设ToolsBarMenu

2024-11-04

轻量级jquery框架之--工具栏(toolbar)

工具栏需求: (1)要求工具栏可以通过JSON配置格式生成,这样可以从服务器端控制生成的JSON来控制UI层面的按钮状态 (2)可以自定义按钮的图标样式. (3)可以定义按钮事件,按钮事件需要支持以字符串形式定义(服务端对应的按钮JSON配置里的事件配置为字符串形式) (4)支持工具栏全局事件,即点击任意按钮都触发的事件 (5)支持编程方式禁用.启用.添加.删除按钮 (6)支持配置额外的事件参数,考虑参数中附带权限标志 (7)工具栏需要考虑可以简单集成到tree组件.datagrid等可能需要用

vue ：关于引用jquery的二三问题

webpack版本:3.6.0 首先是引用jquery. 有两个地方要改. 1 (项目地址)/build/webpack.base.conf.js 2 (项目地址)/src/main.js webpack.base.conf.js: (1) 在'use strict'下面引入webpack变量. const webpack = require('webpack') (2) module.exports 对象: (有就修改,没有就添加.) resolve 对象: resolve: { extens

jQuery上定义插件并重设插件构造函数

插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $(el).on('click', dismiss, this.close) } Alert.VERSION = '3.3.7'

jquery实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态

功能: 输入手机号,实时判断手机号输入的是否符合规则: 如果不合规则,则提交按钮为禁用状态,手机号信息不可提交,按钮显示灰色背景: 如果符合规则,则可提交所输入的手机号信息,并将按钮背景设成红色. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <sty

流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)

去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程设计器最终实现的效果及应用案例放到网上(Demo),欢迎大家围观,欢迎园友们提出宝贵意见. 1.流程设计器整体外观 2.流程实例名称设置 3.活动审批人设置 4.条件公式设置以上是流程设计器的实现效果. 接下来想向园友们推荐一下我这几年来用业余时间做的一个云考勤系统(大部分时间花在做流程设计器.流

流程设计器jQuery + svg/vml(Demo6 - 增加结点属性及切换)

到目前流程设计器流程结点的拖拽操作已基本完成,接下来就到结点的属性开发了.前面已经开发过流程模板的属性了,结点属性跟模板属性类似,从属性模板定义copy一份,然后按各结点类型进行调整就ok. 1.先来回顾下流程模板属性,这里对流程模板属性稍微进行了调整,效果图如下: //定义流程模板属性 TemplateProperty = function () { if (typeof TemplateProperty.defaults == "undefined") { /*第一次定义对象时为T

流程设计器jQuery + svg/vml(Demo2 - UI界面增加属性显示)

设计器UI界面有了,接下来结点的属性怎么显示呢,采用弹窗的话觉得不方便用户:用easyui的propertygrid在最右边显示,又觉得要引入easyui,使得插件变复杂了:最后决定自己写. 1.实现效果如下: 1.1.属性显示 1.2.属性隐藏 1.3.属性分组收起 2.jQuery - 左右拖动分隔条(Demo) 3.流程板板属性定义及初始化 //定义流程模板属性 TemplateProperty = function () { if (typeof TemplateProperty.def

流程设计器jQuery + svg/vml(Demo1 - 构建设计器UI界面)

之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI界面,如下: 用到的图标有: 用CSS精灵工具如CSS Satyr可以把它们合在一起. C#的String.format用习惯,觉得js里拼字符串不好使,先模拟实现一个: function formatString() { var formatStr = arguments[0]; if (type

使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

Jquery每行最后一个LI边距设为0

下面用的是jquery方法,请加载jquery插件 <script type="text/javascript"> $(function(){ $('#newhouse li:nth-child(3n+2)').css('margin-right', '0px'); }) </script> 主要代码:nth-child(3n+2) 其中N表示倍数,2是偏移的位置数,自己调整即可

Jquery显示和隐藏元素或设为只读（含Ligerui的控件禁用，实例说明）

一.隐藏和显示元素 $('#button_save_12').css('display', 'none'); // 隐藏按钮 $('#button_save_12').css('display', 'display'); // 显示按钮 // 或者采取 $('#button_save_12').hide(); $('#button_save_12').show(); 二.设为禁用,只读 $('#button_save_12').attr("disabled", "disabl

流程设计器jQuery + svg/vml(Demo3 - 添加流程结点)

经过前面的准备工作,终于把设计器的主要UI界面搭建好了,接下来到添加流程结点,效果如下图代码:GoFlow_03.zip 演示地址:Demo 微信演示公众号: 另:Silverlight版 Silverlight版Demo

基于JQuery的WEB套打设计器jatoolsPrinter1.0

开发web套打应用时,如快递单打印,一般要经过以下步骤:1. 扫描快递单据,保存成一个图片文件2. 将底图作成<img>3. 在<img>上放置打印项,试着打印到打印机,观察有无偏移4. 有偏移,则调整,再试打.5. 无偏移,则将样张,改造成相应语言的动态页面,如jsp,asp,php等. 上述过程中,如果没有可视化的设计工具,3,4两步是最麻烦的,往往要经过多次调整,特别是单据比较多的应用,工作量挺大.所以,jatoolsPrinter打印控件的套打开发设计器,就是帮助你简化套打

jQuery操作select控件取值和设值

1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".select_B").empty();// 清空后一个select var option = $("<option>").val(1).text('xxx');// 按照实际业务要求重新赋值option $(".select_B").append(optio

jQuery中的尺寸及位置的取和设

1.offset(); 获取位置值: $(selector).offset().left; $(selector).offset().top; 设置位置值: $(selector).offset({top:100:left:100}); 2.height(); 获取元素的高度值: $("selector").height(); 设置元素的高度值: $("selector").height(20); 3.width(); 获取元素当前计算的宽度值:(不包括补白.边框和

基于jQuery的web在线流程图设计器GooFlow

简易的流程图设计控件,效果图: JavaScript源文件在GooFlow.js中,样式文件是GooFlow2.css.可以自定义样式. GooFlow_item类是每个项的样式属性. 但估计实现任务要求需要改动的地方比较大,再斟酌考虑其他控件.

ios 设备用jquery live绑定 click 事件不管用

问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointer},让他认为你是一个可以点击的标签,这样就可以了原文:http://blog.sina.com.cn/s/blog_6c969b4a0102wfkq.html

流程设计器jQuery + svg/vml(Demo5 - 撤消与重做)

上篇完成了画线,接下来是撤消与重做. 代码:GoFlow_05.zip 演示地址:Demo 微信演示公众号: 另:Silverlight版 Silverlight版Demo

流程设计器jQuery + svg/vml(Demo4 - 画连线)

流程结点可以添加了之后,接下来到画结点与结点之间的连线,效果图如下很眼馋visio的连线可以折来折去,这里实现的连线比较简单. 首先是把连线的类型分为Z(折线).N(折线)及I(直线)3种类型,然后在两个结点间划线的时候,根据两个结点间的位置来决定画哪种线. 1.结点2在结点1左边 2.结点2在结点1右边 //计算两个结点间连线的类型 p.calcLineType = function (n1, n2) { var x11 = n1.left, x12 = n1.left + n1.width

【深入浅出jQuery】源码浅析--整体架构

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

jQuery学习之路（1）-选择器

▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jQuery 设ToolsBarMenu

热门专题