长沙县住房和城乡建设局网站,电脑购物网站模板,Pdf书籍网站建设,官网建设目标目录
实现一个添加邀请客人名单的功能 循序渐进#xff0c;逐步实现#xff1a;
输入客人名称#xff0c;按下enter键添加客人名单点击客人名单在名单上添加或者取消添加删除线#xff0c;表示已经检查客人到场或未到场
checkbox#xff0c;点击客人名单或者点击checkb…目录
实现一个添加邀请客人名单的功能 循序渐进逐步实现
输入客人名称按下enter键添加客人名单点击客人名单在名单上添加或者取消添加删除线表示已经检查客人到场或未到场
checkbox点击客人名单或者点击checkbox则勾选或取消勾选名单与删除线效果同步渲染添加一个按钮让用户点击按钮可以添加客人
编写Python代码使用pyscript的PyItemTemplate的render_content()修改渲染到页面上字体的样式而不是默认的样式
输入客人名称到inputbox按enter键添加客人名单
编写HTML head部分代码
head引用最新的pyscript css和js脚本 添加py-register-widget标签取一个名称py-contactlist作为等会要使用的pyscript标签名这个标签可以直接引用py-register-widget中关联的python插件脚本
!DOCTYPE html
html langen
headmeta charsetUTF-8link relstylesheet hrefhttps://pyscript.net/latest/pyscript.cssscript defer srchttps://pyscript.net/latest/pyscript.js/scriptpy-register-widget src./pylist.py namepy-contactlist/py-register-widgettitleGuest book/title
/head注由于版本更新迭代频繁引用的源路径可能有变化如果出现报错可在github pyscript源码查看更新的示例example目前没有相关的文档
PyItem和PyList定义前端item和list的各种操作
观察pyscript在github的源码确定要如何编写继承的类
# -*- coding:utf-8 -*-
from datetime import datetimeclass PyItem(PyItemTemplate):passclass PyList(PyListTemplate):item_class PyItemdef add(self, item):if isinstance(item, str):item {content: item, created_at: datetime.now()}# labels是展示的名称return super().add(item, labels[content])其中PyItemTemplate和PyListTemplate是本次要使用的pyscript类主要内容是对前端item和list的操作 这里没有导入会IDE抛红不过不需要理会这些类方法只会在HTML中执行 PyList中指明item_class为继承的PyItem 重写一下PyListTemplate的add方法定义要从前端输入接收的item并定义创建时间created_ad再渲染返回到前端之前add方法中的这些数据都可能会再用到 pylist 在py-register-widget添加 klassPyList指明引用的Python pyscript类
py-register-widget src./pylist.py namepy-contactlist klassPyList/py-register-widget注意这里关键字名称是klass而不是class为了避免和html保留的class关键字冲突
编写HTML body部分代码
body stylemargin: 5% 10%h2Guest book with PyScript/h2brdiv stylewidth: 80%py-inputbox idnew-entrydef on_keypress(e):if e.code Enter:add_contact()/py-inputboxpy-contactlist idguestBook/py-contactlist/divpy-scriptdef add_contact():# new_entry用法与前面的idnew-entry有关在Python中命名使用下划线连接# datetime是在引用的pylist.py中导入了所以不需要再导入guest {content: new_entry.value, created_at: datetime.now()}# 这里的add方法来自于PyList中的add方法guestBook.add(guest)# 清除inputbox中的内容new_entry.clear()/py-script
/body创建py-inputbox的pyscript标签定义on_keypress方法捕获在键盘Enter被按下之后执行一些操作 定义add_contact方法向py-contactlist标签执行添加客人名单的操作这里的py-contactlist和前面py-register-widget中的name保持一致 于是可以达到如下的效果输入名单之后按enter键可添加名单
点击客人名单在名单上添加或者取消添加删除线表示客人已经check到场或未check
首先为item对象添加一个deleted属性代表是否执行删除是否已经check 编写python代码实现on_click事件操作添加删除线或取消删除线表示已经check 需要在PyItem中重写PyItemTemplate的on_click方法
class PyItem(PyItemTemplate):def on_click(self, evtNone):# 点击人物名称删除或者取消删除已经签到的人# 这里如果没有deleted键前端会有报错self.data[deleted] not self.data[deleted]# 如果deleted就添加删除线否则移除删除线self.strike(self.data[deleted])添加名单的时候默认传入deleted为False py-scriptdef add_contact():# new_entry用法与前面的idnew-entry有关在Python中命名使用下划线连接# datetime是在引用的pylist.py中导入了所以不需要再导入guest {content: new_entry.value, created_at: datetime.now(), deleted: False}# 这里的add方法来自于PyList中的add方法guestBook.add(guest)# 清除inputbox中的内容new_entry.clear()/py-script效果
点击checkbox中的勾选也同步执行添加删除线或取消删除线
在PyItem中选择输入的element将其checked属性的值修改为和deleted相同的布尔值这实际上等价执行了js的document.querySelector的相关方法
class PyItem(PyItemTemplate):def on_click(self, evtNone):# 点击人物名称删除或者取消删除已经签到的人# 这里如果没有deleted键前端会有报错self.data[deleted] not self.data[deleted]# 如果deleted就添加删除线否则移除删除线self.strike(self.data[deleted])# 点击人物名称添加删除线同时checked打勾也要勾选或者取消勾选self.select(input).element.checked self.data[deleted]效果
同时再添加一个按钮支持鼠标点击这按钮添加客人名单
在HTML中py-inputbox标签同级添加一个py-button标签并定义一个on_click点击按钮的事件当点击这个按钮时就执行添加名单的操作 div stylewidth: 80%py-inputbox idnew-entrydef on_keypress(e):if e.code Enter:add_contact()/py-inputboxbrbrpy-button idnew-guest-btn labelAdd guestdef on_click(e):add_contact()/py-buttonpy-contactlist idguestBook/py-contactlist/div效果
修改渲染到页面上字体的样式代替默认的样式
查看源码可知PyItemTemplate的render_content只是将各个label使用-连接起来样式使用了pyscript默认的样式 覆写PyItemTemplate的render_content方法增加一个标签将content标签改为name和email将这两个label使用符号连起来展示 然后再添加一个邀请时间用较小的字体展示
最后完整的代码 pylist.py
# -*- coding:utf-8 -*-
from datetime import datetimeclass PyItem(PyItemTemplate):def on_click(self, evtNone):# 点击人物名称删除或者取消删除已经签到的人# 这里如果没有deleted键前端会有报错self.data[deleted] not self.data[deleted]# 如果deleted就添加删除线否则移除删除线self.strike(self.data[deleted])# 点击人物名称添加删除线同时checked打勾也要勾选或者取消勾选self.select(input).element.checked self.data[deleted]def render_content(self):s .join([self.data[f] for f in self.labels])create_at self.data[created_at].strftime(%F %X)return s br/ fsmall classtimestamp⌚invited at: {create_at}/smallclass PyList(PyListTemplate):item_class PyItemdef add(self, item):if isinstance(item, str):name, email [x.strip() for x in item.split(,)]item {name: item, email: email, created_at: datetime.now(), deleted: False}# labels是展示的名称return super().add(item, labels[name, email])add_contact添加客人名单时也将一个标签content改为两个name和email输入时用逗号(“,”)隔开 guestbook.html
!DOCTYPE html
html langen
headmeta charsetUTF-8link relstylesheet hrefhttps://pyscript.net/latest/pyscript.cssscript defer srchttps://pyscript.net/latest/pyscript.js/scriptpy-register-widget src./pylist.py namepy-contactlist klassPyList/py-register-widgettitleGuest book/title
/head
body stylemargin: 5% 10%h2Guest book with PyScript/h2pYou can use codeENTER/code to insert a guest book entry./ppPaste code stylebackground: #eee; padding: 0.5%Pam Beesly, pamdundermifflin.com/code to insert the guest name and email./pbrdiv stylewidth: 80%py-inputbox idnew-entrydef on_keypress(e):if e.code Enter:add_contact()/py-inputboxbrbrpy-button idnew-guest-btn labelAdd guestdef on_click(e):add_contact()/py-buttonpy-contactlist idguestBook/py-contactlist/divpy-scriptdef add_contact():name, email [x.strip() for x in new_entry.value.split(,)]# new_entry用法与前面的idnew-entry有关# datetime是在引用的pylist.py中导入了所以不需要再导入guest {name: name, email: email, created_at: datetime.now(), deleted: False}# 这里的add方法来自于PyList中的add方法guestBook.add(guest)# 清除inputbox中的内容new_entry.clear()/py-script
/body
/html最终效果展示
