jQWidgets Forums

This topic contains 2 replies, has 1 voice, and was last updated by minsu0806 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

I want build jqxTab with Html as already generated Posts
November 20, 2014 at 11:12 am I want build jqxTab with Html as already generated #63074

minsu0806
Participant

this code was jqxTabs sample file(jqxtabs/closebuttons.html)
and I copy & paste rendered html by browser.

under line is a full code
this code raise Invalid structure Error.

can I solve it on maintain status like a structure, under code ?
————————-
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Tabs, Tabs Widget, TabView” />
<meta name=”description” content=”The jqxTabs is breaking the content into multiple sections. You
can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.” />
<title id=’Description’>The jqxTabs can display a close button in each tab. This can
be achieved by setting the ‘showCloseButtons’ property to true. In this demo we
demonstrate how to show close buttons in all tabs and add an additional button next
to the tabs.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var addButton,
addButtonWidth = 29,
index = 0;

// create jqxTabs.
$(‘#jqxTabs’).jqxTabs({ height: 250, width: 500, showCloseButtons: true });
var index = 0;
$(‘#jqxTabs’).on(‘tabclick’, function (event) {
if (event.args.item == $(‘#unorderedList’).find(‘li’).length – 1) {
var length = $(‘#unorderedList’).find(‘li’).length;
$(‘#jqxTabs’).jqxTabs(‘addAt’, event.args.item, ‘Sample title ‘ + index, ‘Sample content number: ‘ + index);
index++;
}
});
});
</script>
</head>
<body class=”default”>
<div id=”jqxWidget”>
<div tabindex=”0″ class=”jqx-tabs jqx-widget jqx-widget-content jqx-rc-all” id=”jqxTabs” role=”tablist” aria-disabled=”false” aria-activedescendant=”” style=”width: 500px; height: 250px; float: left;” hidefocus=”true”>

<div class=”jqx-tabs-headerWrapper jqx-tabs-header jqx-widget-header jqx-rc-t” style=”left: 0px; top: 0px; height: 28px; position: relative;”>
<ul class=”jqx-tabs-title-container” id=”unorderedList” style=”background: none; padding: 0px; border: currentColor; border-image: none; left: 0px; top: 0px; width: 534px; height: 28px; text-indent: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 30px; white-space: nowrap; position: relative;”>
<li class=”jqx-reset jqx-disableselect jqx-tabs-title jqx-item jqx-rc-t” role=”tab” style=”height: 16px; float: left; position: static;”><div class=”jqx-tabs-titleWrapper” style=”height: 100%; position: relative; z-index: 15;”><div class=”jqx-tabs-titleContentWrapper jqx-disableselect” style=”margin-top: 0px; float: left;”>Node.js</div><div class=”jqx-tabs-close-button” style=”width: 16px; height: 16px; font-size: 1px; margin-top: 1px; float: left; display: block;”></div></div>
<li class=”jqx-reset jqx-disableselect jqx-tabs-title jqx-item jqx-rc-t” role=”tab” style=”height: 16px; float: left; position: static;”><div class=”jqx-tabs-titleWrapper” style=”height: 100%; position: relative; z-index: 15;”><div class=”jqx-tabs-titleContentWrapper jqx-disableselect” style=”margin-top: 0px; float: left;”>Active Server Pages</div><div class=”jqx-tabs-close-button jqx-tabs-close-button-hover” style=”width: 16px; height: 16px; font-size: 1px; margin-top: 1px; float: left; display: block;”></div></div>
<li class=”jqx-reset jqx-disableselect jqx-tabs-title jqx-item jqx-rc-t jqx-tabs-title-selected-top jqx-fill-state-pressed” style=”height: 16px; float: left; position: static;”><div class=”jqx-tabs-titleContentWrapper jqx-disableselect” style=”height: 100%; margin-top: 0px; float: left;”>Sample title 0</div><div class=”jqx-tabs-close-button” style=”width: 16px; height: 100%; font-size: 1px; margin-top: 1px; float: left; display: block;”></div><li class=”jqx-reset jqx-disableselect jqx-tabs-title jqx-item jqx-rc-t” role=”tab” style=”height: 16px; float: left; position: static;” hasclosebutton=”false” canselect=”false”><div class=”jqx-tabs-titleWrapper” style=”height: 100%; position: relative; z-index: 15;”><div class=”jqx-tabs-titleContentWrapper jqx-disableselect” style=”margin-top: 0px; float: left;”>Add New Tab</div><div class=”jqx-tabs-close-button” style=”width: 16px; height: 16px; font-size: 1px; margin-top: 1px; float: left; display: none;”></div></div>

<div class=”jqx-tabs-arrow-background jqx-widget-header” style=”top: 0px; width: 16px; height: 100%; right: 16px; display: block; position: absolute; z-index: 30;”><span class=”jqx-tabs-arrow-left” style=”width: 16px; height: 16px; margin-top: 8.5px; display: block;”></span></div><div class=”jqx-tabs-arrow-background jqx-widget-header” style=”top: 0px; width: 16px; height: 100%; right: 0px; display: block; position: absolute; z-index: 30;”><span class=”jqx-tabs-arrow-right” style=”width: 16px; height: 16px; margin-top: 8.5px; display: block;”></span></div>
</div>

<div class=”jqx-tabs-content jqx-widget-content jqx-rc-b” style=”width: 100%; height: 217px; float: none; visibility: visible;”><div class=”jqx-tabs-content-element jqx-rc-b” role=”tabpanel” style=”display: none;”>
Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
is intended for writing scalable network programs such as web servers. It was created
by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
Similar environments written in other programming languages include Twisted for
Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
Unlike most JavaScript, it is not executed in a web browser, but is instead a form
of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
includes a REPL environment for interactive testing.
</div><div class=”jqx-tabs-content-element jqx-rc-b” role=”tabpanel” style=”display: none;”>
ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft’s Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.
</div><div class=”jqx-tabs-content-element jqx-rc-b” role=”tabpanel” style=”display: none;”>
</div><div class=”jqx-tabs-content-element jqx-rc-b” style=”display: block;”>Sample content number: 0</div></div>

</div>
</div>

</body>
</html>

November 20, 2014 at 11:17 am I want build jqxTab with Html as already generated #63075

minsu0806
Participant

I must solve with javascript only .
html structure changed by only javascript too.

November 20, 2014 at 11:38 am I want build jqxTab with Html as already generated #63079

minsu0806
Participant

i solve it like this.

———————
var tabs = $(“#tabid”);
var headhtm = tabs.find(“ul.jqx-tabs-title-container”)[0].outterHTML;
var bodyhtm = tabs.find(“ul.jqx-tabs-content”).html();
tabs.empty();
tabs.append(headhtm);
tabs.append(bodyhtm);
tabs.jqxTabs({});
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.