رفتن به مطلب

نحوه استفاده از کد جاوا در پست


پست های پیشنهاد شده

با سلام.

یک مشکلی داشتم می خواستم دوستان یک راهنمایی بکنن

میخواستم ببینم چطور می تونیم کد زیر رو توی پست فراخوانی کنم..این کد یک باکس با چند تب هستش که با استفاده ار دستورات jQuery نوشته شده..می خواستم بدونم آیا میشه این کد رو در پست یا برگه (وردپرس ) فراخوانی کرد...

چطور باید این کار رو انجام داد...با تشکر


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$(".tab").slideUp();
$(".tab:first").slideDown();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab").slideUp();
var activeTab = $(this).attr("rel");
$("#"+activeTab).slideToggle();
});
});
</script>
<style>
ul.tabs {
margin: 0;
padding: 0;
float: right;
list-style: none;
height: 32px;
width: 100%;
font:12px tahoma;
}
ul.tabs li {
float: right;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-right:none;
font-weight: bold;
background: #EEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li:first-child{
border-radius:0 5px 0 0;
-moz-border-radius:0 5px 0 0;
-ms-border-radius:0 5px 0 0;
-webkit-border-radius:0 5px 0 0;
-o-border-radius:0 5px 0 0;
-khtml-border-radius:0 5px 0 0;
border-right:1px solid #999;
}
ul.tabs li:last-child{
border-radius:5px 0 0 0;
-moz-border-radius:5px 0 0 0;
-ms-border-radius:5px 0 0 0;
-webkit-border-radius:5px 0 0 0;
-o-border-radius:5px 0 0 0;
-khtml-border-radius:5px 0 0 0;
}
ul.tabs li.active{
background: #FFF;
border-bottom: 1px solid #FFF;
}
.alltabs {
border: 1px solid #999;
clear: both;
float: right;
width: 100%;
background: #FFF;
border-radius:5px 0 5px 5px;
-moz-border-radius:5px 0 5px 5px;
-ms-border-radius:5px 0 5px 5px;
-webkit-border-radius:5px 0 5px 5px;
-o-border-radius:5px 0 5px 5px;
-khtml-border-radius:5px 0 5px 5px;
}
.tab {
padding: 10px;
font:11px tahoma;
text-align:right;
display: none;
}
</style>

و


<div style="display:none"></div>
<div id="container">
<ul class="tabs">
<li class="active" rel="test11">تب اول</li>
<li rel="test12">تب دوم</li>
<li rel="test13">تب سوم</li>
</ul>
<div class="alltabs">
<div id="test11" class="tab">
متن تب اول
</div>
<div id="test12" class="tab">
متن تب دوم
</div>
<div id="test13" class="tab">
متن تب سوم
</div>
</div>
</div>

با تشکر

لینک به ارسال

بهترین کار ساخت تمپلیت جداگانه در قالب و نسبت دادنش به برگه مورد نظره ولی در حالت کلی این کدها به همین صورت هم اگر وارد ویرایشگر متنی بشوند در مطلب عمل می کنند

نکته: این کدها جاوا اسکریپت هستند که با کدهای جاوا فرق دارند کدهای جاوا شرایطی دیگه برای اجرا دارند

البته این بخش از کدتون رو به فایل style.css قالب اضافه کنید


ul.tabs {
margin: 0;
padding: 0;
float: right;
list-style: none;
height: 32px;
width: 100%;
font:12px tahoma;
}
ul.tabs li {
float: right;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-right:none;
font-weight: bold;
background: #EEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li:first-child{
border-radius:0 5px 0 0;
-moz-border-radius:0 5px 0 0;
-ms-border-radius:0 5px 0 0;
-webkit-border-radius:0 5px 0 0;
-o-border-radius:0 5px 0 0;
-khtml-border-radius:0 5px 0 0;
border-right:1px solid #999;
}
ul.tabs li:last-child{
border-radius:5px 0 0 0;
-moz-border-radius:5px 0 0 0;
-ms-border-radius:5px 0 0 0;
-webkit-border-radius:5px 0 0 0;
-o-border-radius:5px 0 0 0;
-khtml-border-radius:5px 0 0 0;
}
ul.tabs li.active{
background: #FFF;
border-bottom: 1px solid #FFF;
}
.alltabs {
border: 1px solid #999;
clear: both;
float: right;
width: 100%;
background: #FFF;
border-radius:5px 0 5px 5px;
-moz-border-radius:5px 0 5px 5px;
-ms-border-radius:5px 0 5px 5px;
-webkit-border-radius:5px 0 5px 5px;
-o-border-radius:5px 0 5px 5px;
-khtml-border-radius:5px 0 5px 5px;
}
.tab {
padding: 10px;
font:11px tahoma;
text-align:right;
display: none;
}

و مابقی را در پست قرار دهید

لینک به ارسال

با تشکر..آیا کدهایی که می خوام در پست قرار بدم آیا باید در بین تگ هایی خاصی قرار داد منظورم نگ های <head> و < body> هستش..

و کدهای stylee که گفتید آیا مکان خاصی باید قرار بگیره در style.css

ویرایش شده توسط M.A.H.D.Y
لینک به ارسال

کدهای sttyle پله کانی هستند بهتره در انتهای فایل باشند

بهتر است کدهای js را بعد از کدهای html قرار بدید ولی کد اتصال به کتابخانه را در مرحله اول نگذارید خود وردپرس به کتابخانه متصله اگر فایل اجرا نشد کد را قبلی از همه کدهایتان بگذارید

لینک به ارسال

کد استایل رو که گفتید در انتهای کد ها قالب قرار دادم...

اما در مورد اون 2 تا کدی که گفتید و js خوب متوجه منظور شما نشدم که چطور باید کد ها رو قرار بدم توی پست ...آیا امکانش هست طربقه قرار گیری اون 2 کد رو بگید


<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<head>
<script>
$(document).ready(function() {
$(".tab").slideUp();
$(".tab:first").slideDown();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab").slideUp();
var activeTab = $(this).attr("rel");
$("#"+activeTab).slideToggle();
});
});
</script>
</head>
<body>
<!-- this tool by http://moisrex.rozblog.com --->
<div style="display:none"><h2><a href="http://moisrex.rozblog.com">کدستان</a></h2></div><div id="container">
<ul class="tabs">
<li class="active" rel="test11">تب اول</li>
<li rel="test12">تب دوم</li>
<li rel="test13">تب سوم</li>
</ul>
<div class="alltabs">
<div id="test11" class="tab">
متن تب اول
</div>
<div id="test12" class="tab">
متن تب دوم
</div>
<div id="test13" class="tab">
متن تب سوم
</div>
</div>
</div>
<a style="display:none" href="http://moisrex.rozblog.com/">ابزار ساخت کد منو های دارای تب</a>
</body>
</html>

من این طور 2 کد رو توی پست قرار میدم..البته من مبتدی هستم و زیاد در مورد نوع قرار گیری اطلاع کافی ندارم..زمانی که این کدها رو به این شکل در پست قرار میدم

جدول بدون شکل هستش و فقط نوشته ها توی پست نشان داده میشه .. میشه بگید 2 کد رو چطور باید قرار بدم در پست

ویرایش شده توسط M.A.H.D.Y
لینک به ارسال

نمی دونم چرا نشد پست رو ویرایش کنم فقط خواستم بگم که با کمک راهنمایی ها و یک کمی کار کردن روی کدها درست شد

کد styll رو در همون فایل style.css در آخرش کپی کردم

کد اولی رو در قسمت Header سایت بعد از تگ head کپی کردم

در خود پست هم کد دوم رو به اضافه فایل js در بین تگ body قرار دادم ..اینطوری فقط تونیستم این باکس رو بیارم و اجرا کنم...

ممنون از راهنمایی اگر باز مطلبی اضافه ای هست یا روش بهتری راهنمایی کنید ..

---

اگر به باکس تب دار بهتری با امکانات بهتری مد نظرتون هست معرفی کنید هم ممنون میشم...

ویرایش شده توسط M.A.H.D.Y
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...