HeUI ابزاری ساده ولی توانمند برای تولید ابزار داینامیک در صفحات وب
پروژه HeUI در ادامنه مسیر تولید کتابخانه شیوه نامه های هِه برای رفع نیازهای نرم افزار استدیوی هروف تولید شده است و این ابزار در کنار کتابخانه HeCSS با حجم بسیار کم و کاربرد ساده به شما امکان تولید ابزار متفاوت داینامیک در صفحات وب را می دهد.
کتابخانه HeUI مجموعه اسکریپت هایی به زبان جاوا اسکریپت هستند که در کنار کتابخانه شیوه نامه های هِه امکان تولید فرم ها و اجزای مختلف داینامیک برای صفحات وب را فراهم می سازد. این مجموعه با تولید ابزار مورد نیاز توسعه دهندگان که به صورت پیش فرض در دسترس برای توسعه نیست به بالا بردن سرعت تولید کمک می کند.
شما با دریافت و قراردادن فایل he.ui.min.js در کنار کتابخانه HeCSS می توانید شروع به استفاده از امکانات این کتابخانه ها کنید. توجه داشته باشید که این کتابخانه با استفاده از کتابخانه شیوه نامه های هِه می تواند اقدام به ارائه قابلیت های خود نماید و در غیر این صورت شما نمی توانید از قابلیت های کتابخانه HeUI استفاده کنید.
برای استفاده از کتابخانه HeUI ابتدا فایل کتابخانه را دانلود کنید و آن را در پوشه مورد نظر خود کپی کنید و سپس با قرار دادن لینک فایل he.ui.min.js یا he.ui.js مانند مثال بعدی در HTML صفحه پروژه، به امکانات کتابخانه دسترسی پیدا کنید.
<html>
<head>
[ header tags ]
<link rel="stylesheet" href="[ your path to HeCSS ]/he.min.css">
<script type="text/javascript" src="[ your path to HeUI ]/he.ui.min.js"></script>
</head>
<body> ...
همچنین شما می توانید از آدرس CDN کتابخانه HeUI استفاده کنید.
<script src="https://heui.horuph.com/dist"></script>
برای افزودن سرعت در توسعه و کاهش کدهای مورد نیاز برای تولید اجزا صفحات وب کتابخانه HeUI کلاسهایی را به توسعه دهندگان ارائه می دهد که زودتر به خواسته خود برسند. برای استفاده از این امکانات مانند نمونه ها از کلاس های ارائه شده استفاده کنید.
افزودن صفحه بارگزاری (Splash Screen):
با قرار دادن یک نگهدارنده محتوا در بالاترین نقطه صفحه بلافاصله پس از تگ body می توانید صفحه بارگزاری به نرم افزار اضافه کنید.
<div class="he-splash">
<div class="he-cell he-middle">
[Logo & title]
</div>
</div>
برای تایین مدت حداقل زمان نمایش صفحه بارگزاری می توان از طریق افزودن اسکریپت زیر به صفحه مدت زمان مورد نظر خود را به ثانیه مشخص کنید.
let HeSplashTime = 3.0;
تصویر پس زمینه با استفاده از دیتاست:
برای استفاده از تصاوبر پس زمینه به صورت دینامیک و بدون استفاده از کد CSS می توانید از این کلاس و دیتاست استفاده کنید.
<div class="he-bg" data-bg="background.png"></div>
لیزخوردن به بالا در زمان مرور:
برای نمایش افکت لیز خوردن به بالا و ظاهر شدن بخش هایی از صفحه به این شیوه می توانید از این کلاس استفاده کنید.
برای مشاهده نمونه صفحه را مجددا بارگزاری کنید. و از بالای صفحه به پایین بیایید.
از این کلاس می توانید برای تصاویر، متون و بخش های محتلف درون صفحه استفاده کنید.
<img class="he-slidein" src="product.png" >
<div class="he-slidein">
Some content...
</div>
لرزش اجزا صفحه:
برای نمایش افکت لرزش اجزا صفحه می توانید مانند نمونه از این دستورات استفاده کنید.
HeShake([obj or id]);
دنبال کردن با scroll:
برای دنبال کردن بخشی از صفحه در هنگام Scroll می توانید مانند نمونه از این دستورات استفاده کنید.
برای فرم های بارگزاری شده با Ajax:
برای فراخوانی با اسکریپت:
کتابخانه HeUI ابزار متنوعی را برای تولید اجزا داینامیک در صفحات وب برای ایجاد امکانات بیشتر برای ارائه محتوا و جلب توجه بازدیدکندگان در دستگاه های مختلف فراهم می آورد. با استفاده از کلاسهای این کتابخانه می توانید بدون نیاز به نوشتن کدهای اسکریپت، امکانات مختلفی را به صفحات خود اضافه کنید.
عملکرد کلیک:
برای تعریف عملکرد کلیک بر روی دکمه یا محدوده می توانید از این کلاس و دیتاست استفاده کنید.
<a class="he-click" data-remove="#removing_item">remove</a>
<div id="removing_item">
...
</div>
توجه داشته باشید که در دیتاست ها مشخص کنید که هدف شما کلاس یا id یک بخش است.
نمایش با حرکت موشواره و نا پدید با کلیک:
برای ایجاد منو های متفاوب و یا نمایش توضیحات و راهنما می توانید از این کلاس استفاده کنید
در صورتی که بیش از یک آیتم در صفحه به این شیوه نمایش داده می شوند می توانید با استفاده از این کلاس مشخص کنید که با باز شدن یکی دیگری بسته شود.
برای بستن بخشی از صفحه با کلیک یا تماس بر روی صفحه می توانید از این کلاس استفاده کنید
<a class="he-hover" data-hover="#item1">help</a>
<div id="item1" class="absolute he-hover-target hidden he-hide-on-click">
[Help Card]
</div>
توضیحات پیشرفته
برای فرم های بارگزاری شده با Ajax:
readyHeHover();
برای فراخوانی جداگانه یک بخش مخفی:
متغیر destination می تواند به کلاس یا id یک تکه از صفحه اشاره کند.
callHeHover('#objId');
callHeHover('.class-name');
برای بستن جداگانه همه object های دارای کلاس he-hide-on-click:
document.onclick = function() {
HeHideOnClick(callback);
};
اسکریپت با حرکت موشواره خارج از مساحت:
برای اجرای اسکریپت خاصی در زمان حرکت موشواره به خارج از کادر مساحت Object می توانید از این اسکریپت استفاده کنید
شمارنده:
برای فرم های بارگزاری شده با Ajax:
برای فراخوانی با اسکریپت:
برای شمارش به عدد جدید:
<b class="he-count" data-end="100"></b>
<b class="he-count"
data-start="1"
data-end="100"
data-farsi="true"
data-onscroll="true"
data-commas="true"
data-duration="3" ></b>
منوی کلیک راست اختصاصی:
روی آیتم های زیر کلیک راست کنید و یا در موبایل انگشت خود را نگه دارید.
برای نمایش اختصاصی راست به چپ
مقدار data-value:
با کلیک راست بر روی هر یک از اشیا در صفحه می توانید از طریق JavaScript مقدار data-value شی را از متغییر HeContextmenuValue دریافت کنید.
<a class="he-contextmenu-caller"
data-menu="contextmenu" data-value="Test1">
Test1
</a>
<a class="he-contextmenu-caller"
data-menu="contextmenu" data-value="Test2">
Test2
</a>
<div id="contextmenu" class="he-contextmenu">
<a onclick="alert(HeContextmenuValue);">Edit</a>
<a onclick="alert(HeContextmenuValue);">Delete</a>
</div>
برگه های زبانه دار:
شما با استفاده از این کلاس ها محدودیتی برای تعداد تولید برگه های زبانه دار در یک صفحه ندارید و می توانید به تعداد دلخواه زبانه و برگه زبانه دار درست کنید.
<table class="he-tabs" data-rel="tabpages" id="tabListId">
<tr>
<td data-id="0" class="he-tab-item selected">
<a href="https://www.horuph.com">tab 1</a>
</td>
<td data-id="1" class="he-tab-item">
<a>tab 2</a>
</td>
<td data-id="2" class="he-tab-item disabled">
<a>tab 3</a>
</td>
<td class="he-border-bottom-light"></td>
</tr>
</table>
<div id="tabpages">
<div data-id="0" class="he-tab-page">
page 1
</div>
<div data-id="1" class="he-tab-page hidden">
page 2
</div>
<div data-id="2" class="he-tab-page hidden">
page 3
</div>
</div>
توضیحات پیشرفته
برای همه برگه های زبانه دار در صفحه بارگزاری شده با Ajax:
readyHeTabs();
فراخوانی برگه های زبانه دار با Id در صفحه بارگزاری شده با Ajax:
متغیر tabListId به Id نگهدارنده برگه های زبانه دار اشاره کند.
HeTab(tabListId);
برای فراخوانی جداگانه یک زبانه توسط اسکریپت:
متغیر tabListId به Id نگهدارنده زبانه های برگه ها اشاره کند. متغیر selectedTabID به Id ذخیره شده در دیتاست data-id برگه زبانه دار مورد نظر اشاره کند.
HeTabSelect(tabListId, selectedTabID);
منوی کشویی کناری:
برای افزودن منو های کشویی که از کنار صفحه باز می شوند می توانید مطابق مثال از این کلاس ها و دیتاست ها استفاده کنید.
<div id="sidemenu" class="he-menu-side">
<a class="closer">Menu</a>
</div>
<a class="he-menu-side-opener" data-id="sidemenu">OPEN</a>
فراخوانی در صفحه بارگزاری شده با Ajax:
readyHeMenuSide();
بازکردن منو با اسکریپت:
showHeMenuSide(menuId);
بستن منو با اسکریپت:
closeHeMenuSide(menuId);
نمایش toast:
HeToast(text);
نمایش زمان سپری شده:
<b class="he-time" data-lang="fa" data-time="2024/10/10 19:48:26"></b>
فرمت:
date('Y/m/d H:i:s');
نمایش چرخ و فلک:
دیتاست های مرتبط با این کلاس می تواند به شما در اختصاصی سازی بیشتر چرخ و فلک کمک نماید.
<div class="he-carousel" data-columns="2" data-time="5">
<div class="center">
<img src="image1.png">
</div>
<div class="center">
<img src="image2.png">
</div>
<div class="center">
<img src="image3.png">
</div>
</div>
برای فرم های بارگزاری شده با Ajax:
readyHeDatePicker();
کتابخانه HeUI ابزار مختلفی برای تولید ورودی های فرمهای داینامیک به جهت ایجاد سهولت در تکمیل فرم برای بازدیدکندگان و استفاده کننده گان این فرم ها فراهم می آورد. برای استفاده از این ابزار نمونه های توضیح داده شده را مطالعه کنید.
ارسال با لینک:
برای ایحاد امکان ارسال (Submit) فرم های Server Side توسط لینک می توانید از این کلاس استفاده کنید.
<form>
<input type="text" name="search">
<a class="he-submit">submit</a>
</form>
برای فرم های بارگزاری شده با Ajax:
readyHeSubmit();
بازه انتخاب:
برای تولید ورودی داده به صورت انتخاب بازه یا محدوده با استفاده از کلاس و تگ های توضیح داده شده می توانید مانند مثال ورودی داده را به صفحه مورد نظر اضافه کنید.
برای قرار دادن ابزار انتخاب بازه در صفحه وب به وسیله کتابخانه HeUI دو روش اصلی وجود دارد که می توانید استفاده کنید.
روش اول
ساده ترین روش قرار دادن ابزار انتخاب بازه محدوده در صفحه وب مانند نمونه روش اول و تنها با استفاده از یک تگ و دیتاست های مرتبط است.
مقادیر قابل انتخاب و نمایش در این روش تنها مقادیر عددی صحیح است.
<div class="he-range" id="slider"
data-start="1" data-end="20"
data-min="6" data-max="15"
data-end-plus="true" >
</div>
<div>
<span class="float-left" id="slider-min-text"></span>
<span id="slider-max-text"></span>
</div>
روش دوم
با این روش ما می توانید به صورت خصوصی سازی شده مقادیر ورودی و نمایش آنها را مشخص کنید. برای این کار کافی است به جای مشخص کردن مقادیر دیتاست data-start, data-end, data-min, data-max مانند نمونه با استفاده از تگ های فرزند برای تگ دارای کلاس he-range استفاده کنید.
در این شیوه دیتاست data-value در تگ های فرزند برای مقدار قابل انتخاب و متن تگ برای نمایش مقدار استفاده می شود.
با استفاده از دستاست های data-min و data-max با مقدار true برای تگهای فرزند می توانید حداقل و حداکثر انتخاب شده برای بازه را مشخص نمایید
در این روش مقدار بازگشت داده توسط ابزار برای حداقل و حداکثر index آیتم انتخاب شده است.
<div class="he-range" id="slider" data-end-plus="true">
<i data-value="0">0 ماه</i>
<i data-value="3">3 ماه</i>
<i data-value="6" data-min="true">6 ماه</i>
<i data-value="12">1 سال</i>
<i data-value="24">2 سال</i>
<i data-value="36" data-max="true">3 سال</i>
<i data-value="60">5 سال</i>
<i data-value="120">10 سال</i>
<i data-value="240">20 سال</i>
</div>
<div>
<span class="float-left" id="slider-min-text"></span>
<span id="slider-max-text"></span>
</div>
نمایش مقادیر انتخاب شده
کتابخانه HeUI برای باز گذاشتن دست توسعه دهنده در شیوه نمایش ابزار در صفحه قرار دادن محل و شیوه نمایش مقادیر حداقل و حداکثر انتخاب شده توسط کاربر را به عهده توسعه دهنده قرار داده است.
برای رسیده به این منظور می بایست مانند مثال ها با همان id انتخاب شده برای تگ دارای کلاس he-range تگ های نمایش مقادیر حداقل و حداکثر را تغریف کنید.
<div class="he-range" id="slider" data-start="1" data-end="10" ></div>
<span id="slider-min-text"></span>
<span id="slider-max-text"></span>
دریافت مقادیر سمت سرور
مقادیر قابل دسترسی سمت سرور:
کتابخانه HeUI برای شما در صفحه دو ورودی غیرقابل رویت برای دریافت مقدار حداقل و مقدار حداکثر با نام هایی مانند نمونه می سازد که قابل دسترسی است.
توضیحات پیشرفته
برای فرم های بارگزاری شده با Ajax:
readyHeRange();
object های قابل دسترسی با Javascript:
ادیتور WYSIWYG:
برای ایجاد ادیتور WYSIWYG یا Rich text editor ساده در صفحه برای ورود متن و تصویر بهینه شده می توانید از این کلاس برای textarea استفاده کنید.
با دستوراتی که در دیتاست data-buttons ثبت می کنید می توانید مشخص کنید که چه دکمه هایی برای ابزار WYSIWYG نمایش داده شوند.
<textarea id="wysiwyg" class="he-editor" data-buttons="link,alignment"></textarea>
همچنین با نوشتن مقدار true برای data-spellcheck می توانید مشکلات نگارشی و نوشتاری در صفحه را به کاربر علامت دهید.
<textarea class="he-editor" data-spellcheck="true"></textarea>
برای فرم های بارگزاری شده با Ajax:
readyHeEditor();
انتخابگر تاریخ:
با استفاده از این کلاس و دیتاست ها برای نمایش انتخابگر تاریخ برای تاریخ میلادی و همچنین جلالی استفاده کنید.
با دستوراتی که در دیتاست data-options ثبت می کنید می توانید ویزگی های انتخابگر تاریخ را مشخص کنید.
نمونه برای تاریخ شمسی (جلالی)
نمونه برای تاریخ میلادی
<div class="relative">
<input id="datepicker"
class="he-datepicker"
data-disable="friday"
data-type="jalali"
data-options="autoClose" >
</div>
نمونه استفاده به عنوان ورودی داده:
برای فرم های بارگزاری شده با Ajax:
readyHeDatePicker();
کتابخانه HeUI برای تایید صحت فرم های ورودی به توسعه دهندگان امکاناتی ارائه می دهد که به سادگی و بدون نیاز به اسکریپت و کد اضافه تایید صحت فرم های سمت سرور را انجام دهند. این امکانات به سادگی برای فرم هایی که به صورت Ajax ارسال می شوند نیز قابل استفاده است.
برای فرم هایی که با Ajax ارسال می شوند تایید صحت توسط اسکریپت انجام می وشد و به عهده توسعه دهنده است.
تایید صحت فرم های سمت سرور:
برای فعال کردن تایید صحت برای فرم سمت سرور این کلاس را به فرم اضافه کنید
برای مشخص کردن نوع تایید صحت اعمال شونده برای ورودی داده می توانید از کلاس، دیتاست و ویژگی های روبرو استفاده کنید.
حتما توجه داشته باشید که اسکریپت های سمت کاربر به تنهایی برای تایید صحت داده ورودی کافی نیستند و توسعه دهنده می بایست سمت سرور نیز صجت داده های ورودی را بررسی نماید.
این ابزار برای کمک به کاربر برای تکمیل صحیح فرم و کاستن از نیاز به بازگشت به فرم برای اصلاح اطلاعات است.
برای مشاهده کارکرد نمونه روی دکمه ارسال کلیک کنید.
<form class="he-validate">
<div class="he-table-form">
<div class="he-row">
<div class="he-cell-text">email:</div>
<div class="he-cell-input">
<input class="req-email">
</div>
</div>
<div class="he-row">
<div class="he-cell-text">phone:</div>
<div class="he-cell-input">
<input class="req-phone">
</div>
</div>
<div class="he-row">
<div class="he-cell-text">name:</div>
<div class="he-cell-input">
<input class="req-min" data-min="3" maxlength="50">
</div>
</div>
</div>
<div class="he-form-buttons">
<input type="submit" value="Submit" >
</div>
</form>
توضیحات پیشرفته
برای فرم های بارگزاری شده با Ajax:
window.addEventListener('DOMContentLoaded', (event) => {
readyHeValidate([foromId]);
});
HeValidateForm(foromId);
برای استفاده در اسکریپت:
برای تایید صحت یک مقدار در اسکریپت های خود می توانید از این متد ها استفاده کنید.
if(HeValidateEmail(emailAddress)) {
alert('Email is valid');
}
مقدار بازگشت داده شده توسط این متدها به صورت bool با مقدار true یا false است.
نمایش اعداد:
برای نمایش اعداد می توانید از این اسکریپت استفاده کنید.
عدد
var numberWithCommas = HeCommas(n);
window.addEventListener('DOMContentLoaded', () => {
readyHeCommas();
});
قدرت سنجی کلمه عبور:
برای بررسی قدرت کلمه عبور وارد شده می توانید از این اسکریپت استفاده کنید.
کلمه عبور
<input type="password" id="passwordId">
window.addEventListener('load', () => {
HePassCheck('passwordId');
});
کتابخانه HeUI مجموعه ای توابع است که برای ساختن ابزار از آنتها استفاده می شود. برخی از این توابع به تنهایی می توانند در تولید سایر بخشهای یک نرم افزار می تواند مورد استفاده قرار بگیرد.
تبدیل تاریخ:
با استفاده از این کدهای می توانید تاریخ شمسی (جلالی) را به تاریخ میلادی و یا بلعکس تبدیل کنید.
var json = toJalali(y, m, d);
var json = toGregorian(y, m, d);
var days = jalaliMonthLength(y, m); // int
تبدیل اعداد به فارسی:
با استفاده از این تابع می تونید اعداد متون را به اعداد فارسی تبدیل کنید.
var fa_str = toFarsiNumber(123);
همیشه آخرین نسخه کتابخانه اسکریپ های HeUI، کامل ترین و به روزترین نسخه خواهد بود و برای پروژه های جدید پیشنهاد می کنیم همیشه از آخرین نسخه استفاده کنید ولی در صورتی که نیاز به نسخه های قبلی دارید می توانید اینجا فهرست تمامی نسخه ها را در اختیار داشته باشید.
ساخته شده با تمام ❤️ در دنیا توسط علی پورناصح به سفارش استدیوی هروف.
آخرین نسخه کتابخانه هِه یو آی 1.0.900 است که می توانید از اینجا دریافت کنید.
