QuykHtml
1.0.0
مكتبة بايثون تسمح لك بإنشاء قوالب HTML بسرعة وسهولة وحتى إنشاء مواقع ويب كاملة.
إذا كنت تشعر بالكرم أو ترغب في شراء قهوة لي أو التبرع، فإليك تطبيقي النقدي أدناه:
cash app: $elmling
الميزات الجديدة:
- يعبر
الميزات الرئيسية:
- قارورة
- تسلسل الأوامر معًا
- دعم جافا سكريبت/مسج
- إنشاء الجدول
- إنشاء أياكس
- إنشاء النموذج
- بوستراب
- تحسين محركات البحث
- مثال للصفحة المقصودة
# استيراد الفصل من المكتبة من QuykHtml import qhtml# Instantiate classq = qhtml()# أدخل عنصر p معدّل في شاشة العرض الرئيسيةq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# عرض الصفحةq.display.render() من QuykHtml import qhtml# إنشاء فئة q = qhtml()# إنشاء divdiv = q.new("div")# إنشاء فقرةp = q.new("p")# إنشاء إدخال = q.new("input") # قم بعرض النتائج عن طريق إدراج كافة الكائنات في Displayq.display.insert([div, p, input]).render() من QuykHtml import qhtml# Instantiate classq = qhtml()# قم بتعريف css، ويسمح بقائمة من القوائم، حيث تكون القيمة الأولى # classname وسلسلة الترميز/النمط للقيمة الثانيةq.css.add([["div"، "font-size:32px;"],[".div_custom"،color:gray;"]])# يمكنك أيضًا القيام بنفس الشيء عن طريق استدعاء طريقة الإضافة باستخدام اثنين الوسيطاتq.css.add("div"،"font-size:32px;")q.css.add(".div_custom"،"color:gray;")# قم بإنشاء div مع الفئة .div_custom وقم بتعيين النص في divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# يمكنك استخدام التصميم المضمّن لـ نمط العنصر وتعيين النص في divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("QuykHtml Rocks!")# عرض النتائجq .display.insert([div, div2]).render() from QuykHtml import qhtml# إنشاء مثيل classq = qhtml()p = q.new("p")# Global Element Settersp.style.set('color:red;')p.style.append('background-color:yellow; ')p.add_attribute('title="Qhytml هو سهل!"')p.set_text('text')p.set_text_ipsum()p.set_text_ipsum_large()p.set_text_ipsum_small()p.set_class('class1 class2')p.set_form_button()p.set_id('my-id ')p.set_name('some-name')p.set_value('custom value')p.set_tool_tip('تلميح بسيط لأداة نص التحويم')p.on_click("alert('لقد تم النقر فوقي!');")p.on_click_goto('google.com')p.on_right_click("alert(' لقد تم النقر بزر الماوس الأيمن!');")p.on_mouse_enter("alert('تم إدخال الماوس!');")p.on_mouse_leave("alert('Mouse left!');")html = p.html()# عنصر محدد settersq.new("img").set_img_src('src_url')q.new("img").set_img_placeholder(400)q.new("img").on_click_showPreview()q.new("form").set_form_ options('file.php','get')q.new("button").set_form_button()q.new("iframe").set_iframe('google.com')q.new("input"). set_auto_Complete(خطأ) من QuykHtml import qhtml# إنشاء مثيل classq = qhtml()# أدوات مساعدة التمهيد "استيراد" بسهولةq.bootstrap.use(True)# إنشاء جدول أولي مكون من صف واحد وعمودينstable = q.table(1,2)# طريقة الإدراج باستخدام 0 الفهرس -> Insert_at(row,column,qhtml_object أو قائمة qhtml_objects)table.insert_at(0,0,q.new("p").set_text("الصف 1 العمود 1"))table.insert_at(0,1,q.new("p").set_text("صف" عمود واحد 2"))# قابل للتركيب صالح أيضًا = q.table(1,2).insert_at(0,0,q.new("p").set_text("Row 1 column 1")).insert_at(0,1,q.new("p").set_text("الصف 1 العمود 2"))# أمثلة على معالجة Td لـ i في النطاق(2):
table.style_td_at(0,i,'text-align:center') table.set_td_class_at(0,i,'some-class') table.set_td_id_at(0,i,'some-id' + str(i))# تأكد من إنشاء الجدول # الذي يُرجع div برمز الجدول الموجود فيه ittable = table.build()# عرض النتائجq.display.insert(table).render() من QuykHtml import qhtml# إنشاء مثيل classq = qhtml()# أدوات مساعدة التمهيد "استيراد" بسهولةq.bootstrap.use(True)# إلحاق برنامج نصي، ويمكن حتى قراءته من ملفq.scripts.append( 'function js_function() {'' تنبيه("وظيفة JS");''}')# إلحاق برنامج نصي بكائن qhtmlp = q.new("p").set_text("عنصر النص").scripts_add( 'function js_function() {'' تنبيه("A JS Function");''}')# إلحاق التعليمات البرمجية المراد تنفيذها عند تحميل الصفحة إلى كائن qhtmlp = q.new("p").set_text("عنصر نص").scripts_add('alert("تم تشغيل كود Js عند تحميل الصفحة");', on_page_load=True)q.display.insert(p).render() from QuykHtml import qhtml# إنشاء مثيل classq = qhtml()# أدوات مساعدة التمهيد "استيراد" بسهولةq.bootstrap.use(True)# إنشاء طلب ajax على العنصر p# حدد دائمًا r في وظيفة رد الاتصال لأن هذه هي الاستجابة textp = q.new("p").ajax_build('get','file.php?args=1&args2=2"،_some_call_back_func(r)')# حدد الوظيفة بسرعة إذا لزم الأمر bep.scripts_add('function _some_call_back_func(r) ){alert("Response text " + r.responseText);}')# إلحاق رمز JS عندما تكون الصفحة الأحمال، اتصل بوظيفة ajax باستخدام # element.ajax_get("pointer") <- طريقة ajax المبنية بواسطة ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p ).يجعل() من QuykHtml import qhtml# إنشاء مثيل classq = qhtml()# سهولة "استيراد" أدوات التمهيدq.bootstrap.use(True)# إنشاء نموذج elementform = q.new("form").set_form_options('file.php','post' )# قم بإنشاء عنصر الإدخال وقم بتعيين الاسم إلىform_nameinput = q.new("input").set_name('form_name')# أنشئ الزر واستخدم الطريقة .set_form_button() لجعله يرسل النموذج عند النقر عليهbutton = q.new("button").set_text(" Submit").set_form_button()# أدخل عناصر النموذج في النموذجformform.insert([input,button])q.display.insert(form).render() استخدم لغة الترميز الرسمية بسهولة (يستخدم bootstrap)
لتعريف كائنات qhtml بسرعة وسهولة.
- use attr-'attributename' to declare normal html element attributes - use 'attributename' to attempt to use ANY Qhtml setter methods on an element - you declare columns by element position in the list - each list item is essentially a row - requires bootstrap (instantiate with qhtml method)
# إنشاء مثيل classq = qhtml()# "استيراد" أدوات تمهيد التمهيد بسهولةq.bootstrap.use(True)# إرجاع الطريقة السريعة # كائن qhtml فعلي = q.express([
['div','p','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # إنشاء مثيل classq = qhtml()# "استيراد" أدوات تمهيد التمهيد بسهولةq.bootstrap.use(True)# إرجاع الطريقة السريعة # كائن qhtml فعلي = q.express([
['div attr-class = "myclass"','p attr-id = "myid"','div attr-style = "background-color:red"']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Instantiate classq = qhtml()# "استيراد" أدوات bootstrap بسهولةq.bootstrap.use(True)# يحتوي كائن Qhtml على طريقة تسمى: set_text# وهي أيضًا طريقة تسمى: set_img_src# لذلك نحذف البادئة "set_". لذلك بدلاً من # set_text("some text")، نستخدم ببساطة text="some text"# لاستدعاء الطريقة المذكورة = q.express([
['div','p text="QuykHtml Rocks!"','div'],
['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # إنشاء مثيل لـ classq = qhtml()# "استيراد" أدوات مساعدة التمهيد بسهولةq.bootstrap.use(True)# تحديد بعض cssq.css.add('.center','text-align:center;')# إنشاء عناصر النموذج الخاصة بنا = ف.اكسبرس([
['div', 'p text="Email"', 'div'],
["div"، "الإدخال"، "div"]،
['div', 'p text="Password"', 'div'],
["div"، "الإدخال"، "div"]،
['div'، 'p text="تأكيد"'، 'div']،
["div"، "الإدخال"، "div"]،
['div', 'button text="Complete" attr-value="submit" attr-class="margin-top-med Signup"', 'div']
]).set_class("center", True)# إنشاء حاوية النموذج الفعلية elementform = q.new('form').set_class('center')# أدخل عناصر النموذج وقم بتعيين خيارات النموذجform.insert(layout). set_form_options("register.php", "post")# عرض النتائجq.display.insert(form) من QuykHtml import qhtml# إنشاء فئة q = qhtml()# تعريف بعض SEOq.seo.set_page_title('عنوان الصفحة')q.seo.set_page_author('Author')q.seo.set_page_keywords('some key الكلمات')q.seo.set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # تحديث كل 30 ثانيةlist_of_seo = q.seo.display_all_seo() من QuykHtml import qhtml# إنشاء فئة q = qhtml()# أوامر التسلسلq.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('clicked me');").style.set("cursor:pointer;")# أمثلة وسيطات العرض # ملف الإخراج str_path, فقط_html منطقية, set_clip_board booleanq.display.insert(q.new("p.").set_text("عرض الوسائط")).render(output_file="file/path/file.html")q.display.insert(q.new( "ص.").set_text("رندر الوسائط")).render(only_html=True)q.display.insert(q.new("p.").set_text("تقديم الوسائط")).render(output_file="file/path/file.html", set_clip_board=True)q.display.insert(q.new("p.").set_text("Render" الوسائط")).render(only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render()# ------ ------------------------# Bootstrap - الدعم # --------------------- --------- q.bootstrap.use(True)div = q.new("div").set_class("row")div_col1 = q.new("div").set_class("col").set_text("column1")div_col2 = q.new("div"). set_class("col").set_text("column2")div.insert([div_col1,div_col2])# بناء جملة صالح أيضًا = q.new("div").set_class("row").insert([ q.new("div").set_class("col").set_text("column1"), q.new("div") .set_class("col").set_text("column2")
])# ------------------------------# إلحاق بالرأس tagq.head.append('<script type=" text/javascript" src="path/to/js_code.js"></script>')q.head.append('<link rel="stylesheet" href="path/to/css.css">') # مساعد الألوان المدمج = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # والمزيد..للون بالألوان: print(color) # -> #hex_value# قم بالتكرار عبر كل كائن تم إنشاؤه لمثيل qhtml للعنصر في q. الكل: طباعة ("نوع العنصر -> ' + element.type) element.set_text ("الكتابة فوق")
# تكرار كائنات العناصرp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p tag number 1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('رقم العلامة p 2').style.append('color:green;')# إضافة أنماط تصدير CSS إلى 'q.css'q.css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export(' المسار/إلى/export.css') من QuykHtml import qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('مثال للهبوط Header').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:gray;color:white; ')head.insert(head_text)body = q.new('div').style.set('width:65%;margin:auto;margin-bottom:100px;').set_class('row')body_text = q.new('p').set_text_ipsum_large().style.font_size('24px').style.align('left').style.append('margin-top:60px;margin-bottom:60px;') .style.font_color('gray')body_img_1 = q.new('img').set_class('col').set_img_placeholder(400).style.height('400px').style.append('margin-top:20px;')body_img_2 = q.dupe(body_img_1 )body.insert([body_text,body_img_1,body_img_2])footer = q.new('div').style.align('center').style.set('margin:0px;position:fixed;bottom:0px;width:100%;background-color:gray;padding-top: 5px;الحشوة السفلية:5px;')footer_text = q.new('p').style.set('font-weight:bold;margin:0px;')footer_text.set_text('مثال لنص التذييل. جميع الحقوق محفوظة.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body, تذييل الصفحة]).تصيير() # تطبيق Flask Hello World بسيط جدًا يمكنك البدء به... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# استخدم دائمًا " " كالجزء الخارجي اقتباس سلسلة و' ' بالداخل if needon_click_code = "alert('لقد قمت بالنقر فوق الزر!');"# Div يحتوي على عنصر p وزر به حدث عند النقر eventsdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("هذا يعمل" ),q.new('button').style.font_size('24px').set_text('انقر فوقي').on_click(on_click_code)
])# Div يحتوي على عنصر p مع نص الترحيب فيهdiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('مرحبًا من QuykHtml and Flask!')
])@app.route('/')def hello_world(): # استخدم طريقة .html على كائن qhtml للحصول على HTML الخاص به وتقديمهreturn div.html() + div2.html() # تطبيق Flask Hello World بسيط جدًا يمكنك البدء به... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# استخدم دائمًا " " كالجزء الخارجي اقتباس سلسلة و' ' بالداخل if needon_click_code = "alert('لقد قمت بالنقر فوق الزر!');"# Div يحتوي على عنصر p وزر به حدث عند النقر eventsdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("هذا يعمل" ),q.new('button').style.font_size('24px').set_text('انقر فوقي').on_click(on_click_code)
])# Div يحتوي على عنصر p مع نص الترحيب فيهdiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('مرحبًا من QuykHtml and Flask!')
])# ضع الكائنات في الشاشة وقم بعرض الملف على test.txtq.display.insert([div,div2]).render(output_file='test.txt', Only_html=True)@app.route('/ ')def hello_world(): # استخدم طريقة file_read للحصول على HTML المعروض وتقديمهhtml = q.file_read('test.txt')return html 
