Добавление вкладки JQuery

Ну я новичок в JQuery, и я собирался через видео настоящего Боб Tabor в http://www.learnvisualstudio.net/free/javascript-and-jquery-training/ описывает, как установить и использовать JQuery плагин ..Добавление вкладки JQuery

В том, что он учит о закладке и добавление вкладки через исходный код присутствует в jqueryui.com .. Но исходный код JQuery не работает ..

JSfiddle добавил:

http://jsfiddle.net/shettyrahul8june/mf5dm/

эти два Jquery коды я застрял с .. $ ("#tabs") .tabs(). Tabs ("add", "1. Название changed.html»,„Click-а-Rahul“);

$("<li><a href='10.jQuery events.html'>Click-a-Rahul</a></li>").appendTo("#tabs ul"); 
$("#tabs").tabs().tabs("refresh");

Как вы можете видеть, я пытался как с устаревшим методом добавления, а также новички обновления .. И din't работа .. добавлена новая закладка и моделирование было идеальным .. Но не было никакого содержания в новой вкладке, хотя ссылка была предоставлена ..

Любая помощь будет оценена ..

Также я обнаружил, что, когда я использую надстройку метод, он работает для идентификатора, такого как # tabs-3, но он не работает для ссылок ...

Я получил это ошибка в консоли javascript.

Не удалось загрузить ресурс: заголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе. Поэтому исходный 'null' не допускается. file: /// E: /My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html

XMLHttpRequest не может загрузить файл: /// E: /My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html.

Нет заголовка «Access-Control-Allow-Origin» на запрашиваемом ресурсе. Поэтому исходный 'null' не допускается. 11.Installing% 20and% 20Utilising% 20jQuery% 20plugins.html: 1

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_diagonals-thick_15_0b3e6f_40x40.png

Не удалось загрузить ресурс: сервер ответил статус 404 (Not Found) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_20_333333_2x2.png

не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_flat_40_292929_40x100.png

не удалось загрузить ресурс: сервер ответил со статусом 404 (не Найдено) http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_40_00498f_2x2.png

проблема решена .. Это было связанно с запросом Междоменного .. Также я не использовал локальный сервер, чтобы проверить мою страницу .. Я использовал WAMP и он работал .. Рабочий код присутствует в http://jsfiddle.net/shettyrahul8june/mf5dm/

источник

2014-01-09 rash.tay

Попробуйте найти ошибку в вас r браузера. –

Не удалось загрузить ресурс: заголовок «Access-Control-Allow-Origin» отсутствует на запрошенном ресурсе. Поэтому исходный 'null' не допускается. file: /// E: /My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.htm –

что браузер вы используете? –

 use the below code and customize as your need , please give localfile url , while working in localhost, live site url not supported , i had mentioned info.php in href ,change it to filename   
     <!DOCTYPE html> 
     <html lang="en"> 
      <head> 
     <meta charset="UTF-8" /> 
     <title>Function</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/jquery-ui.css" /> 
     </head> 
      <body> 
     <h1 id="title">Installing and Utilising the plugins</h1> 
     <div class="demo"> 
       <div id="tabs"> 
      <ul> 
        <li><a href="#tabs-1">Nunc tincidunt</a></li> 
        <li><a href="#tabs-2">Proin dolor</a></li> 
        <li><a href="#tabs-3">Aenean lacinia</a></li> 
       </ul> 
      <div id="tabs-1"> 
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. 
        Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum 
        quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus 
        lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna 
        quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor 
        vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris 
        vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. 
        Phasellus ipsum. Nunc tristique tempus lectus.</p> 
       </div> 
      <div id="tabs-2"> 
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida 
        ante, ut pharetra massa metus id nunc. Duis scelerisque molestie 
        turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie 
        lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. 
        Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros 
        vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare 
        consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam 
        erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque 
        pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel 
        felis. Mauris consectetur tortor et purus.</p> 
       </div> 
      <div id="tabs-3"> 
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. 
        Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, 
        eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent 
        taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
        himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. 
        Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem 
        enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper 
        at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo 
        vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. 
        Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, 
        id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero 
        sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat 
        porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu 
        tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. 
        Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
       </div> 
      </div> 
      </div> 
     <p><a href="http://asp.net/ajaxlibrary/CDNjQueryUI1817.ashx">Check out the themes 
      on this page</a></p> 
     </body> 
      </html> 
     <script type="text/javascript"> 
      $("#tabs").tabs(); 
      $("<li><a href='info.php'>Click-a-Rahul</a></li>").appendTo("#tabs ul"); 
     $("#tabs").tabs().tabs("refresh"); 
      </script>

источник

2014-01-09 05:57:37

Не работает .. Извините .. –

Я попробовал и работает для меня без каких-либо проблем. пожалуйста, проверьте его http://jsfiddle.net/mf5dm/1/ –

эй ваш код работает .. Но его ссылка .. Я пробовал использовать другую ссылку .. Не работал .. Также не работает для локального файла на моем ПК .. –

код на jqueryui.com РАБОТАЕТ. Вот скрипка создана с использованием их точный код: http://jsfiddle.net/svZrC/

Используйте этот код, либо открыть консоль, найти ошибки и сказать нам, что ошибки.

Это просто JavaScript из скрипки см скрипки для всего остального ...

$(function() { 
var tabTitle = $("#tab_title"), 
    tabContent = $("#tab_content"), 
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
    tabCounter = 2; 

var tabs = $("#tabs").tabs(); 

// modal dialog init: custom buttons and a "close" callback reseting the form inside 
var dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Add: function() { 
      addTab(); 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     form[ 0 ].reset(); 
    } 
}); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function(event) { 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() { 
    var label = tabTitle.val() || "Tab " + tabCounter, 
     id = "tabs-" + tabCounter, 
     li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
     tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; 

    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

// addTab button: just opens the dialog 
$("#add_tab") 
.button() 
.click(function() { 
    dialog.dialog("open"); 
}); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() { 
    var panelId = $(this).closest("li").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
}); 

tabs.bind("keyup", function(event) { 
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
     var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
     $("#" + panelId).remove(); 
     tabs.tabs("refresh"); 
    } 
});

});

источник

2014-01-09 05:46:31 gfrobenius

Это кнопка с кнопкой. Также как бы добавить локальный файл, например ссылку на другой файл html, используя это? –

Эта кнопка не использует кнопку, она фактически использует ваш код, и она добавляет вкладку: http://jsfiddle.net/aQLNN/ Не уверен, что я понимаю ваш вопрос. Вы просто спрашиваете, как установить контент, например ссылки, в области вкладок? – gfrobenius

Да, это то, что я сказал .. Я могу добавить вкладку. Но я не могу заполнить свое содержимое на этой вкладке. Только если я использую идентификатор с одной и той же страницы html, тогда содержимое видно. Например, если я напечатаю $ ("#tabs") .tabs(). tabs ("add", "# tabs-3", "Click-a-Rahul"); <- содержимое видно ..... else, если я использую $ ("#tabs") .tabs(). tabs ("add", "1. Title changed.html", "Click-a-Rahul") ; <- как это, содержимое не visibe –

Поскольку вы не указали страницу jsfiddle, я не могу точно сказать, что происходит. Но я могу дать вам код, который работал для меня.

HTML Часть

<ol id="toc"> 
     <li><a href="#page-1"><span>Customer Details</span></a></li> 
     <li><a href="#page-2"><span>Script</span></a></li> 
    </ol> 


    <div class="content" id="page-1" > 
     <p>Put page1 contents here.</p> 
    </div> 

    <div class="content" id="page-2"> 
     <p>Put page 2 contents here</p> 
    </div> 
    <script src="{{STATIC_URL}}js/activatables.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    activatables('page', ['page-1', 'page-2']); 
    </script>

и включить этот яваскрипт файл в HTML-странице

activatables.js

https://www.assembla.com/code/irt/subversion/nodes/js/activatables.js?rev=2

get the activatable.js file from here

источник

2014-01-09 05:52:47 JTN

Добавил JSfiddle .. и моя проблема в том, что я могу получить новую вкладку с помощью метода добавления jQuery но я не могу получить содержимое в этом файле –

Вы делаете запрос ajax o другого сервера, чтобы получить содержимое? Потому что я вижу, что ошибка Access-Control-Allow-Origin отсутствует. Чтобы предотвратить эту ошибку, вам нужно просмотреть запросы кросс-домена. – JTN

Совместное использование ресурсов (CORS) - это механизм, позволяющий JavaScript на веб-странице создавать XMLHttpRequests в другом домене, а не в домене, из которого возник JavaScript. Такие «междоменные» запросы в противном случае были бы запрещены веб-браузерами в соответствии с политикой безопасности того же источника. CORS определяет способ, с помощью которого браузер и сервер могут взаимодействовать, чтобы определить, разрешать или нет запрос на перекрестный поиск. – JTN

Добавление вкладки JQuery

ответ

Смежные вопросы