M.A.H.D.Y

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

6 پست در این موضوع قرار دارد

با سلام.

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

میخواستم ببینم چطور می تونیم کد زیر رو توی پست فراخوانی کنم..این کد یک باکس با چند تب هستش که با استفاده ار دستورات 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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط devil1367
      با سلام
      من یک فروشگاه دارم چون قالب قبلیم نیازهامو نمیتونست برطرف کنه یه قالب جدید از یکی از سایتها خریداری کردم
      سوالم اینه با نصب بسته اسان نصب اطلاعاتی یا محصولات قبلی که داشتم حذف میشن ؟
      چطوری قالب رو شبیه دمو دربیارم و صفحات و برگه ها import کنم.
       
      با تشکر
    • توسط armakcell
      با سلام بنده در سایتم میخواستم یک ابزارک قرار بدم مانند ابزارک این سایت
      http://powerturk.ir

      اگر داخل این سایت برید در یک قسمت نوشته است آرشیو فول البوم
      بنده این ابزارک را چگونه به دست بیارم؟
      بنده یک تصویر ضمیمه میکنم در صورتی که در سایت وارد نشد

    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟
    • توسط amir_hossein
      سلام دوستان من قصد دارم چندتا اسلاید کناره هم به صورت خطی (مثلا 4 تا اسلاید) اواسط صفحه اصلی یا انتهای صفحه قرار بدم.افزونه ای میتونید بهم معرفی کنید برای اینکار؟
    • توسط mosi1672
      سلام 
      من یه سایتی دارم که برای همایش علمی مقالات رو با فرمی که با افزونه گرویتی فرم ساخته شده دریافت میکنم.
      خواستم بدونم آیا راهی وجود داره که امار مقالات دریافتی رو به صورت داینامیک و پویا بتونم با روی سایت اصلی نشون بدم؟ البته با ظاهر زیبا
      مثل این سایت تایپ ایران که امار پروژه ها و کاربرانش رو به صورت نمودار دایره ای نشون میده..
      این ادرس سایت :
      ادرس فرم:http://ihsc.bsbmu.ir/maghaleh/
      ادرس سایت:http://ihsc.bsbmu.ir/

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