最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~
一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~
1.readonly和disable的区别
readonly:只读,不可编辑,提交表单时,值会提交到后端。
disable:禁止(包含了“只读”和“不可编辑”),提交表单时,值不会提交到后端。
如果需要提交到后端,在表单提交之前,手动把disable修改为false。
text叫只读,select有“可输入”和“可编辑”2种~
Html
<input type="text" readonly="readonly" disabled="disabled"/>
Jquery
$("#id").attr("readonly",true);
$("#id").attr("disabled",true);
实际场景:
如果只读,用readonly。
如果不但只读,而且后端不需要这个数据,可以用disable。也可以用readonly,但是提交之前,把disable改为false。
readonly和disable还有个重大的区别,readonly的控件颜色是“白,偏亮的色彩”,disable是控件颜色"黑,偏暗的色彩"。
为了给用户,统一的效果,如果不可编辑,建议统一使用“readonly”或“disable”。
如果是disable,后端又需要数据,一种办法是修改前端代码,另外一种是修改后端代码(后端存在不需要修改这几个字段的update方法)。
Easyui和Combobox
Easyui中,textbox有readonly属性。
$('#projectName').textbox({
readonly:false
});
Combobox没有找到readonly属性,找到了“禁用”
$('#industryId').combobox("disable");
//可用
$('#messtype').combobox('enable');
需要注意的是,如果是.combobox,用readonly有时有问题,下拉列表框没有显示选项。
如果用combobox用textbox的readonly赋值,提交的时候,是字符串,不是对应的id。
2.KindEditor的ready方法,不执行。
官方示例代码
KindEditor.ready(function(K) {
editor = K.create('textarea[id="content"]', {
cssPath : prettifyCssPath,
uploadJson : uploadJson,
urlType : 'absolute',
items:items
});
prettyPrint();
});
在JqueryUI中,ready方法没有执行。
执行使用create方法。
requirementEditor = KindEditor.create('textarea[id="requirement"]', {
allowFileManager : true,
cssPath : prettifyCssPath,
uploadJson : uploadJson,
urlType : 'absolute',
items:kdItems,
});
网上有人说“KE.create”,至少新版本4.1.x会报错。
(通过网上找答案,也发现,百度的答案,有时候年份靠前的答案在前面,但是可能已经过时了)
说道KindEditor,有时发现编辑框出不来,可能和EasyUI有一定的冲突,我是通过调整和规范化js引入解决这个问题的。
3.KindEditor自定义,编辑框的工具条。
var items=[ 'copy', 'paste',
'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', '-',
'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
'italic', 'underline', 'strikethrough'];
KindEditor.ready(function(K) {
editor = K.create('textarea[id="content"]', {
cssPath : prettifyCssPath,
uploadJson : uploadJson,
urlType : 'absolute',
items:items
});
prettyPrint();
});
传入自定义的item数组,items可以定义为全局变量,如果只用一次,用局部变量比较好。
4.KindEditor修改值。
KindEditor.html("#content","输入HTML内容,点击我,查看效果");
<textarea name="content" id="content"
style="width: 700px; height: 70px;"></textarea>
千万注意,有个“#”。
网上不少答案,小雷表示“呵呵哒”~
5.表单提交时,KindEditor的值么有提交。
$("#" + fmId).form('submit', {
url : "${base}/fundBack/edit",
onSubmit : function() {
$("#requirement").val(requirementEditor.html());
$("#descrition").val(descritionEditor.html());
$("#fundNo").attr("disabled",false);
return $(this).form('validate');
},
在提交之前,把KindEditor的editor对象的html()值,用jquery赋值一次。
最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor的更多相关文章
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- web前端之HTML的大框架(body元素与frameset元素)
web前端之HTML的大框架 body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head ...
- 创建 Web 前端开发环境
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
随机推荐
- leetCode解题报告5道题(七)
题目一:Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...
- OpenCASCADE License FAQs
OpenCASCADE License FAQs 经常用人问我使用OpenCASCADE开发商业软件是否需要付费,下面从OpenCASCADE的官方网站上截取其回答翻译成中文,官方网址:https:/ ...
- 【POJ 2750】 Potted Flower(线段树套dp)
[POJ 2750] Potted Flower(线段树套dp) Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4566 ...
- Windows 绝赞应用(该网站收集了日常好用的工具和软件)
在我们的电脑使用过程中,或多或少的被流氓软件恶心过.流氓软件之所以这么流氓全是靠他那恐怖的用户数量,基本上形成垄断后,各种流氓行为就一点点体现出来了. 我们也可以选择不用,但对流氓软件来说多你一个不多 ...
- Java类和对象6
按要求编写Java应用程序. (1)建立一个名叫Cat的类: 属性:姓名.毛色.年龄 行为:显示姓名.喊叫 (2)编写主类: 创建一个对象猫,姓名为“妮妮”,毛色为“灰色”,年龄为2岁,在屏幕上输出该 ...
- PostgreSQL+pgpooll+Keepalived双机HA方案
PostgreSQL+pgpooll+Keepalived双机HA方案 (注:本文档中的所有操作在没有说明的情况下都应该使用postgres用户进行操作,postgres用户没有权限的操作方可采用ro ...
- 细说ReactiveCocoa的冷信号与热信号(一)
热信号:事件触发: 冷信号:订阅出发: 从本质上来说,是信号的存在和产生,是静态信号和动态信号的区别. 背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的 ...
- keytool常用操作
keytool 秘钥需要存储在秘钥库中,秘钥库可以理解为一个存储了一个或多个秘钥的文件.一个秘钥库可以存储多个密钥对,每个秘钥对你都需要给他们取一个名字. D:\software\Java\jdk1. ...
- Raspberry Pi - 调整你的SD卡分割区的大小
在使用Win32DiskImager为一张空白的SD卡刷入新的Rasbian系统后,卡上的可用剩余空间并不大, 本人有一张8G的SD卡,但是刷入4.1的Rasbian后,用df -h查看,根目录下的空 ...
- Java Web学习总结(20)——基于ZooKeeper的分布式session实现
1. 认识ZooKeeper ZooKeeper-- "动物园管理员".动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始 ...