QuykHtml
1.0.0
Библиотека Python, которая позволяет быстро и легко генерировать HTML-шаблоны и даже создавать полноценные веб-сайты.
Если вы чувствуете щедрость или хотите купить мне кофе или сделать пожертвование, ниже мое приложение для получения денег:
cash app: $elmling
Новые возможности:
- Выражать
Ключевые особенности:
- Колба
- Объединение команд в цепочку
- Поддержка Javascript/jQuery.
- Создание таблицы
- Создание Аякса
- Создание формы
- Бустрап
- SEO
- Пример целевой страницы
# Импортируем класс из библиотеки из QuykHtml import qhtml# Создание экземпляра классаq = qhtml()# Вставка измененного элемента p в наш основной дисплейq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# Отрисовываем страницуq.display.render() from QuykHtml import qhtml# Создать экземпляр классаq = qhtml()# Создать divdiv = q.new("div")# Создать абзацp = q.new("p")# Создать inputinput = q.new("input") # Отображаем результаты, вставляя все объекты в displayq.display.insert([div, p, input]).render(). from QuykHtml import qhtml# Создать экземпляр classq = qhtml()# Объявить css, позволяет создать список списков, где первым значением является # имя класса, а для второго значения — строка разметки/стиля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")# Глобальный элемент Setterssp.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('какое-то имя')p.set_value('пользовательское 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('Мышь 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 (ложь) from QuykHtml import qhtml# Создать экземпляр классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# Создать необработанную таблицу из 1 строки и 2 столбцовtable = q.table(1,2)# Вставить метод с использованием 0 index -> Insert_at(строка,столбец,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("Row 1 столбец 2"))# Также допустимо синтаксисtable = q.table(1,2).insert_at(0,0,q.new("p").set_text("Столбец строки 1 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() from QuykHtml import qhtml# Создать экземпляр классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# Добавить скрипт, можно даже прочитать из файлаq.scripts.append( 'function js_function() {'' alert("Функция JS");''}')# Добавляем скрипт к объекту qhtmlp = q.new("p").set_text("Text element").scripts_add( 'function js_function() {'' alert("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# Создать экземпляр классаq = 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("Текст ответа " + r.responseText);}')# Добавляем JS-код, чтобы при загрузке страницы вызывать функцию ajax using# element.ajax_get("pointer") <- метод ajax, созданный ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p).render() from QuykHtml import qhtml# Создать экземпляр классаq = 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() Легко использовать официальный язык разметки (использует начальную загрузку)
чтобы быстро и легко определять объекты 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)
# Создание экземпляра классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# экспресс-метод возвращает# фактический объект qhtml objectlayout = q.express([
['див','п','дел']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Создание экземпляра классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# экспресс-метод возвращает# фактический объект qhtml objectlayout = 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() # Создать экземпляр классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# Объект Qhtml имеет метод с именем: set_text#, а также метод с именем: set_img_src#, поэтому мы опускаем префикс «set_». Поэтому вместо # set_text("some text") мы просто используем text="some text"# для вызова указанного методаlayout = 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() # Создать экземпляр классаq = qhtml()# Легко «импортировать» утилиты начальной загрузкиq.bootstrap.use(True)# Определить cssq.css.add('.center','text-align:center;')# Создайте нашу форму elementslayout = q.express([
['div', 'p text="Электронная почта"', 'div'],
['div', 'input', 'div'],
['div', 'p text="Пароль"', 'div'],
['div', 'input', 'div'],
['div', 'p text="Подтвердить"', 'div'],
['div', 'input', 'div'],
['div', 'button text="Завершить" attr-value="отправить" 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) from QuykHtml import qhtml# Создать экземпляр классаq = qhtml()# Определить SEOq.seo.set_page_title('Заголовок страницы')q.seo.set_page_author('Автор')q.seo.set_page_keywords('некоторые ключевые слова')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # обновление каждые 30 секундlist_of_seo = q.seo.display_all_seo() from QuykHtml import qhtml# Создание экземпляра классаq = qhtml()# Объединение командq.new("p").set_text('некоторый текст').set_class('text-class').set_id('text-id').on_click( "alert('щелкнул меня');").style.set("курсор:указатель;")# Примеры аргументов рендеринга# выходной_файл str_path, only_html boolean, set_clip_board booleanq.display.insert(q.new("p").set_text("Аргументы рендеринга")).render(output_file="file/path/file.html")q.display.insert(q.new(" p.").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( only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("Аргументы рендеринга")).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])# Также допустимо синтаксисdiv = 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">') # Встроенный помощник по работе с цветомsc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # и многое другое..для цвета в цветах: print(color) # - > #hex_value# Перебираем каждый созданный объект элемента экземпляра qhtml в q. все: print('Тип элемента -> ' + element.type) element.set_text("Перезаписать")
# Дублирование объектов элементаp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p тег номер 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('ширина: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('серый')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;padding-bottom: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, нижний колонтитул]).render() # Очень простое приложение 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 и кнопку с событием on click eventdiv = 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 с текстом приветствия в itdiv2 = 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 и 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 и кнопку с событием on click eventdiv = 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 с текстом приветствия в itdiv2 = 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 и 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 
