سلام ، حال شما چطوره ؟ با اموزشی در زمینه جی کو/ئری و ایجاد دایلاوگ باکس درخدمت شما هستم .دیالوگ باکس ها یکی از روش های خوب برای نمایش اطلاعات روی یک صفحه ی HTML هستند. یک دیالوگ باکس پنجره را با یک تیتر و یک محدوده ی محتوا، معلق می کند. این پنجره را می توان جابه جا کرد، تغییر اندازه داد، و البته با استفاده از آیکن X پیش فرض آن را بست.
jQueryUI متد dialog() را ارائه می دهد که کد HTML نوشته شده روی صفحه را به کد HTML برای نمایش در یک دیالوگ باکس تبدیل می کند.
متد dialog() به دو فرم زیر استفاده می شود:
$(selector, context).dialog (options) Method
$(selector, context).dialog (“action”, [params]) Method
متد $(selector, context).dialog (options) :
متد dialog (options) اعلام می کند که یک عنصر HTML می تواند به شکل یک دیالوگ باکس نمایش داده شود. پارامتر options آبجکتی است که ظاهر و رفتار آن پنجره را تعیین می کند.
$(selector, context).dialog(options);
شما می توانید با استفاده از آبجکت Javascript یک یا چند گزینه را همزمان نمایش دهید. اگر بیشتر از یک گزینه برای نمایش وجود داشته باشد، آنها را با استفاده از کاما مجزا می کنید، مانند ترکیب زیر:
$(selector, context).dialog({option1: value1, option2: value2….. });
جدول زیر گزینه های مختلفی را ارائه می دهد که با این متد مورد استفاده قرار می گیرند:
Option
Description
appendTo
اگر این گزینه روی false تنظیم شده باشد، از افزوده شدن گروه ui-draggable به لیست عناصر انتخاب شده ی DOM جلوگیری می کند. مقدار پیش فرض آن true است.
autoOpen
این گزینه مگر اینکه بر روی false تنظیم شده باشد، دیالوگ باکس بر ایجاد آن باز می شود. وقتی روی false تنظیم شده باشد، دیالوگ باکس با فراخوانی dialog(‘open’) باز می شود. مقدار پیش فرض آن true است.
buttons
این گزینه دکمه ها را به دیالوگ باکس اضافه می کند. اینها به عنوان آبجکت هایی لیست شده اند و هر پراپرتی متن روی دکمه است. مقدار آن یک تابع پاسخ است که وقتی یوزر روی دکمه کلیک می کند، فراخوانده می شود. مقدار پیش فرض آن {} است.
closeOnEscape
مگر اینکه گزینه روی false تنظیم شده باشد، وقتی یوزر روی دکمه ی Escape کلیک کند دیالوگ باکس بسته خواهد شد. مقدار پیش فرض آن true است.
closeText
این گزینه حاوی متنی است برای جایگزینی Close برای دکمه ی بستن. مقدار پیش فرض آن “close” است.
dialogClass
اگر این گزینه روی false تنظیم شده باشد، از افزوده شدن گروه ui-draggable به لیست عناصر انتخاب شده ی DOM جلوگیری می کند. مقدار پیش فرض آن “” است.
draggable
مگر اینکه این گزینه روی false تنظیم شده باشد، دیالوگ باکس با کلیک کزدن و درگ کردن نوار عنوان، draggable خواهد بود. مقدار پیش فرض آن true است.
height
این گزینه طول دیالوگ باکس را تنظیم می کند. مقدار پیش فرض آن auto است.
hide
این گزینه برای تنظیم اثر بسته شدن دیالوگ باکس استفاده می شود. مقدار پیش فرض آن null است.
maxHeight
این گزینه حداکثر طول گزینه را به پیکسل، تنظیم می کند که در آن دیالوگ باکس قابل تغییر انداره می باشد. مقدار پیش فرض آن false است.
maxWidth
این گزینه بیشترین عرض را که در آن دیالوگ باکس می تواند تغییر اندازه پیدا کند، به پیکسل تنظیم می کند. مقدار پیش فرض آن false است.
minHeight
این گزینه حداقل طول را به پیکسل، که طبق آن دیالوگ باکس می تواند تغییر اندازه پیدا کند، تنظیم می کند. مقدار پیش فرض آن ۱۵۰ است.
minWidth
این گزینه حداقل عرض را به پیکسل تنظیم می کند که طبق آن دیالوگ باکس می تواند تغییر اندازه پیدا کند. مقدار پیش فرض آن ۱۵۰ است.
modal
اگر این گزینه روی true تنظیم شده باشد، دیالوگ باکس دارای رفتار کیفیتی خواهد بود؛ آیتم های دیگر روی صفحه غیرفعال خواهند شد، به عنوان مثال با هم تعامل نخواهند داشت. دیالوگ های مودال ایجاد یک همپوشانی در زیردیالوگ اما بالای عناصر پیج دیگر، دارند. مقدار پیش فرض آن false است.
position
این گزینه موقعیت اولیه ی دیالوگ باکس را تعیین می کند. می تواند یکی از موقعیت های از پیش تعریف شده باشد: center (the default), left, right, top, یا bottom. همچنین می تواند یک ردیف دارای دو عنصر با مقادیر left و top یا موقعیت های متن مانند [‘right’,’top’] باشد. مقدار پیش فرض آن is { my: “center”, at: “center”, of: window } است.
resizable
کگر اینکه روی false تنظیم شده باشد، دیالوگ باکس در همه ی جهت ها قابل تغییر اندازه خواهد بود. مقدار پیش فرض آن true است.
show
این گزینه تاثیری است که هنگامی استفاده می شود که دیالوگ باکس باز شده است. مقدار پیش فرض آن null است.
title
این گزینه متن مربوط به نوار عنوان را در دیالوگ باکس تعیین می کند. مقدار پیش فرض آن null است.
width
این گزینه عرض دیالوگ باکس را به پیکسل تعیین می کند. مقدار پیش فرض آن ۳۰۰ است.
بخش بعد به شما چند مثال از قابلیت دیالوگ ارائه خواهد کرد.
قابلیت پیش فرض:
مثال زیر استفاده از قابلیت دیالوگ را، بدون انتقال هیچ پارامتری به متد dialog() ، توضیح می دهد:
jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: red;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-1”).dialog({</p>
<p>autoOpen: false,</p>
<p>});</p>
<p>$(“#opener”).click(function () {</p>
<p>$(“#dialog-1”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!div></p>
<p><button id="opener">Open Dialogbutton></p>
<p>body></p>
<p>html></p>
<p>استفاده از buttons، title و position:</p>
<p>مثال زیر استفاده از گزینه های مهم buttons,title و position را در دیالوگ ویجت از JqueryUI توضیح می دهد.</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-2”).dialog({</p>
<p>autoOpen: false,</p>
<p>buttons: {</p>
<p>OK: function () { $(this).dialog(“close”); }</p>
<p>},</p>
<p>title: “Success”,</p>
<p>position: {</p>
<p>my: “left center”,</p>
<p>at: “left center”</p>
<p>}</p>
<p>});</p>
<p>$(“#opener-2”).click(function () {</p>
<p>$(“#dialog-2”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog!div></p>
<p><button id="opener-2">Open Dialogbutton></p>
<p>body></p>
<p>html></p>
<p>استفاده از hide، show و height:</p>
<p>مثال زیر استفاده از گزینه های مهم hide, showand height را در دیالوگ ویجت JqueryUI توضیح می دهد.</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-3”).dialog({</p>
<p>autoOpen: false,</p>
<p>hide: “puff”,</p>
<p>show: “slide”,</p>
<p>height: 200</p>
<p>});</p>
<p>$(“#opener-3”).click(function () {</p>
<p>$(“#dialog-3”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-3" title="Dialog Title goes here...">This my first jQuery UI Dialog!div></p>
<p><button id="opener-3">Open Dialogbutton></p>
<p>body></p>
<p>html></p>
<p>استفاده از گزینه ی کیفیتی (modal):</p>
<p>مثال زیر استفاده از گزینه های buttons,title و position را در دیالوگ ویجت JqueryUI توضیح می دهد.</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-4”).dialog({</p>
<p>autoOpen: false,</p>
<p>modal: true,</p>
<p>buttons: {</p>
<p>OK: function () { $(this).dialog(“close”); }</p>
<p>},</p>
<p>});</p>
<p>$(“#opener-4”).click(function () {</p>
<p>$(“#dialog-4”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-4" title="Dialog Title goes here...">This my first jQuery UI Dialog!div></p>
<p><button id="opener-4">Open Dialogbutton></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
<p>ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
<p>laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>p></p>
<p><label for="textbox">Enter Name: label></p>
<p>body></p>
<p>html></p>
<p>متد $(selector, context).dialog (“action”, [params]) :</p>
<p>متد dialog (action, params) می تواند اکشنی را روی دیالوگ باکس اجرا کند، مانند بستن دیالوگ باکس. action به عنوان یک رشته در اولین آرگیومنت تعیین می شود و به طور انتخابی، یک یا چند params، بر اساس اکشن داده شده، ارائه می شوند.</p>
<p>اساسا در اینجا اکشن ها متدهای jQuery هستند که می توانیم به فرم رشته مورد استفاده قرار دهیم.</p>
<p>$(selector, context).dialog (“action”, [params]);</p>
<p>جدول زیر اکشن هایی را ارائه می دهد که با این متد مورد استفاده قرار می گیرند:\\</p>
<p>Action</p>
<p>Description</p>
<p>close()</p>
<p>این اکشن دیالوگ باکس را می بندد. این متد هیچ برهانی را نمی پذیرد.</p>
<p>destroy()</p>
<p>این اکشن دیالوگ باکس را کاملا حذف می کند و عنصر را به حالت pre-init خود بازمی گرداند. این متد هیچ برهانی را نمی پذیرد.</p>
<p>isOpen()</p>
<p>اگر دیالوگ باکس باز باشد، این اکشن چک می شود. این متد هیچ برهانی را نمی پذیرد.</p>
<p>moveToTop()</p>
<p>این اکشن دیالوگ باکس های هماهنگ را پیش زمینه قرار می دهد. این متد هیچ برهانی را نمی پذیرد.</p>
<p>open()</p>
<p>این اکشن دیالوگ باکس را باز می کند. این متد هیچ برهانی را نمی پذیرد.</p>
<p>option( optionName )</p>
<p>این اکشن مقدار مرتبط با optionName تعیین شده را دریافت می کند. در اینجا optionName نام گزینه ای برای دریافت می باشد.</p>
<p>option()</p>
<p>این اکشن یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های hash مربوط به دیالوگ را نمایش می دهد. این متد هیچ برهانی نمی پذیرد.</p>
<p>option( optionName, value )</p>
<p>این گزینه مقدار گزینه ی دیالوگ را در ارتباط با optionName تنظیم شده، تعیین شده، تنظیم می کند.</p>
<p>option( options )</p>
<p>این اکشن یک یا چند گزینه را برای دیالوگ تنظیم می کند.</p>
<p>widget()</p>
<p>This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.</p>
<p> isOpen(), open() و close() را توضیح می دهد:</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#toggle”).click(function () {</p>
<p>($(“#dialog-5”).dialog(“isOpen”) == false) ? $(“#dialog-5”).dialog(“open”) : $(“#dialog-5”).dialog(“close”);</p>
<p>});</p>
<p>$(“#dialog-5”).dialog({ autoOpen: false });</p>
<p>});</p>
<p>script></p>
<p>head></p>
<p><button id="toggle">Toggle dialog!button></p>
<div id="dialog-5" title="Dialog Title!">
<p>Click on the Toggle button to open and cose this dialog box.</p>
<p>div></p>
<p>body></p>
<p>html></p>
<p>روی دکمه ی Toggle کلیک کرده و این دیالوگ باکس را ببندید.</p>
<p>مدیریت رویداد روی دیالوگ باکس:</p>
<p>علاوه بر متد dialog (options) که در بخش های قبل مشاهده کردیم، JqueryUI متدهای رویداد ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر ارائه شده اند:</p>
<p>Event Method</p>
<p>Description</p>
<p>beforeClose(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که دیالوگ باکس در آستانه ی بسته شدن است. بازگرداندن false از بسته شدن دیالوگ باکس جلوگیری می کند. این رویداد در دسترس دیالوگ باکس هایی است که در ارزیابی موفق نیستند. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>close(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که دیالوگ باکس بسته شده است. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>create(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که دیالوگ باکس ایجاد می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>drag(event, ui)</p>
<p>این رویداد به طور مکرر، در هنگام جابه جایی دیالوگ باکس در هنگام درگ کردن، آغاز می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>dragStart(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که یک پاسخ از دیالوگ باکس به وسیله ی درگ کردن عنوان آن، ارائه می شود. commences</p>
<p>dragStop(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که یک عملیات درگ به پایان می رسد. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>focus(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که دیالوگ تمرکز را به دست می آورد. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>open(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که دیالوگ باکس باز شده است. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>resize(event, ui)</p>
<p>این رویداد در هنگام تغییر اندازه ی یک دیالوگ باکس، به طور مکرر آغاز می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>resizeStart(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که تغییر اندازه ی دیالوگ باکس شروع شود. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>resizeStop(event, ui)</p>
<p>این رویداد زمانی آغاز می شود که تغییر اندازه ی دیالوگ باکس به پایان برسد. در اینجا رویداد از نوع Event و ui از نوع Object است.</p>
<p>مثال زیر استفاده از رویدادهای لیست شده در جدول بالا را توضیح می دهد.</p>
<p>استفاده از متد رویداد beforeClose :</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>.invalid {</p>
<p>color: red;</p>
<p>}</p>
<p>textarea {</p>
<p>display: inline-block;</p>
<p>width: 100%;</p>
<p>margin-bottom: 10px;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-6”).dialog({</p>
<p>autoOpen: false,</p>
<p>buttons: {</p>
<p>OK: function () {</p>
<p>$(this).dialog(“close”);</p>
<p>}</p>
<p>},</p>
<p>beforeClose: function (event, ui) {</p>
<p>if (!$(“#terms”).prop(“checked”)) {</p>
<p>event.preventDefault();</p>
<p>$(“[for=terms]”).addClass(“invalid”);</p>
<p>}</p>
<p>},</p>
<p>width: 600</p>
<p>});</p>
<p>$(“#opener-5”).click(function () {</p>
<p>$(“#dialog-6”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-6">
<p>You must accept these terms before continuing.p></p>
<p><textarea></p>
<p>This Agreement and the Request constitute the entire agreement of the</p>
<p>parties with respect to the subject matter of the Request. This Agreement shall be</p>
<p>governed by and construed in accordance with the laws of the State, without giving</p>
<p>effect to principles of conflicts of law.</p>
<p>textarea></p>
<div>
<p><label for="terms">I accept the termslabel></p>
<p>div></p>
<p>div></p>
<p><button id="opener-5">Open Dialogbutton></p>
<p>body></p>
<p>html></p>
<p>استفاده از متد resize :</p>
<p>مثال زیر استفاده از متد resize را توضیح می دهد:</p>
<p><title>jQuery UI Dialog functionalitytitle></p>
<p>script></p>
<p>script></p>
<p>.ui-widget-header, .ui-state-default, ui-button {</p>
<p>background: #b9cd6d;</p>
<p>border: 1px solid #b9cd6d;</p>
<p>color: #FFFFFF;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>style></p>
<p>$(function () {</p>
<p>$(“#dialog-7”).dialog({</p>
<p>autoOpen: false,</p>
<p>resize: function (event, ui) {</p>
<p>$(this).dialog(“option”, “title”,</p>
<p>ui.size.height + ” x ” + ui.size.width);</p>
<p>}</p>
<p>});</p>
<p>$(“#opener-6”).click(function () {</p>
<p>$(“#dialog-7”).dialog(“open”);</p>
<p>});</p>
<p>});</p>
<p>script></p>
<p>head></p>
<div id="dialog-7" title="Dialog Title goes here...">Resize this dialog to see the dialog co-ordinates in the title!div></p>
<p><button id="opener-6">Open Dialogbutton></p>
<p>body></p>
<p>html></p>
<p>این دیالوگ را تغییر اندازه دهید تا هماهنگی را در عنوان مشاهده کنید.</p>
<p>نکات گسترش:</p>
<p>دیالوگ ویجت با widget factory ساخته شده و می تواند گسترده شود. برای گسترش ویجت ها، می توانیم متدهای موجود را نادیده گرفته یا آنها را اضافه کنیم. جدول زیر یک نکته ی گسترش (extension point ) با همان API ارائه می دهد، همانطور که متدهای دیالوگ در جدول بالا رائه شدند.</p>
<p>Method</p>
<p>Description</p>
<p>_allowInteraction(event)</p>
<p>این متد به یوزر اجازه می دهد تا با whitelisting عناصر که زیرمجموعه ی دیالوگ نیستند، اما یوزر می تواند از آنها استفاده کند، با یک عنصر هدف تعامل داشته باشد. در اینجا رویداد Event می باشد.</p>
<p>jQuery UI Widget Factory یک مورد توسعه پذیر است که بر اساس آن همه ی ویجت های jQuery UI ساخته می شوند. استفاده از widget factory برای ساخت یک پلاگین تسهیلاتی را ارائه می دهد و همچنین کنوانسیون هایی برای کارهای معمول مانند آشکارسازی روش پلاگین و تغییر گزینه های بعد از نمونه.</p>
<div class="clear"></div>
</div>
<div class="post-tags">
<a href="http://help.regiran.com/tag/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-dialog-box-%d8%af%d8%b1-jquery-ui/" rel="tag">آموزش Dialog box در Jquery UI</a> </div>
</div>
<div class="post-box-wrapper first">
<div class="post-box">
<h5>درباره نویسنده</h5>
<img alt='' src='http://0.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=75&d=mm&r=g' srcset='http://0.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=150&d=mm&r=g 2x' class='avatar avatar-75 photo' height='75' width='75' /> <p></p>
</div>
</div>
<div id="comments" class="post-box-wrapper">
<div class="post-box">
<!-- You can start editing here. -->
<!-- If comments are open, but there are no comments. -->
<div id="respond">
<h5>ارسال دیدگاه</h5>
<p class="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-dialog-box-%d8%af%d8%b1-jquery-ui/#respond" style="display:none;">برای صرفنظر کردن از پاسخگویی اینجا را کلیک کنید.</a></p>
<p>شما باید <a href="http://help.regiran.com/wp-login.php?redirect_to=http%3A%2F%2Fhelp.regiran.com%2F%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-dialog-box-%25d8%25af%25d8%25b1-jquery-ui%2F">وارد شوید</a> تا دیدگاهی ارسال کنید.</p>
</div>
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="widget"><h4>دسته ها</h4><label class="screen-reader-text" for="cat">دسته ها</label><select name='cat' id='cat' class='postform' >
<option value='-1'>گزینش دسته</option>
<option class="level-0" value="50">CCNA (188)</option>
<option class="level-0" value="5">cPanel (149)</option>
<option class="level-0" value="6">DirectAdmin (48)</option>
<option class="level-0" value="7">Enkompass (17)</option>
<option class="level-0" value="19">Froxler (8)</option>
<option class="level-0" value="20">H-Sphere (3)</option>
<option class="level-0" value="8">Helm (44)</option>
<option class="level-0" value="22">kloxo (22)</option>
<option class="level-0" value="52">Linux (47)</option>
<option class="level-0" value="51">MCSE (82)</option>
<option class="level-0" value="49">Network + (197)</option>
<option class="level-0" value="9">Pleask (51)</option>
<option class="level-0" value="21">Webmin (13)</option>
<option class="level-0" value="18">WebsitePanel (15)</option>
<option class="level-0" value="55">آموزش ++C (150)</option>
<option class="level-0" value="32">آموزش Ajax (174)</option>
<option class="level-0" value="30">آموزش ASP (283)</option>
<option class="level-0" value="56">آموزش C (163)</option>
<option class="level-0" value="36">آموزش CSS (244)</option>
<option class="level-0" value="62">آموزش CSS3 (105)</option>
<option class="level-0" value="35">آموزش HTML (462)</option>
<option class="level-0" value="66">آموزش HTML 5 (205)</option>
<option class="level-0" value="61">آموزش Java Script (564)</option>
<option class="level-0" value="54">آموزش jQuery (313)</option>
<option class="level-0" value="31">آموزش PHP (342)</option>
<option class="level-0" value="67">آموزش Python (103)</option>
<option class="level-0" value="63">آموزش RSS (43)</option>
<option class="level-0" value="64">آموزش WSDL (22)</option>
<option class="level-0" value="60">آموزش XML (175)</option>
<option class="level-0" value="7119">آموزش بوت استراپ (37)</option>
<option class="level-0" value="59">آموزش پایگاه داده MYSQL (41)</option>
<option class="level-0" value="57">آموزش پایگاه داده SQL (138)</option>
<option class="level-0" value="65">آموزش پروتکل SOAP (31)</option>
<option class="level-0" value="69">آموزش جوملا (314)</option>
<option class="level-0" value="58">آموزش زبان اسمبلی (162)</option>
<option class="level-0" value="53">آموزش سی شارپ #C (83)</option>
<option class="level-0" value="8606">آموزش وردپرس (714)</option>
<option class="level-0" value="7286">امنیت شبکه (108)</option>
<option class="level-0" value="29">برنامه نویسی (242)</option>
<option class="level-0" value="17">بهینه سازی SEO (813)</option>
<option class="level-0" value="24">پنل مدیریت DirectAdmin (60)</option>
<option class="level-0" value="28">ریسلری DirectAdmin (8)</option>
<option class="level-0" value="33">ریسلری HELM (15)</option>
<option class="level-0" value="10">ریسلری WHM (50)</option>
<option class="level-0" value="27">سرور cPanel (135)</option>
<option class="level-0" value="25">سرور DirectAdmin (68)</option>
<option class="level-0" value="15">سرور لینوکس (322)</option>
<option class="level-0" value="16">سرور ویندوز (58)</option>
<option class="level-0" value="68">سیستمهای مدیریت محتوا (603)</option>
<option class="level-0" value="48">شبکه (1,151)</option>
<option class="level-0" value="3">طراحی وب (2,244)</option>
<option class="level-0" value="1">عمومی (3,205)</option>
<option class="level-0" value="4">کنترل پنلها (163)</option>
<option class="level-0" value="14">مدیریت سرور (148)</option>
<option class="level-0" value="23">میزبانی وب (645)</option>
<option class="level-0" value="26">میکروتیک (38)</option>
<option class="level-0" value="34">وب و اینترنت (1,663)</option>
</select>
<script type='text/javascript'>
/* <![CDATA[ */
(function() {
var dropdown = document.getElementById( "cat" );
function onCatChange() {
if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
location.href = "http://help.regiran.com/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
}
}
dropdown.onchange = onCatChange;
})();
/* ]]> */
</script>
</div><div class="widget"><h4>جستجو</h4><form method="get" id="searchform" action="http://help.regiran.com/">
<input type="text" class="search-field" name="s" id="s">
<input type="submit" value="جستجو" class="search-button">
</form></div>
<div id="secondary-sidebar-wrap" class="span-4 last">
<div class="sidebar-secondary">
<ul class="widget-wrap">
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" target="_blank"><font color="#1122CC"><b>سايت ساز صفحه نگار</b></font>
<br />
<font size="2">
بدون نياز به دانش فني
وب سايت بزرگي
بسازيد و مديريت کنيد
</font>
<font color="#009933">
<b><br />
از 200000 تومان
</b></font>
</a>
</li></ul>
<li class="social-connect-widget">
<a href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-linux/" target="_blank"><font color="#1122CC"><b>هاست لينوکس</b></font>
<br />
<font size="2">
هاست لينوکس دوگانه
استفاده همزمان سايت
از 2 ديتا سنتر
</font>
<font color="#009933">
<b><br />
از 60000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%87%d8%a7%d8%b3%d8%aa-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-windows/" target="_blank"><font color="#1122CC"><b>هاست ويندوز ابري</b></font>
<br />
<font size="2">
قرار گرفتن سايت شما
بر روي سرورهاي جداگانه
قطعي را به صفر ميرساند
</font>
<font color="#009933">
<b><br />
از 120000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa%d8%a8%d9%87-%d8%af%d8%b1-%da%af%d9%88%da%af%d9%84/" target="_blank"><font color="#1122CC"><b>افزيش رتبه در گوگل</b></font>
<br />
<font size="2">
به شما کمک ميکنيم
تا بالاتر از
رقيبان خود باشيد
</font>
<font color="#009933">
<b><br />
از 500000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" target="_blank"><font color="#1122CC"><b>طراحي وب سايت</b></font>
<br />
<font size="2">
بهترين و مدرنترين
طراحي وب سايت
با 15 سال سابقه
</font>
<font color="#009933">
<b><br />
از 200000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" target="_blank"><font color="#1122CC"><b>هاست اختصاصي</b></font>
<br />
<font size="2">
منابع سخت افزاري بيشتر براي سايتهاي پربازديد، شرکتهاي بزرگ،سازمانها و...
</font>
<font color="#009933">
<b><br />
از 150000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" target="_blank"><font color="#1122CC"><b>ثبت دامنه</b></font>
<br />
<font size="2">
ثبت آنلاين و تحويل آني انواع پسوندها به نام شما و با قابليت مديريت کامل
</font>
<font color="#009933">
<b><br />
از 5000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c/" target="_blank"><font color="#1122CC"><b>سرور اختصاصي</b></font>
<br />
<font size="2">
سرورهاي با کيفيت
با مديريت کامل و
UpTime 99.9%
</font>
<font color="#009933">
<b><br />
ليست قيمت ها
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" target="_blank"><font color="#1122CC"><b>ريسلري هاستينگ</b></font>
<br />
<font size="2">
به صورت اختصاصي
براي مشتريان خود
سايت ايجاد کنيد
</font>
<font color="#009933">
<b><br />
از 145000 تومان
</b></font>
</a>
</li></ul>
<ul class="widget-wrap"><li class="social-connect-widget">
<a href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-linux/" target="_blank"><font color="#1122CC"><b>ميزباني وب (هاست)</b></font>
<br />
<font size="2">
فضاي وب براي
ايجاد سايت شما
</font>
<font color="#009933">
<b><br />
از 60000 تومان
</b></font>
</a>
</li></ul>
</div><!-- .sidebar-secondary -->
</div><!-- #secondary-sidebar-wrap -->
</div>
</div>
<div class="clear"></div>
<div id="footer-wrapper">
<div id="footer">
<div class="sitemap-container clearfix">
<ul class="sitemap clearfix"><li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">رجیران</h4><ul><li><a title="" class="core_button_normal" href="http://members.regiran.com/clientarea.php" id="button-ct-sitemap-domains-domregistration" target="_blank">
پورتال کاربران
</a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displayarticle&id=150" id="button-ct-sitemap-domains-domtransfer" target="_blank">
راهنمای پورتال</a></li><li>
<a title="" class="core_button_normal" href="http://members.regiran.com/cart.php" id="button-ct-sitemap-domains-domapps0" target="_blank">
سفارش آنلاین
</a></li><li><a title="" class="core_button_normal" href="http://help.regiran.com" id="button-ct-sitemap-domains-domapps" target="_blank">
آموزش وب رجیران
</a></li><li>
<a title="" class="core_button_normal" href="http://regiran.com/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D9%88-%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7/" id="button-ct-sitemap-domains-domapps1" target="_blank">
قوانین و توافقنامه
</a></li></ul></li>
<li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">نمايندگی</h4><ul><li><a title="for business users" class="" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-mywebsite-business" target="_blank">
نمایندگی ثبت دامنه
</a></li><li><a title="for individual users" class="" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-mywebsite-personal" target="_blank">
نمايندگی هاست رجیران
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-hosting-sitedesign" target="_blank">
نمايندگی اعتباری
</a></li>
</ul></li>
<li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;"> سرورها</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c/" id="button-ct-sitemap-hosting-linuxhosting" target="_blank">
سرورهای اختصاصی
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank">
سرور مجازی لينوکس
</a></li>
<li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank">
سرور مجازی ويندوز
</a></li>
</ul></li>
<li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">طراحی سایت</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-instantmail" target="_blank">
سايت ساز صفحه نگار
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/" id="button-ct-sitemap-mail-mailxchange" target="_blank">
فروشگاه ساز صفحه نگار
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d9%88%d9%86%d9%87-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-msexchange" target="_blank">
نمونه کارها
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa%d8%a8%d9%87-%d8%af%d8%b1-%da%af%d9%88%da%af%d9%84/" id="button-ct-sitemap-mail-smartphoneapps" target="_blank">
افزایش رتبه در گوگل
</a></li>
<li><a title="" class="core_button_normal" href="http://www.regiran.com/Safhe_Negar.zip" id="button-ct-sitemap-mail-smartphoneapps" target="_blank">
دريافت کاتالوگ قبل از خريد
</a></li>
</ul></li>
<li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">هاست</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-linux/" id="button-ct-sitemap-server-dedicated" target="_blank">
هاست لينوکس
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%87%d8%a7%d8%b3%d8%aa-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-windows/" id="button-ct-sitemap-server-virtual" target="_blank">
هاست ويندوز 2008
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-server-dcs" target="_blank">
هاست اختصاصي
</a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=5" id="button-ct-sitemap-server-smartphoneapps" target="_blank">
سوالات متداول
</a></li></ul></li>
<li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">ثبت دامنه</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-sharepoint" target="_blank">
تعرفه دامنه
</a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/cart.php?a=add&domain=register" id="button-ct-sitemap-ecommerce-eshops" target="_blank">
سفارش آنلاین دامنه
</a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%86%d8%a7%d9%85-%d8%af%d8%a7%d9%85%db%8c%d9%86-domain-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-listlocal" target="_blank">
نکاتی درباره انتخاب دامنه
</a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=3" id="button-ct-sitemap-ecommerce-sem" target="_blank">
سوالات متداول
</a></li>
<li><a title="" class="core_button_normal" href="http://members.regiran.com/domainchecker.php" id="button-ct-sitemap-ecommerce-sem" target="_blank">
جستجوگر دامنه
</a></li>
</ul></li></ul>
</div>
</div>
</div>
<div id="bottom-wrapper">
<div id="bottom">
<span class="totop"><a href="#">Back to Top</a></span>
<span class="left"><p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:44px;height:16px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:44px;height:16px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</span>
<span class="right"><div align="center"><font size="1" face="tahoma" color="#fff">
رجيران ® علامت تجاري ثبت شده است و هرگونه کپي برداري و ايجاد تشابه پيگرد قانوني دارد. 1391-1380©
</font></div>
<div align="center"><font size="1" face="tahoma" color="#fff">
Copyright © 2001 - 2012 REGIRAN ® All rights reserved. Portal System Powered by <a href="http://regiran.com"><font size="1px" face="tahoma" color="#fff">Safhe Negar ® v2.1 </a>
</font></div>
</div></span>
</div>
</div>
<script type='text/javascript' src='http://help.regiran.com/wp-includes/js/wp-embed.min.js?ver=4.7.29'></script>
</body>
</html> 