I am new to ext.js and I need some explaination.
I wanto to use the ext.js features in a base html, without any use of html tags
I put the ext.js script tags in the html and I created an Application.js file which I reference in the html itself and which contains a simple Ext.application (....) (taken from a sencha blog).
My question is, can I simply use ext.js by inserting the script libraries references in the html, or should I do something else beforehand ?
I saw the sencha cmd on the sencha site, but i suspect its just used to create the structre of the application itself , putting the right files in the right places.
Since I can't visualize anything (apart from a js "alert" which I put at the beginning to seeif i call the right file), what am I doing wrong ?
This is my html :
#{
ViewData["Title"] = "Home Page";
}
<link href='~/ExtJS/Content/Css/prova.css' rel='stylesheet' />
<link rel="stylesheet" href="~/ExtJs/Content/Css/ext-all.css" />
<link rel="stylesheet" href="~/ExtJs/Content/Css/ext-all-debug.css" />
<script src="~/ExtJS/Scripts/ext-all-dev.js"></script>
<script src="~/ExtJS/Scripts/ext-all.js"></script>
<script src="~/ExtJS/Scripts/ext-lang-it.js"></script>
<script src="~/ExtJS/Src/Application.js"></script>
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
This is my MVC layout file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ExtJSApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
#*<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ExtJSApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>*#
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - ExtJSApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and this is my Application.js file :
alert('launch');
Ext.application({
launch: function () {
Ext.Viewport.add({
xtype: 'grid',
title: 'Users',
columns: [
{ text: 'Name', width: 100, dataIndex: 'name' },
{ text: 'Email Address', flex: 1, dataIndex: 'email' },
{ text: 'Phone Number', width: 200, dataIndex: 'phone' }
],
data: data,
listeners: {
select: onSelect
},
});
}
}
);
function onSelect(sender, record) {
var r = record[0].data;
var text = r.name + ' - ' + r.email + ' - ' + r.phone;
Ext.Msg.alert('Row Clicked', text);
};
var data = [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
If you are planning to add ExtJS as a library instead of using it as a framework, you should do a build of the ExtJS abb beforehand and include the build files into your html.
Framework Approach
Install Sencha CMD
Start Windows PowerShell (or command line on your system)
follow this documentation to generate a workspace and an app
Run sencha app build production
Use the index.html from the build
If you need additional sources you can add them into the app.json file, that way all is loaded into the html file using ExtJS.
Library Approach
same as above, but instead of using the ExtJS html...
copy the js file and the css files into your own html (folder)
how I did was:
use ExtJS gpl cdn. OR down load and store it locally
in extjs use renderTo: your_div_id ,// to render ext component on particular div
note: I have extjs license.
Related
So what I'm trying to do is get data from a stored procedure and put it into a table on my website. When I call the API functions from my JS file (using XML REQUEST), the if statement never runs, and I never get a result back. Im not too sure where my error is because I don't get any error message, I just get no data returned into my table.
Function that calls to API from JS file
function getStudentTopicQuizResult()
{
console.log("step 1");
var req = new XMLHttpRequest();
req.open('POST', 'https://localhost:44303/api/JSON/getStudentTopicQuizResult', true);
req.setRequestHeader('Content-Type', 'application/json');
req.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200)
{
var result = req.response;
console.log("step 2");
}
}
return false;
}
ASP.NET API Functions
[System.Web.Http.HttpPost]
public object getStudentTopicQuizResult()
{
var response = Request.CreateResponse(HttpStatusCode.OK);
string sql = "getStudentTopicQuizResult";
var json = ExecuteSPGetStudentTopicQuizResult(sql);
response.Content = new StringContent(json);
return response;
}
private static string ExecuteSPGetStudentTopicQuizResult(string queryString)
{
string json = "";
string connectionString = ConfigurationManager.AppSettings["dbconn"].ToString();
using (SqlConnection conn = new SqlConnection(connectionString))
{
conn.Open();
// 1. create a command object identifying the stored procedure
SqlCommand cmd = new SqlCommand(queryString, conn);
// 2. set the command object so it knows to execute a stored procedure
cmd.CommandType = CommandType.StoredProcedure;
// execute the command
using (SqlDataReader rdr = cmd.ExecuteReader())
{
// iterate through results, printing each to console
while (rdr.Read())
{
json += "{\"name\":\"" + (string)rdr[0].ToString() + " " + (string)rdr[1].ToString() + "\",\"";
json += "\"topic\":\"" + (string)rdr[2].ToString() + "\",\"";
json += "\"score\":\"" + (string)rdr[5].ToString() + "\",\"";
json += "\"ids\":\"" + (string)rdr[3].ToString() + "|" + (string)rdr[4].ToString() + "\"\"},";
Console.WriteLine(json);
}
}
return json;
}
}
SQL stored procedure code
USE [Capstone]
GO
/****** Object: StoredProcedure [dbo].[getStudentTopicQuizResult] Script Date: 3/29/2021 6:01:59 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER PROCEDURE [dbo].[getStudentTopicQuizResult]
AS
BEGIN
select FirstName, LastName, QuizName, [StudentQuizScore].StudentID, [StudentQuizScore].QuizID, QuizScore
from [dbo].[StudentQuizScore]
inner join Student
on Student.StudentID = [StudentQuizScore].StudentID
inner join Quiz
on quiz.QuizID = [StudentQuizScore].QuizID
END
HTML code for website page with table (Script code at bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title id=tabtitle>
Teacher Home
</title> <!-- dependent on student login -->
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
</head>
<body class="profile-page sidebar-collapse">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
<div class="container">
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="welcome-page.html">Welcome/Overview</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="page-header clear-filter page-header-small" >
<div class="page-header-image" data-parallax="true" style="background-image:url('../assets/img/capstone/space-bg.jpg');">
</div>
<div class="container">
<h1 id="pagetitle" class="title">Class's Future <!-- dependent on student login --></h1>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="col-xl-10 ml-auto mr-auto text-center">
<table class="display" id="example">
<thead>
<tr>
<th>Student Name</th>
<th>Topic</th>
<th>Score</th>
<th>Quiz Response</th>
</tr>
</thead>
</table>
</div>
<footer class="footer">
<div class=" container ">
<nav>
<ul>
<li>
<a href="https://mhs.monroeps.org/" target="_blank">
Masuk High School
</a>
</li>
<li>
<a href="https://classroom.google.com/h" target="_blank">
Google Classroom
</a>
</li>
</ul>
</nav>
<div class="copyright" id="copyright">
©
<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))
</script> Designed and coded by Mike Aiello</a>
</div>
</div>
</footer>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
<script src="../assets/js/core/helperFunctions.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
</body>
<script>
$(document).ready(function(){
//var userName = getCookie('myFutureUserName');
var userName = localStorage.getItem('myFutureUserName');
var userID = localStorage.getItem('myFutureUserID');
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('dataKey');
var responseObj = getStudentTopicQuizResult();
/*var responseObj = [
{ "name":"A1", "topic": "A1", "score": "100", "ids": "1009|10" },
{ "name":"A2", "topic": "A1", "score": "100", "ids": "1009|1" }
];
*/
$('#example').dataTable({
"data": responseObj,
"columns": [
{ "data": "name" },
{ "data": "topic" },
{ "data": "score" },
{
"data": "ids",
"render": function(data, type, row, meta){
//if(type === 'display'){
data = '<button type="button" class="btn btn-info btn-sm" onclick="openModal(\'' + data + '\')" >Show Quiz Response</button>';
//}
return data;
}
}
]
});
});
function openModal(quizID) {
alert(quizID);
localStorage.setItem('quizResponseID', quizID);
$("#myModal").modal();
}
</script>
</html>
I am learning angular js from code school and this is their code. It wont display my products rather it shows the code exactly as in {{..}}. I have thoroughly checked for errors nothing seems to work. I have tried removing th alias of StoreController as store and used just StoreController, that doesn't work either. I enclosed my entire js code in a function but that didnt work too. I have attached the picture of my result too.
My Javascript Code in ang.js file
var app = angular.module('GemsStore',[]);
app.controller('StoreController',function(){
this.products=gems;
});
var gems=[
{
name:'Diamond',
price:100,
description:'Shiny',
canPurchase:true,
soldOut:false
},
{
name:'Sapphire',
price:200,
description:'Shiny',
canPurchase:true,
soldOut:false
}
];
My html Code
<!DOCTYPE html>
<html ng-app="GemsStore">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button class="btn-default" ng-show="store.product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="js/ang.js"></script>o
<script src="angular.min.js"></script>
</body>
</html>
My result
edited code
JS code
app.controller('StoreController', function() {
var gems = [{
name: 'Diamond',
price: 100,
description: 'Shiny',
canPurchase: true,
soldOut: false
},
{
name: 'Sapphire',
price: 200,
description: 'Shiny',
canPurchase: true,
soldOut: false
}
];
this.products = gems;
});
Your HTML code
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>{{product.price}}</h2>
<p>{{product.description}}</p>
<button class="btn-default" ng-show="product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="angular.min.js"></script>
<script src="js/ang.js"></script>
</body>
I have the following code which is giving me the old
Failed to load resource: the server responded with a status of 404 (Not Found)
error and I'm not seeing my views. The main.js file is on the same level in the project as index.html.
I built it in Webstorm 10 and I've been staring and rearranging stuff for two days now. I'm starting to get cross-eyed looking at it. If anyone can point out what I'm missing or if I wrote something wrong, it'd be a big help.
EDIT :
I edited the html because this was missing the ng-view element. I'm using the localhost server built into Webstorm to debug. The first template that should be seen upon the project being loaded, about.html, was the file that couldn't be loaded from the project. For that matter though, I get an error trying to load each of the templates.
EDIT 2:
I'm getting the idea it has something to do with Webstorm. If I start a default Angular project and fire it up in a browser, I get a whole bunch of failure to load resource errors.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="content/css/custom.css" rel="stylesheet"/>
<base href="/" />
</head>
<body>
<nav class="navbar navbar-fixed-top cstmNavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Voice Over</li>
<li>Conventions</li>
<li>Contact</li>
<li>Other Links</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
main.js
var app = angular.module("app", ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: '/views/about.html',
controller: 'aboutCtrl'
})
.when('/voiceover', {
templateUrl: '/views/voiceover.html',
controller: 'voiceoverCtrl'
})
.when('/conventions', {
templateUrl: '/views/conventions.html',
controller: 'conventionsCtrl'
})
.when('/contact', {
templateUrl: '/views/contact.html',
controller: 'contactCtrl'
})
.when('/other', {
templateUrl: '/views/other.html',
controller: 'otherCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller("mainCtrl", function ($scope) {
});
app.controller("aboutCtrl", function ($scope) {
});
app.controller("voiceoverCtrl", function ($scope) {
});
app.controller("conventionsCtrl", function ($scope) {
});
app.controller("contactCtrl", function ($scope) {
});
app.controller("otherCtrl", function ($scope) {
});
Add in yor html code
<ui-view></ui-view>
This tag load html view
I have installed Yii2 advanced application, and now I want to change backend theme.
How can I do this?
Is there any file where I need to tell Yii2 that use my custom theme?
I established my theme under backend/web/themes/mytheme.
I just replaced this code in advanced/backend/config/main.php, but nothing happened!
'view' => [
'theme' => [
'pathMap' => ['#app/views' => '#app/themes/mytheme'],
'baseUrl' => '#web/themes/mytheme',
],
],
Then I replaced this code under common/config/main.php but nothing changed!
Yet another approach to change theme in Yii2 is:
Create a themes directory in web folder in frontend or backend where you want to change theme.
place your theme folder inside themes directory.
change $css and $js variables in AppAsset.php in assets folder in frontend or backend like:
public $css = [
//'css/site.css',
'themes/theme_folder/css/font-awesome.min.css',
'themes/theme_folder/css/slicknav.css',
'themes/theme_folder/css/style.css',
'themes/theme_folder/css/responsive.css',
'themes/theme_folder/css/animate.css',
'themes/theme_folder/css/colors/red.css',
//'themes/margo/asset/css/bootstrap.min.css',
];
public $js = [
'themes/theme_folder/js/jquery.migrate.js',
'themes/theme_folder/js/modernizrr.js',
'themes/theme_folder/js/jquery.fitvids.js',
'themes/theme_folder/js/owl.carousel.min.js',
'themes/theme_folder/js/nivo-lightbox.min.js',
//'themes/theme_folder/js/jquery-2.1.4.min.js',
//'themes/theme_folder/asset/js/bootstrap.min.js'
];
Do not include core bootstrap css, bootstrap js and jquery js as these are core APIs that are provided by Yii2. I have commented them above.
Use the below code to reference theme resources (css, js, images etc) in your main.php layout file or other site pages:
<?= Yii::getAlias('#web/themes/theme_folder') ?>/images/margo.png
There is no need to include css or js files in layouts->main.php file :)
Create a view folder in your themes/mytheme and move all view files like main.php into it and other layouts needed.
Also you can set your basic layout in the backend\config\main.php like
return [
'id' => 'app-backend',
'layout'=>'yourtheme', //your `themes/mytheme/views/` contain yourtheme.php in this case
...
Also change pathmap to
'pathMap' => ['#app/views' => '#app/themes/mytheme/views'],
In the backend folder make a theme folder .In file backend/config/main.php the components section add the code given below ,files in this folder will behave like the view folder in backend .
'view' => [
'theme' => [
'basePath' => '#backend/themes/demo',
'baseUrl' => '#backend/themes/demo',
'pathMap' => [
'#backend/views' => '#backend/themes/demo',
],
],
],
To install a new backend or frontend theme ( I did one page Bootstrap theme), please follow the below steps:
Copy the theme content i.e. directories like js, css, images, fonts etc to for instance backend->web folder.
Change your backend->assets->AppAsset.php class i.e. modify $css and $js arrays like
public $css = [
//'css/site.css',
'css/font-awesome.min.css',
'css/main.css',
'css/prettyPhoto.css',
'css/bootstrap.min.css',
];
public $js = [
//'js/bootstrap.min.js',
'js/html5shiv.js',
'js/jquery.isotope.min.js',
//'js/jquery.js',
'js/jquery.prettyPhoto.js',
'js/main.js',
'js/respond.min.js',
];
Please keep in mind to comment out core JQuery and Bootstrap JS files as they are provided by Yii2 by default.
Modify the backend->views->layouts->main.php file as under:
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use webvimark\modules\UserManagement\models\User;
use webvimark\modules\UserManagement\UserManagementModule;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<!--[if lt IE 9]>
<script src="<?= Yii::$app->request->baseUrl ?>/js/html5shiv.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?= Yii::$app->request->baseUrl ?>/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-57-precomposed.png">
<?php $this->head() ?>
</head><!--/head-->
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<?php $this->beginBody() ?>
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="icon-home"></i></li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header><!--/#header-->
<?= $content ?>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<img class="pull-right" src="<?= Yii::$app->request->baseUrl ?>/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
</div>
</div>
</div>
</footer><!--/#footer-->
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Now adjust your other content pages according to theme, place sections of the theme on your pages that suits you :)
Let me know if anyone comes across any difficulty :)
try this:
'components' => [
'view' => [
'theme' => [
'pathMap' => ['#backend/views' => '#backend/themes/mytheme'],
'baseUrl' => '#backend/themes/mytheme',
],
],
],
just put all your view folder in themes\mytheme
I am working on my first website that is on my computer and I am not planning to put it on the internet. However, I want to reuse nav and footer on other pages.
No php.
No frames.
Javascript?
Are there anyways to use HTML?
Modest will do this.
It's especially easy if you're not putting it on the internet, just put jquery and modest-preview.js in the section and you can start using it right away:
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="modest-preview.js"></script>
<include>myNav</include>
</head>
<body>
<myNav/>
</body>
</html>
myNav.xml
HTML |
CSS |
JavaScript |
jQuery
I know is a bit old but Ive found a way to achieve this.
You can load a portion of code into yout html by using ajax and leave the rest of your page without changes in order to use the same nav.
Code:
lets say I have this code in this file:
home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#/">NAVBAR</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=" active">
Home
</li>
<li>
About
</li>
<li>
Rebout
</li>
</ul>
</div>
</nav>
<main id="main">
</main>
<script src="thirdParty/jquery-1.12.0.min.js"></script>
<script src="thirdParty/jquery.ba-hashchange.min.js"></script>
<script src="js/partialViewLoad.js"></script>
<script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
I will have two more files that will work as htmls partial views: 'partialViews/main.html' and 'partialViews/about.html'. (put some html into those files)
I use the plugin jquery.ba-hashchange.min for refreshing the html.
And at least I have the script used to load the partial views:
loadPartialView.js
$(function () {
$(window).hashchange(function () {
if (location.hash.indexOf('#/') > -1) {
loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
}
});
$(window).hashchange();
});
function loadPartial(partialName) {
partialName = partialName || 'main';
$.get('/partialViews/' + partialName + '.html').done(function (html) {
$('#main').html(html);
});
}
$(document).ready(function() { loadPartial(); });
When you click on the links in the ul the hash location will change and this will trigger a jquery callback that we ve created. in that moment we load our partial views.
I recommend you to use a server and a more robust language to accomplish this. But this solution will work, is easy to implement and will work even on a server.