1、背景 在使用 EasyUI 各表单组件时，尤其是使用 ComboBox（下拉列表框）、DateBox（日期输入框）、DateTimeBox（日期时间输入框）这三个组件时，经常有这样的需求，下拉框或日期只允许选择、不允许手动输入，这时只要在组件选项中加入 editable:false 就可以实现，但有一个问题，就是：一旦选择了，没办法清空。经过研究，可以用一个变通的解决方案：给组件加上一个“清除”按钮，当有值是，显示按钮，点击按钮可清空值，当无值是...
1、背景说明 在使用 JQuery EasyUI 各表单组件时，实际客户端页面元素是由 JQuery EasyUI 生成的，元素的焦点切换，虽然 Tab 键可以正常用，但顺序控制属性 tabindex 不起作用，因为页面看到的元素，是生成的，没有tabindex 属性，而真实的元素被隐藏了。本文通过一个自定义函数，实现Tab 和 回车键的焦点切换功能。 2、函数定义 通过捕获窗口按件，对回车和Tab键进行了热点切换处理。先根据当前焦点，获取需要tabindex 属性...
效果图： 图标(function($){//初始化清除按钮function initClear(target){var jq = $(target);var opts = jq.data(combo).options;var combo = jq.data(combo).combo;var arrow = combo.find(span.combo-arrow);var clear = arrow.siblings("span.combo-clear");if(clear.size()==0){//创建清除按钮。clear = $(<span class="combo-clear" style="height: 20px;"></span>);//清除按钮添加悬停效果。clear.unbind("mouseenter.combo...
1、背景 在使用 EasyUI 各表单组件时，尤其是使用 ComboBox（下拉列表框）、DateBox（日期输入框）、DateTimeBox（日期时间输入框）这三个组件时，经常有这样的需求，下拉框或日期只允许选择、不允许手动输入，这时只要在组件选项中加入 editable:false 就可以实现，但有一个问题，就是：一旦选择了，没办法清空。经过研究，可以用一个变通的解决方案：给组件加上一个“清除”按钮，当有值是，显示按钮，点击按钮可清空值，当无...
需求分析1）需要首页，末页功能2）有点击查看上一页，下一页功能3）页码到当前可视页码最后一页刷新页面 实现思路 也是分为三部分处理1）点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图首页状态 和 末页状态代码执行结果截图2）点击可视页码截图3）点击上一页或者下一页，，需要刷新页码状态时截图，昨天表示当前页码为7，右图是点击上一页，刷新页码时的状态代...
场景： eg:在管理一篇博文时，因博文的管理有一列叫：状态的列，该列有诸多状态，如：正常，待审核，删除等... 此时，若使用Select下拉列表进行状态选择，并在选中具体项值后，通过Ajax异步提交，在效果及体验上就能得到更大化的体验。 下拉列表例子如下： <select id="status"><option value="0" >待审核</option><option value="1" >未通过审核</option><option value="2" >制作中</option><option value="3">制作完成</option>...
效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>jquery实现静态搜索功能</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文...
由于之前自己做过jquery分页，就是调用jni接口时，只能用前台分页解决显示问题。最近看到有人提这样的问题：一个请求传过来上万个数据怎么办？于是萌生了写这篇博客的想法。 效果展示：因为核心代码主要在前端jquery，为了简便，后台就用servlet遍历本地磁盘目录文件的形式模拟响应的数据。 本项目的目录结构：本项目的本地遍历文件夹结构：处理显示请求的servlet: package com.cn.action; import com.alibaba.fastjson.JSON; impo...
效果图：代码如下：<link rel="stylesheet" href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css" rel="external nofollow" ><script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <table class="table table-bordered "><thead class="tab_head"><tr><td> <input type="checkbox" onclick="selectAll()"></td><th>角色名称</th><th>角色说明</th><th>所属系统...
HTML5+jquery实现的搜索匹配效果，或者说是搜索过滤，当你在文本框输入一个字符时，如果下边的列表中有以此为开头的内容时，将自动为你显示相关内容，示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，我想对你是有帮助的 效果图：代码如下： <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><meta name="author" content="dony"><meta http-equiv="cache-control" content="no-cache"><meta ...
心血来潮想为自己的小项目做一个提醒系统，譬如私信，评论等消息都能及时传递过来。由于道行尚浅，网上那些长轮询对于我略微复杂，于是觉得还是自己写一写试试比较好。 我的思路是，单独在数据库中建一个提醒表，表主要由接收者的id和消息类型两个字段组成 /* 前台提醒表 */ CREATE TABLE IF NOT EXISTS notification(id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 主键自增mid INT NOT NULL DEFAULT 0, ...
套打就是指不打印表单上的表结构和固定的文言，只把会变化的数据打印出来，下面的例子就是不把name和name2打印出来，只把aaa和bbb打印出来。 1.代码 <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script> </head> <body> <table> <tr> <td> name: </td> <td></td> </tr> <tr> <td> name2: </td> </tr> </table> <div class=...
先来看看下面实时效果演示：用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为disabled。 新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行。编辑铵钮状态恢复。 更新与删除铵钮功能没有什么特别的。 在ASP.NET MVC视图html代码如下，普通的表格table，普通的html标签：删除的铵钮功能：$(.Delete).click(function () {var flag = confirm(你确认是否删除记录？);if (flag) {var tr = $(this).close...
效果图：代码如下： <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#code{width:80px;height:30px;font-size:20px;font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; }</style></head><body> <div> <input type = "text" id = "input"/> <input type = "button" id="code" /> <input type = "button" value = "...
效果图：图（1） 初始图图（2） 点击后 代码如下： <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+CSS3文章点赞功能代码</title> <style type="text/css"> body{margin:0;padding:0; } .text-content{m...