QLineEdit QLineEdit类中常用的方法如下表
方法描述setAlignment()按固定值方式对齐文本Qt.AlignLeft:水平方向靠左对齐Qt.AlignRight:水平方向靠右对齐Qt.AlignCenter:水平方向居中对齐Qt.AlignJustify:水平方向调整间距两端对齐Qt.AlignTop:垂直方向靠上对齐Qt.AlignBottom:垂直方向靠下对齐Qt.AlignVCenter:垂直方向居中对齐setEchoMode()设置文本框的显示格式,允许输入的文本显示格式的值可以是:QLineEdit.Normal:正常显示所输入的字符,此为默认选项QLineEdit.NoEcho:不显示任何输入的字符,常用于密码类型的输入,且长度保密QLineEdit.Password:显示与平台相关的密码掩饰字符,而不是实际输入的字符QLineEdit.PasswordEchoOnEdit:在编辑时显示字符,负责显示密码类型的输入setPlaceholderText()设置文本框显示文字setMaxLength()设置文本框所允许输入的最大字符数setReadOnly()设置文本为只读setText()设置文本框的内容text()返回文本框的内容setDragEnable()设置文本框是否接受拖动selectAll()全选setFocus()得到焦点setInputMask()设置掩码setValidator()设置文本框的验证器(验证规则),将限制任意可能输入的文本,可用的校验器为QIntValidator:限制输入整数QDoubleValidator:限制输入浮点数QRegexpValidator:检查输入是否符合正则表达式 QLineEdit类中常用信号如下
信号描述selectionChanged只要选择改变了,这个信号就会发射textChanged当修改文本内容时,这个信号就会发射editingFinished当编辑文本结束时,这个信号就会发射 定义输入掩码的字符 下表列出了输入掩码的占位符和字面字符,并说明其如何控制数据输入
字符含义AASCII字母字符是必须输入的(A-Z,a-z)aASCII字母字符是允许输入的,但不是必须输入的NASCII字母字符是必须输入的(A-Z,a-z,0-9)nASCII字母字符是允许输入的,但不是必须输入的X任何字符都是必须输入x任何字符都是允许输入的,但不是必须输入的9ASCII数字字符是必须输入的(0-9)0ASCII数字字符是允许输入的,但不是必须输入的DASCII数字字符是必须输入的(1-9)dASCII数字字符是允许输入的,但不是必须的(1-9)#ASCII数字字符与加减字符是允许输入的,但不是必须的H十六进制格式字符是必须输入的(A-F,a-f,0-9)h十六进制格式字符允许输入,但不是必须的B二进制格式字符是必须输入的(0,1)b二进制格式字符是允许输入的,但不是必须的>所有字母字符都大写<所有字母字符都小写!关闭大小写转换\使用‘\’转义上面列出的字符 掩码由掩码字符与分隔符字符串组成,后面可以跟一个分号和空白字符,空白字符在编辑后会从文本删除的 掩码示例如下:
掩码注意事项000.000.000.000;_ip地址,空白字符是‘_’HH:HH:HH:HH:HH:HH;MAC地址0000-00-00日期,空白字符是空格>AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;#许可证号,空白字符是‘_’,所有字母都转换为大写 ————————————————————————————————————————————
实例一:EchoMode的显示效果 from PyQt5.QtWidgets import QApplication,QLineEdit,QWidget,QFormLayout import sys class lineEditDemo(QWidget): def __init__(self,parent=None): super(lineEditDemo, self).__init__(parent) self.setWindowTitle('QLineEdit例子') #实例化表单布局 flo=QFormLayout() #创建4个文本输入框 PNormalLineEdit=QLineEdit() pNoEchoLineEdit=QLineEdit() pPasswordListEdit=QLineEdit() pPasswordEchoOnEditLineEdit=QLineEdit() #添加到表单布局中 #flo.addRow(文本名称(可以自定义),文本框) flo.addRow('Normal',PNormalLineEdit) flo.addRow('NoEcho', pNoEchoLineEdit) flo.addRow('Password', pPasswordListEdit) flo.addRow('PasswordEchoOnEdit', pPasswordEchoOnEditLineEdit) #设置setPlaceholderText()文本框浮现的文字 PNormalLineEdit.setPlaceholderText('Normal') pNoEchoLineEdit.setPlaceholderText('NoEcho') pPasswordListEdit.setPlaceholderText('Password') pPasswordEchoOnEditLineEdit.setPlaceholderText('PasswordEchoOnEdit') #setEchoMode():设置显示效果 #QLineEdit.Normal:正常显示所输入的字符,此为默认选项 PNormalLineEdit.setEchoMode(QLineEdit.Normal) #QLineEdit.NoEcho:不显示任何输入的字符,常用于密码类型的输入,且长度保密 pNoEchoLineEdit.setEchoMode(QLineEdit.NoEcho) #QLineEdit.Password:显示与平台相关的密码掩饰字符,而不是实际输入的字符 pPasswordListEdit.setEchoMode(QLineEdit.Password) #QLineEdit.PasswordEchoOnEdit:在编辑时显示字符,负责显示密码类型的输入 pPasswordEchoOnEditLineEdit.setEchoMode(QLineEdit.PasswordEchoOnEdit) #设置窗口的布局 self.setLayout(flo) if __name__ == '__main__': app=QApplication(sys.argv) win=lineEditDemo() win.show() sys.exit(app.exec_()) 效果如下 实例二:验证器 #导入,Qapplication,单行文本框,窗口,表单布局 from PyQt5.
首先看下我们的ajax: $.ajax({ url: "Handler/GetUsers.ashx",//路径 type: "get",//get请求 data: { "LoginName": "Admin" }, dataType:"json", async: false,//同步 cache: false,//不缓存 //成功调用的函数 success: function (datas) { alert(datas); //这里如果返回{object:object} alert(datas.LoginName);//而这里在f12调式工具中提示错误,或者为undefined,并且LoginName并没有写错 }, //发生错误调用的函数 error: function (errmsg) { alert("发生错误!"); } }); 接下来看我们的ashx(一般处理程序) public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string LoginName = context.Request.Params["LoginName"]; Users model = new TestService().GetList_Users(LoginName); DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof(Users)); ds.WriteObject(context.Response.OutputStream, model); } 我们用的是DataContractJsonSerializer这个类去序列化成json,并返回值
(注意:用DataContractJsonSerializer需引用命名空间 System.Runtime.Serialization.Json;)
接下来我们看看我们ajax获取到的datas是什么? 运行vs,等执行了ajax并且返回了值我们按f12进入tiao调试者工具。找到Network这个选项点击
找到对应的ashx,你会发现我们的键值中的键跟我们model中的不一样,多出来K_BackingField这一项.
这是怎么回事呢?那是因为我们序列化的这个类中被我们加上了[Serializable]这个特性,我们只用这样写就可以正常获取了
[Serializable] [DataContract] public class Users { [DataMember] public int Uid {get;set;}//Id [DataMember] public string LoginName {get;set;}//登陆账号 [DataMember] public string LoginPwd {get;set;}//登陆密码 [DataMember] public int Rid {get;set;}//角色id [DataMember] public int EId { get; set; }//员工id } 在类加上一个[DataContract]这个特性,下面的列也要加上[DataMember]这个特性,这样我们获取的json就不会出现K_BackingField了。注意 需引用命名空间using System.
最近对svg动画很感兴趣,用svg+css可以实现一些让人眼前一亮的效果,Ant Design 官网首屏就出现了svg动画,coding 官网首页也出现svg动画,也许在非前端人员看来效果很普通,但是在前端开发人员眼里,这种效果低调而又张扬!这是用jq animate做不到的。
能做成Ant Design那样的动画效果是我的目标,我想先做个简单点的效果,譬如这样的文字描边动画效果
怎么做的呢?
这张jpg是我的头像,最终呈现的效果就是以这张图为基础。
首先要在PS中将图的选区转换成路径
再将带路径的ps文件导出到Ai
需要注意的是,第二个字母的路径由两部分组成,外层一个大选区,里面一个小的选区,这里要选“窗口”→“路径查找器”,形状模式选“差集”。
保存成svg格式,得到了代码:
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 215 215" style="enable-background:new 0 0 215 215;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;} </style> <g> <path class="st0" d="M197,101c-7.9,2.1-13.8,8.2-25,5c-1.3-7.7-2.7-15.3-4-23c2.3-2.3,4.7-4.7,7-7c5.5-1.6,11.3-3.4,15,1 c4.5-1.4,3.6-0.5,5-5c-3.7-1.7-7.3-3.3-11-5c-10.1,4.6-14.5,6.3-22,12c1.3,9.7,2.7,19.3,4,29c3.8,6.1,18.2,5.6,26,3 c4.1-2,5-3.9,7-8C198.3,102.3,197.7,101.7,197,101z"/> <path class="st0" d="M144,73c-1.3,0-2.7,0-4,0c-2.3,1-4.7,2-7,3c1.3,5.3,2.7,10.7,4,16c3.3-1,6.7-2,10-3 C148.1,83.3,145.3,79.1,144,73z"/> <path class="st0" d="M126,84c-10,0-20,0-30,0c1.3,14,2.7,28,4,42c2,0,4,0,6,0c-1-11.3-2-22.7-3-34c0.7-0.3,1.3-0.7,2-1 c5.3,0,10.7,0,16,0c3,10,6,20,9,30c1.2,3.1,2,1.2,6,1c-3.3-12-6.7-24-10-36C126,85.3,126,84.7,126,84z"/> <path class="st0" d="M18,97c0.3,4.7,0.7,9.3,1,14c9,0.7,18,1.3,27,2c0.3,3,0.7,6,1,9c-7.7,0-15.3,0-23,0c0,1.7,0,3.3,0,5 c5,0.7,10,1.3,15,2c4.3,0,8.7,0,13,0c0.7-6.3,1.3-12.7,2-19c-4.2-4-20.4-4.2-28-4c-0.3-2.3-0.7-4.7-1-7c7.8-5.5,19.4-2.3,29-5 c0.7,0,1.3,0,2,0c0-2,0-4,0-6C34.4,87.6,30.9,88,18,97z"/> <path class="st0" d="M146,96c-1.7,0.7-3.3,1.3-5,2c-2.1,11.1,6.7,23,9,34c3.4,0.8,5.1,0.7,8-1c1-0.3,2-0.7,3-1 c-3.3-11.3-6.7-22.7-10-34C149.3,96,147.7,96,146,96z"/> <path class="st0" d="M57,122c2.7,8.7,5.3,17.3,8,26c9.5,1.9,19.2-5.2,28-8c1.2-5.9-0.6-23.6-5-29C77.7,114.7,67.3,118.3,57,122z M70,141c-1.7-4.3-3.3-8.7-5-13c5.7-2.7,11.3-5.3,17-8c2.5,2.4,2.9,5,4,9C85.8,138.6,78.7,140.6,70,141z"/> </g> </svg> 将css修改一下
.st0{fill: none; stroke-width:2; stroke:#30479B; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray: 250, 250; animation: lineMove 5s ease-out infinite; } @keyframes lineMove { 0%{ stroke-dasharray: 0, 250; } 100%{ stroke-dasharray: 250, 250; } } 关于svg和css相结合,以本示例为参考:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file:一个是文件(类型是图片格式), w:一个是文件压缩的后宽度,宽度越小,字节越小 objDiv:一个是容器或者回调函数 photoCompress() */ function photoCompress(file,w,objDiv){ var ready=new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload=function(){ var re=this.result; canvasDataURL(re,w,objDiv) } } function canvasDataURL(path, obj, callback){ var img = new Image(); img.src = path; img.onload = function(){ var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.