@{
    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">
&lt;script type="text/javascript" src="http://www.sevom.in/jobs/export/js"&gt;&lt;/script&gt;
        </pre>
        <p>حال برای نمایش لیست فرصت های شغلی در سند خود، کد زیر را در انتهای سند خود قبل از بسته شدن تگ <code>body</code> وارد نمایید.</p>
        <pre class="ltr">
&lt;script type="text/javascript"&gt;
    (function(){
        var viewer = new sevominJobViewer({ container: '#job-list-container', linkText: 'مشاهده' });
        viewer.show();
    })();
&lt;/script&gt;
        </pre>
        <p>در نهایت باید المان <code>job-list</code> را در محل دلخواه خود تعریف کنید. کد زیر ساده ترین تعریف المان موردنظر است. <em>دقت کنید که مقدار پارامتر container می تواند هر selector معتبر css باشد.</em></p>
        <pre class="ltr">
&lt;div id="job-list-container"&gt;&lt;/div&gt;
        </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>