jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
226 lines (208 loc) • 12 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
<meta name="description" content="jQuery Splitter Widget - API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic
layout allowing you to resize, collapse panels. These panels are actualy are HTML container's children.
You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts." />
<title id='Description'>jqxSplitter is a widget based on jQuery which provides an easy
way to create dynamic layouts with resizable and collapsible panels.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var rss = (function ($) {
var createWidgets = function () {
$('#mainSplitter').jqxSplitter({ width: 850, height: 600, panels: [{ size: 200, min: 100 }, {min: 200, size: 400}] });
$('#contentSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}] });
$("#feedExpander").jqxExpander({toggleMode: 'none', showArrow: false, width: "100%", height: "100%",
initContent: function () {
$('#jqxTree').jqxTree({ height: '100%', width: '100%'});
}
});
$("#feedContentExpander").jqxExpander({ toggleMode: 'none', showArrow: false, width: "100%", height: "100%", initContent: function () {
$('#feedItemContent').jqxPanel({ width: '100%', height: '100%' });
}
});
$("#feedListExpander").jqxExpander({
toggleMode: 'none', showArrow: false, width: "100%", height: "100%", initContent: function () {
$('#feedListContainer').jqxListBox({ source: ['1'], width: '100%', height: '100%' });
}
});
};
var addEventListeners = function () {
$('#jqxTree').on('select', function (event) {
var item = $('#jqxTree').jqxTree('getItem', event.args.element);
if (item.label === "News and Blogs" || item.label === "Favorites") {
return;
}
getFeed(config.feeds[item.label]);
});
$('#feedListContainer').on('select', function (event) {
loadContent(event.args.index);
});
};
var getFeed = function (feed) {
config.currentFeed = feed;
feed = config.dataDir + '/' + feed + '.' + config.format;
loadFeed(feed);
};
var loadFeed = function (feed, callback) {
$.ajax({
'dataType': 'json',
'url': feed,
success: function (data) {
var channel = data.rss.channel;
config.currentFeedContent = channel.item;
displayFeedList(config.currentFeedContent);
displayFeedHeader(channel.title);
selectFirst();
}
});
};
var selectFirst = function () {
$('#feedListContainer').jqxListBox('selectIndex', 0);
loadContent(0);
};
var displayFeedHeader = function (header) {
$("#feedListExpander").jqxExpander('setHeaderContent', header);
};
var displayFeedList = function (items) {
var headers = getHeaders(items);
config.feedListContainer.jqxListBox('source', headers);
};
var getHeaders = function (items) {
var headers = [], header;
for (var i = 0; i < items.length; i += 1) {
header = items[i].title;
headers.push(header);
}
return headers;
};
var loadContent = function (index) {
var item = config.currentFeedContent[index];
if (item != null) {
config.feedItemContent.jqxPanel('clearcontent');
config.feedItemContent.jqxPanel('prepend', '<div style="padding: 1px;"><span>' + item.description + '</span></div>');
addContentHeaderData(item);
config.selectedIndex = index;
}
};
var addContentHeaderData = function (item) {
var link = $('<a style="white-space: nowrap; margin-left: 15px;" target="_blank">Source</a>'),
date = $('<div style="white-space: nowrap; margin-left: 30px;">' + item.pubDate + '</div>');
container = $('<table height="100%"><tr><td></td><td></td></tr></table>');
link[0].href = item.link;
config.feedItemHeader.empty();
config.feedItemHeader.append(container);
container.find('td:first').append(link);
container.find('td:last').append(date);
$("#feedContentExpander").jqxExpander('setHeaderContent', container[0].outerHTML);
};
var dataDir = 'data';
var config = {
feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
format: 'txt',
dataDir: dataDir,
feedTree: $('#jqxTree'),
feedListContainer: $('#feedListContainer'),
feedItemContent: $('#feedItemContent'),
feedItemHeader: $('#feedItemHeader'),
feedUpperPanel: $('#feedUpperPanel'),
feedHeader: $('#feedHeader'),
feedContentArea: $('#feedContentArea'),
selectedIndex: -1,
currentFeed: '',
currentFeedContent: {}
};
return {
init: function () {
createWidgets();
addEventListeners();
getFeed('sciencedaily');
}
}
} (jQuery));
rss.init();
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="mainSplitter">
<div>
<div style="border: none;" id="feedExpander">
<div class="jqx-hideborder">
Feeds</div>
<div class="jqx-hideborder jqx-hidescrollbars">
<div class="jqx-hideborder" id='jqxTree'>
<ul>
<li item-expanded='true' id="t1">
<img style='float: left; margin-right: 5px;' src='../../../images/contactsIcon.png' /><span
item-title="true">News and Blogs</span>
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/favorites.png' /><span
item-title="true">Favorites</span>
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span
item-title="true">ScienceDaily</span> </li>
</ul>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span
item-title="true">Geek.com</span> </li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span
item-title="true">CNN.com</span> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div id="contentSplitter">
<div class="feed-item-list-container" id="feedUpperPanel">
<div class="jqx-hideborder" id="feedListExpander">
<div class="jqx-hideborder" id="feedHeader">
</div>
<div class="jqx-hideborder jqx-hidescrollbars">
<div class="jqx-hideborder" id="feedListContainer">
</div>
</div>
</div>
</div>
<div id="feedContentArea">
<div class="jqx-hideborder" id="feedContentExpander">
<div class="jqx-hideborder" id="feedItemHeader">
</div>
<div class="jqx-hideborder jqx-hidescrollbars">
<div class="jqx-hideborder" id="feedItemContent">
Select a news item to see it's content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>