|
@{
|
|
ViewBag.Title = "راهنما - خروجی جاوااسکریپت";
|
|
}
|
|
<div class="row rtl">
|
|
<div class="col-md-12">
|
|
<h1 class="page-header">خروجی جاوااسکریپت <small>راهنمای سومین</small></h1>
|
|
<p>
|
|
در این بخش به طور خلاصه به بررسی امکان نمایش فرصت های شغلی موجود در سومین در وب سایت های همکار می پردازیم.
|
|
سومین این امکان را از دو طریق ممکن می سازد.
|
|
</p>
|
|
<ul>
|
|
<li>جاوااسکریپت</li>
|
|
<li>@Html.ActionLink("خوراک rss", "ExportRss")</li>
|
|
</ul>
|
|
<p>
|
|
برای شروع، شما نیاز دارید تا کلاس جاوااسکریپت سومین را در صفحه خود وارد کنید. برای این کار، کد زیر را در سند html خود وارد کنید:
|
|
</p>
|
|
<pre class="ltr">
|
|
<script type="text/javascript" src="http://www.sevom.in/jobs/export/js"></script>
|
|
</pre>
|
|
<p>حال برای نمایش لیست فرصت های شغلی در سند خود، کد زیر را در انتهای سند خود قبل از بسته شدن تگ <code>body</code> وارد نمایید.</p>
|
|
<pre class="ltr">
|
|
<script type="text/javascript">
|
|
(function(){
|
|
var viewer = new sevominJobViewer({ container: '#job-list-container', linkText: 'مشاهده' });
|
|
viewer.show();
|
|
})();
|
|
</script>
|
|
</pre>
|
|
<p>در نهایت باید المان <code>job-list</code> را در محل دلخواه خود تعریف کنید. کد زیر ساده ترین تعریف المان موردنظر است. <em>دقت کنید که مقدار پارامتر container می تواند هر selector معتبر css باشد.</em></p>
|
|
<pre class="ltr">
|
|
<div id="job-list-container"></div>
|
|
</pre>
|
|
<p>برای زیباتر شدن لیست فرصت های شغلی، می توانید استایل های زیر را در صفحه خود اضافه کنید.</p>
|
|
<pre class="ltr">
|
|
ul.sevomin-jobs{
|
|
list-style: none;
|
|
}
|
|
ul.sevomin-jobs li.sevomin-job p{
|
|
direction: rtl;
|
|
}
|
|
</pre>
|
|
<p>
|
|
برای هرچه بیشتر هماهنگ شدن لیست خروجی با صفحه وب سایت خود، می توانید استایل کلاس های زیر را در صفحه خود تعریف نمایید:
|
|
<ul>
|
|
<li><code>sevomin-jobs</code> <em>لیست(ul) شامل فرصت های شغلی</em></li>
|
|
<li><code>sevomin-job</code> <em>هر آیتم(li) موجود در لیست</em></li>
|
|
<li><code>sevomin-job-summary</code> <em>پاراگراف توضیح برای هر فرصت شغلی</em></li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</div>
|