• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
سفارشی کردن کد تب باکس اجاکس با کوئری
#1
Question 
سلام
یه تب باکس اجاکسی پیدا کردم که از نظر طراحی حرف نداره
سورس ‍‍‍‍‍‍| دمو آنلاین
اومدم این تب باکس رو در قسمت برگه های وردپرس تعریفش کردم تا اینجای کار هیچ مشکلی نیست
فقط دوتا مسئله بغرنج این وسط کلافه ام کرده!
۱ - وقتی در قسمت برگه ها استایل سفارشی از این تب باکس را انتخاب می کنم محتویات برگه در هنگام باز کردن آدرس مقصد غیر قابل نمایش شده و فقط دموی افزونه را نمایش میدند ،‌ یعنی اگه بخوام مطالب را در باکس مربوطه نمایش بدم باید از طریق پنل هاست برم به آدرس صفحات HTML تعریف شده!
مقصودم اینه که دست بندی ها را از طریق خود برگه اعمال کنم

محتویات فایل script.js
کد پی‌اچ‌پی:
$(document).ready(function(){
    
/* This code is executed after the DOM has been completely loaded */
    
    /* Defining an array with the tab text and AJAX pages: */
    
var Tabs = {
        
'Tab one'    'http://www.iranphp.org/ajax-post/pages/page1.html',
        
'Tab two'    'http://www.iranphp.org/ajax-post/pages/page2.html',
        
'Tab three'    'http://www.iranphp.org/ajax-post/pages/page3.html',
        
'Tab four'    'http://www.iranphp.org/ajax-post/pages/page4.html'
    
}
    
    
/* The available colors for the tabs: */
    
var colors = ['blue','green','red','orange'];
    
    
/* The colors of the line above the tab when it is active: */
    
var topLineColor = {
        
blue:'lightblue',
        
green:'lightgreen',
        
red:'red',
        
orange:'orange'
    
}
    
    
/* Looping through the Tabs object: */
    
var z=0;
    $.
each(Tabs,function(i,j){
        
/* Sequentially creating the tabs and assigning a color from the array: */
        
var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
        
        
/* Setting the page data for each hyperlink: */
        
tmp.find('a').data('page',j);
        
        
/* Adding the tab to the UL container: */
        
$('ul.tabContainer').append(tmp);
    })

    
/* Caching the tabs into a variable for better performance: */
    
var the_tabs = $('.tab');
    
    
the_tabs.click(function(e){
        
/* "this" points to the clicked tab hyperlink: */
        
var element = $(this);
        
        
/* If it is currently active, return false and exit: */
        
if(element.find('#overLine').length) return false;
        
        
/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
        
var bg element.attr('class').replace('tab ','');

        
/* Removing the line: */
        
$('#overLine').remove();
        
        
/* Creating a new line with jQuery 1.4 by passing a second parameter: */
        
$('<div>',{
            
id:'overLine',
            
css:{
                
display:'none',
                
width:element.outerWidth()-2,
                
background:topLineColor[bg] || 'white'
            
}}).appendTo(element).fadeIn('slow');
        
        
/* Checking whether the AJAX fetched page has been cached: */
        
        
if(!element.data('cache'))
        {    
            
/* If no cache is present, show the gif preloader and run an AJAX request: */
            
$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

            $.
get(element.data('page'),function(msg){
                $(
'#contentHolder').html(msg);
                
                
/* After page was received, add it to the cache for the current hyperlink: */
                
element.data('cache',msg);
            });
        }
        else $(
'#contentHolder').html(element.data('cache'));
        
        
e.preventDefault();
    })
    
    
/* Emulating a click on the first tab so that the content area is not empty: */
    
the_tabs.eq(0).click();
}); 


۲ - با انتخاب استایل این تب بار از قسمت قالب برگه ها و زدن پیش نمایش تمام متحویات برگه می شود دموی پیش فرض ! یعنی هدر و فوتر و نوار کناری را نشان نمی دهد

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

کد پی‌اچ‌پی:
<?php
/*Template Name:Ajax Tab*/
?>
<?php get_header
(); ?>
<?php get_sidebar
(); ?>
<?php get_footer
(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sweet AJAX Tabs With jQuery 1.4 &amp; CSS3 | Tutorialzine demo</title>

<link rel="stylesheet" type="text/css" href="http://www.iranphp.org/ajax-post/styles.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.iranphp.org/ajax-post/script.js"></script>

</head>

<body>

<h1>Sweet AJAX Tabs With jQuery 1.4 &amp; CSS3</h1>
<h2>View the <a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/">original tutorial &raquo;</a></h2>

<div id="main">

<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">
    <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
    </div>
</div>

</div>
</body>
</html> 
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان