企業(yè)門戶網(wǎng)站設(shè)計(jì)方案如何推廣自己產(chǎn)品
效果圖展示
粉色框是當(dāng)前頁(yè)面,橙色框是鼠標(biāo)經(jīng)過(guò),紅色框是按下按鈕,灰色按鈕是其他頁(yè)面的效果;
存儲(chǔ)標(biāo)識(shí)可以用來(lái)識(shí)別頁(yè)面是否存儲(chǔ):例如當(dāng)前頁(yè)面已經(jīng)保存用藍(lán)色,未保存用紅色,其他頁(yè)面已經(jīng)保存用灰色,未保存用淡紅色。
首先導(dǎo)入模塊
import tkinter as tk
from tkinter import ttk
定義一個(gè)名為CustomNotebook的類,繼承自ttk.Notebook
class CustomNotebook(ttk.Notebook):"""定義一個(gè)名為CustomNotebook的類,繼承自ttk.Notebook"""__initialized = False # 初始化一個(gè)私有變量,用于標(biāo)記是否已經(jīng)初始化def __init__(self, *args, **kwargs):# 如果尚未初始化,則調(diào)用自定義初始化方法,并設(shè)置已初始化標(biāo)志if not self.__initialized:self.__initialize_custom_style()#CustomNotebook.__initialized = Trueself.__inititialized = True# 設(shè)置notebook的樣式為"CustomNotebook"kwargs["style"] = "CustomNotebook"# 調(diào)用父類的初始化方法ttk.Notebook.__init__(self, *args, **kwargs)self._active = None # 初始化一個(gè)私有變量,用于存儲(chǔ)當(dāng)前活動(dòng)的tab# 綁定鼠標(biāo)左鍵按下事件到on_close_press方法self.bind("<ButtonPress-1>", self.on_close_press, True)# 綁定鼠標(biāo)左鍵釋放事件到on_close_release方法self.bind("<ButtonRelease-1>", self.on_close_release)def on_close_press(self, event):"""當(dāng)按鈕被按下時(shí)觸發(fā),位于關(guān)閉按鈕上方"""# 獲取鼠標(biāo)點(diǎn)擊位置的元素element = self.identify(event.x, event.y)# 如果元素包含"close",則執(zhí)行以下操作if "close" in element:# 獲取鼠標(biāo)點(diǎn)擊位置的索引值index = self.index("@%d,%d" % (event.x, event.y))# 將按鈕狀態(tài)設(shè)置為按下self.state(['pressed'])# 將_active屬性設(shè)置為點(diǎn)擊的索引值self._active = indexdef on_close_release(self, event):""" 當(dāng)鼠標(biāo)在關(guān)閉按鈕上釋放時(shí)調(diào)用此方法。event: 包含鼠標(biāo)事件信息的對(duì)象。"""if not self.instate(['pressed']): # 如果按鈕沒(méi)有按下?tīng)顟B(tài),直接返回returntry:element = self.identify(event.x, event.y) # 獲取鼠標(biāo)釋放位置的元素index = self.index("@%d,%d" % (event.x, event.y)) # 獲取元素在列表中的索引if "close" in element and self._active == index: # 如果元素是關(guān)閉按鈕,并且當(dāng)前激活的標(biāo)簽頁(yè)與釋放位置的標(biāo)簽頁(yè)相同self.forget(index) # 刪除該標(biāo)簽頁(yè)self.event_generate("<<NotebookTabClosed>>") # 生成一個(gè)表示標(biāo)簽頁(yè)關(guān)閉的事件except: passself.state(["!pressed"]) # 將按鈕狀態(tài)設(shè)置為非按下?tīng)顟B(tài)self._active = None # 將當(dāng)前激活的標(biāo)簽頁(yè)設(shè)置為Nonedef __initialize_custom_style(self):# 創(chuàng)建一個(gè)ttk樣式對(duì)象style = ttk.Style()# 定義四個(gè)圖片對(duì)象,分別表示關(guān)閉按鈕的不同狀態(tài)self.images = (# 元素普通狀態(tài)時(shí)圖標(biāo)tk.PhotoImage("img_closenormal", data='''R0lGODdhCwALAIMAAJKSkpeXl5ubm5+fn6CgoKampqqqqq2trbGxsba2tr29vcHBwdnZ2QAAAAAAAAAAACwAAAAACwALAAAIXQAXJEBwwEDBAgUGHEigYOCBhwYMEBCAIAEDBgYQXhwg4ACCiwwKgOQIEeRGjgUKGgBJYABKgyYZuBRAQORFmwwEBBhgE6FNAQAEDCBAtCVHoAcC6AzANAAAAAYCAgA7'''),# 選中的選項(xiàng)卡的關(guān)閉圖標(biāo)tk.PhotoImage("img_closeselected", data='''R0lGODdhCwALAIVUAJ9dcptfe6NfcpthfZ5hfJ9ifp5nfaNjda9lc6Rmea1nfqRpe6Fqfq9ofK1ofqxrfrFndbJqeLJufZ9rgKpngaBqgKtpg6tphK5uhKxvia5xhq91iq1xjK1zj692jLFyg7N1hrJ3i7B2jbF4ja51ka94kq97l698mq9+m7B8mbB/nLCDn6aEoayMprCForGMq7KNq7KPrrOXt7WfwP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAACwALAAAIcgBnwFiBwoQJEh0yUGARQ8YLFwRPHLwQwEUMGjQOcsB4YYAKFxhpbMRooYCJFSlCYlTgoAAJFSlMhHTgQEGBDilSqoyggACGEiFFhGxwAINQGiNCgMAIQcADDR48bAjxQUIEBABaGJgwoQKDBQkOCGAREAA7'''),# 鼠標(biāo)經(jīng)過(guò)時(shí)選項(xiàng)卡的關(guān)閉圖標(biāo)tk.PhotoImage("img_closeactive", data='''R0lGODdhCwALAIVSAN5IN+lRNeBQP+5bPvtSP+FSQuJXR+VbRu5dQetfRuVbSf9dS/xeTO5iR+hhTOxlTP1wTP1iUP1kUv9lVPxnVv9rVP1pWP9rWv9vXv5/WP54Xf9yYv11YP90ZP99YP94af97bP99bv6BW/6CYv6FYP+BZf6JZv+Eb/6Jav+Oa+eJe/+Bcf+Edf+Hef+KfP+Rd/+WfP+bev+Pgu+Rhv+RhP+ViP+Zjf+hlv+lmv+1rP+/twAAAAAAAAAAAAAAACwAAAAACwALAAAIcwB13KDhgkWIEB8wRJiBIwcOGzRktFjxwUKBGjh27GABYoNGCQZc2NC4owNJkCsIktRYoYKCDywmkizhQYODDSFWrNyRYsSDCSY1wiBJosGCCxpPvIihMcMAAgwoXOBQAoUJERACzAAAoICAAwkaIAigIiAAOw=='''),# 按下關(guān)閉按鈕時(shí)選項(xiàng)卡的關(guān)閉圖標(biāo)tk.PhotoImage("img_closepressed", data='''R0lGODdhCwALAIUAAGsiD20jEHIkEHYlEXsnEX4oEogrE4orFIwsFJEtFJUvFZoxFpwwFp4yF6EzF6YzF642GbU3GbY4Grk5Grk6G7s7G7w6G7w8G8A+HcJAHcVDH8ZEH8dEIMhGIMtJIsxKIs1KIpdxZ8eAbtqIcuKdiQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAACwALAAAIcABDABBA4AACBQscNBARIAGDBxAkVKhwoeIABiRIRJhQIeMFDAUeZCTRMWOGCwYgRBhpMgMGBBEqWBipYcOGDAoolBz5wcOGBRdGchjps0FQEhk6eMgIgoODihgycOgAAoQHDiIsYMBwoeYGDhtGBAQAOw=='''),)# 使用element_create方法創(chuàng)建一個(gè)名為"close"的元素,類型為"image",圖像文件名為"img_closenormal"style.element_create("close", "image", "img_closenormal",# 下面設(shè)置各狀態(tài)圖標(biāo),激活順序越往后的越要寫在前面,比如按下要先鼠標(biāo)經(jīng)過(guò)激活,按下就要寫在鼠標(biāo)經(jīng)過(guò)前# 當(dāng)元素處于激活、按下、未禁用狀態(tài)時(shí),顯示"img_closepressed"圖片("active", "pressed", "!disabled", "img_closepressed"),# 當(dāng)元素處于激活且未禁用狀態(tài)時(shí),顯示"img_closeactive"圖片("active", "!disabled", "img_closeactive"), # 當(dāng)選項(xiàng)卡處于選中狀態(tài)時(shí),顯示"img_closeselected"圖片("selected", "img_closeselected"), # 設(shè)置元素的邊框?qū)挾葹?0像素,無(wú)邊框;設(shè)置元素的粘性屬性為空字符串,表示不粘附在其他元素上。border=10, sticky='')'''notebook有如下?tīng)顟B(tài)可以設(shè)置disabled 禁用狀態(tài),該狀態(tài)下的控件無(wú)法接收用戶輸入。normal 正常狀態(tài),該狀態(tài)下的控件可以接收用戶輸入。active 激活狀態(tài)(鼠標(biāo)經(jīng)過(guò)),該狀態(tài)下的控件可以接收用戶輸入,并且會(huì)顯示特殊效果(如閃爍)。selected 選中狀態(tài),該狀態(tài)下的控件會(huì)顯示特殊效果(如高亮)。insensitive 不敏感狀態(tài),該狀態(tài)下的控件不會(huì)響應(yīng)用戶的鍵盤操作。focus 聚焦?fàn)顟B(tài),該狀態(tài)下的控件會(huì)顯示特殊效果(如邊框)。'''# 設(shè)置Notebook的樣式為"CustomNotebook",并為"CustomNotebook.client"添加一個(gè)樣式選項(xiàng),設(shè)置其"sticky"屬性為"nswe"style.layout("CustomNotebook", [("CustomNotebook.client", {"sticky": "nswe"})])# 設(shè)置CustomNotebook.Tab的布局樣式style.layout("CustomNotebook.Tab", [("CustomNotebook.tab", { # 設(shè)置 CustomNotebook.tab 的樣式"sticky": "nswe", # 設(shè)置 tab 的粘性屬性為 NSWE,表示在水平方向上可拉伸,垂直方向上可滾動(dòng)"children": [ # 設(shè)置 tab 的子元素("CustomNotebook.padding", { # 設(shè)置 CustomNotebook.padding 的樣式"side": "top", # 設(shè)置 padding 的側(cè)邊距在頂部"sticky": "nswe", # 設(shè)置 padding 的粘性屬性為 NSWE"children": [ # 設(shè)置 padding 的子元素("CustomNotebook.focus", { # 設(shè)置 CustomNotebook.focus 的樣式"side": "top", # 設(shè)置 focus 的側(cè)邊距在頂部"sticky": "nswe", # 設(shè)置 focus 的粘性屬性為 NSWE"children": [ # 設(shè)置 focus 的子元素# 設(shè)置 CustomNotebook.label 的樣式("CustomNotebook.label", {"side": "left", "sticky": ''}), # 設(shè)置 label 的側(cè)邊距在左側(cè),無(wú)粘性# 設(shè)置 CustomNotebook.close 的樣式("CustomNotebook.close", {"side": "left", "sticky": ''}), # 設(shè)置 close 的側(cè)邊距在左側(cè),無(wú)粘性]})]})]})])
將定義好的Notebook應(yīng)用到tk窗口,并添加存儲(chǔ)標(biāo)識(shí),不需要的刪除即可
if __name__ == "__main__":root = tk.Tk()notebook = CustomNotebook(width=400, height=400, padding=(2,5,2,2))notebook.pack(side="top", fill="both", expand=True)images = (# 原色tk.PhotoImage('save_original', data = '''R0lGODdhDgAOAIU9ADFjpTFjrTFjtTFrtTljrTlrrcDAwEJzvUpzvUp7vVJ7rVJ7vVqEvWOEvWOMzmuUzmuU1nOUxnOc1nOc3nuUxnucxnul53ut54Slzoylxoyl1oyt1ozGY5StxpS13py13qWtxqW9563G57XO773O78bW78bW987e9zlrvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAADgAOAAAIjAAzUFhwIIXBgykYgDAQ4cQJFBAjQiThoEOCExdQOJA4kcSBAycsaOSIwkKJASlCkoQ4IYSAFCYsOHDwoOZMBxI+vIxpoWfPCRKC6kxRwqdPoEE9BEhBwqiFoFA3LG26EgUEDUtHiOTAtSuHBxiybvXK1UEFAAhEiKhagUIBCg0ODBBAN4DdAAAIKAgIADs='''),# 黑白tk.PhotoImage('save_gray', data = '''R0lGODdhDgAOAIU9AFxcXF1dXV9fX2JiYmRkZGVlZW1tbW9vb3R0dHZ2dn5+foGBgYeHh46Ojo+Pj5CQkJKSkpaWlpeXl6CgoKGhoaOjo6WlpaioqKmpqa2trbCwsLKysru7u8DAwMLCwsrKys3NzdTU1NXV1dzc3P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAADgAOAAAIiwApQEhgoIDBgwUUZOjwYMQIEhAjQgTB4AKCERZIMJA4EYQBAyMmaORIYkKIAQVCkoQogUOAAiImMGDQoOZMBhE2vIw5oWdPCRGC6iwQwqdPoEE1ACgAwuiEoFAvLG26koSDCks/iMTAtSuGBhOybvXKlYEEAAc8eKgqAQIBCAsMDAhAF4BduwIQBAQAOw=='''),# 紅色tk.PhotoImage('save_red', data = '''R0lGODdhDgAOAIU9AP/h4f++vv+3t/+2tv+vr/+srP+kpP+iov+dnf+UlP+Skv+Pj/+Li/+Kiv+Hh/+Fhf+Dg/+Cgv95ef94eP90dP9ycv9xcf9wcP9paf9jY/9gYP9YWP9WVv9RUf9PT/tHR/pGRvhERPVBQfM/P/I+PgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAADgAOAAAIiwAhUNjg4YPBgx80LDhQIUAAABAjQiSAoQGHAA4AYJA4kYAHDwEiaOQIIMKAEB9CkoQoAcGIDwIiYMBwoeZMDBMSvIwZoWdPCROC6vwwwKdPoEEVkPhAwGiEoFAbLG26EoCFB0sLiGTAtSuDCxGybvXKFYMEEh0MGKgqgQIIChk8hBhBl4RduyI4BAQAOw=='''),# 淡紅色tk.PhotoImage('save_lowred', data = '''R0lGODdhDgAOAIU9AP/w8P/p6f/o6P/h4f/e3v/W1v/U1P/Pz//Gxv/ExP/Bwf+9vf+8vP+5uf+3t/+1tf+0tP+rq/+qqv+mpv+kpP+jo/+iov+bm/+Vlf+Skv+Kiv+IiP+Dg/+Bgft5efp4ePh2dvVzc/NxcfJwcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAADgAOAAAIiwAhUNjg4YPBgx80LDhQIUAAABAjQiSAoQGHAA4AYJA4kYAHDwEiaOQIIMKAEB9CkoQoAcGIDwIiYMBwoeZMDBMSvIwZoWdPCROC6vwwwKdPoEEVkPhAwGiEoFAbLG26EoCFB0sLiGTAtSuDCxGybvXKFYMEEh0MGKgqgQIIChk8hBhBl4RduyI4BAQAOw=='''),)colour = {"blue":None, "red":None, "violet":None, "orange":None, "green":None}for color in colour.keys():colour[color] = tk.Frame(notebook, background=color) # 新建Frame作為標(biāo)簽內(nèi)容notebook.add(colour[color], text=color) # 將新建的Frame添加到notebook生成一個(gè)標(biāo)簽colour['white'] = tk.Frame(notebook) notebook.add(colour['white'], text='white', image='save_gray' , compound='left') # 新建一個(gè)直接帶image元素的標(biāo)簽,圖標(biāo)元素位于左側(cè)notebook.insert(3, colour['white']) #將'white'標(biāo)簽移動(dòng)到3的位置notebook.select(colour['white'])# 修改標(biāo)簽的image元素notebook.tab(colour['blue'] , image='save_original', compound='left')notebook.tab(colour['red' ] , image='save_red' , compound='left')notebook.tab(colour['violet'], image='save_lowred' , compound='left')root.mainloop()
上面代碼中的base64編碼的字符串,可以用下面代碼獲取,要用gif格式文件轉(zhuǎn)換,傳入文件路徑即可。
from PIL import Image
import base64, io
def bmp_to_base64(img_path):"將gif圖片轉(zhuǎn)為base64編碼的字符串"# 打開圖片img = Image.open(img_path)# 將圖片數(shù)據(jù)轉(zhuǎn)為字節(jié)流byte_arr = io.BytesIO()img.save(byte_arr, format='GIF')img_bytes = byte_arr.getvalue()# 將字節(jié)流轉(zhuǎn)為base64編碼的字符串base64_str = base64.b64encode(img_bytes).decode()return base64_str
print (bmp_to_base64('gif文件路徑'))
#想要拖動(dòng)標(biāo)簽切換位置的可以綁定鼠標(biāo)事件,自己試試吧。