I have tried to deal with this problem for 2 days, but I still can't get the JavaScript of Semantic UI to work. This is my all code. My jQuery is not very good. I have read a lot, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum- scale=0.5, maximum-scale=2.0,
user-scalable=yes" /> <!--自适应-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<script type="text/javascript" src="js/semantic.js"></script>
<style type="text/css">
.diymenu{background-color: blue;margin: 0px 0px 0px 0px; padding-top:0px;}
body{margin: 0px 0px 0px 0px;font-family: 微软雅黑;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#drop').click(function(){
$('#drop').dropdown('show');
});
});
</script>
</head>
<body >
<!--导航栏 -->
<div class="ui blue inverted menu">
<a class="active item"><i class="home icon"></i>主页</a>
<div class="right menu">
<a class="item"><i class="mail icon"></i>消息
<div class="ui black circular label">2</div></a>
<a class="item">
</a>
</div>
</div>
<div class="ui dropdown item" id="drop">
More <i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i>编辑个人信息</a>
<a class="item"><i class="globe icon"></i>选择语言</a>
<a class="item"><i class="settings icon"></i>账户设置</a>
</div>
</div>
</body>
</html>
From the docs at http://semantic-ui.com/modules/dropdown.html#/usage, you should initialize your dropdown with Javascript (no further jquery code required):
$('.ui.dropdown').dropdown();
See also http://jsfiddle.net/fd8qfyra/1/ i think there is no problem.
After researching through blogs, youtube and more I found the answer, implemented it and given me the collapsing dropdown functionality with Semantic UI
Put the CSS and semantic.js link inside the header instead of the body
Give the select an ID
3.Initialize the ID with with dropdown only:
$('#gender-select').dropdown();
Related
This is what I want: when I click the username (in header), show the sidebar. This only works out of the nav label and I must use a label. In a button not works.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/icon.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/materialize.min.css">
<title>Dashboard</title>
</head>
<body>
<ul id="side-setting" class="side-nav">
<li>ver perfil</li>
<li>editar perfil</li>
<li>cerrar sesion</li>
</ul>
<nav class="teal" role="navigation">
<div class="nav-wrapper container-fluid">
<ul class="hide-on-med-and-down">
<li>Inicio</li>
<li>Grupos</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
username
</li>
</ul>
</div>
</nav>
here
<button class="btn" data-activates="side-setting" class="button-coll">sidenav</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
init.js code
(function($){
$(function(){
$('select').material_select();
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
how I add this sidebar? I want this float to the right when I click in a button or username that is positioned in header (nav)
I am trying to use the angular-tour plugin to give a short tour of a sites functionality. I would like the tool tips to pop on each icon found in the horizontal navbar. The navbar is a view and even though I have included the required scripts etc in the index.html, it is just rendering text, and that is also being cut off by the main view. This makes sense but how can I fix this?
I have also included angular-tour in angular.module. I appreciate any help.I have also included a screenshot of what it looks like currently (the plain text "Highlighted"). I am just trying to implement the example from http://daftmonk.github.io/angular-tour/ to my application before editing.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrummage</title>
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link href="../bower_components/angular-tour/dist/angular-tour.css" rel="stylesheet" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-ui-modal/angular-ui-modal.js"></script>
<script src="../bower_components/angular-charts/dist/angular-charts.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./js/app.js"></script>
<script src="./js/services/utils.js"></script>
<script src="./js/controllers/signin/signin.js"></script>
<script src="./js/controllers/storyBoard/storyBoard.js"></script>
<script src="./js/controllers/analytics/analytics.js"></script>
<script src="./js/controllers/featureSetup/featureSetup.js"></script>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
</head>
<body ng-app="scrummage">
<div ui-view
></div>
</body>
</html>
navbar.html:
<div class="sidebar-nav">
<ul>
<li><i class="grow fa fa-gear nav-list-icon"></i>
<tour step="currentStep">
<span tourtip="tip 1"> Highlighted </span>
<span tourtip="tip 2"> Elements </span>
<input tourtip="You can use it as an attribute on your element" />
<span tourtip="Full options"
tourtip-step="3"
tourtip-next-label="Next"
tourtip-placement="right"
tourtip-offset="60">Full options</span>
</tour>
</li>
<div id= "analyticsModal" ng-controller='analyticsCtrl'>
<li><i class="grow fa fa-area-chart nav-list-icon"></i></li>
<div modal="showModal" close="cancel()" ng-include="'../js/controllers/analytics/analytics.html'"></div>
</div>
<div id= "featureSetupModal" ng-controller='featureSetupCtrl'>
<li><i class="grow fa fa-plus"></i></li>
<div class="featureModal" modal="showModal" close="cancel()" ng-include="'../js/controllers/featureSetup/featureSetup.html'"></div>
</div>
<li><i class="grow fa fa-sign-out"></i></li>
</ul>
</div>
I figured out what I was doing wrong. Basically, the view that the screenshot above shows is from a view that was included in another view, and I missed having the:
$scope.currentStep = -1;
in the parent view scope.
I am using Foundation 5 top bar drop down in an Aurelia web app.
I want to add on click event handler to the drop down menu items.
My code looks like below:
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch g… webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title></title>
<script src="/Scripts/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="/Content/foundation/foundation.css"></link>
<link rel="stylesheet" href="/Content/foundation/foundation.mvc.css"></link>
<link rel="stylesheet" href="/Content/font-awesome.min.css"></link>
<link rel="stylesheet" href="/Content/custom/app.css"></link>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<nav class="top-bar fixed" data-topbar role="navigation">
...
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
<a href="#" title="${activeModule.Description}">
${activeModule.DisplayName}
</a>
<ul class="dropdown">
<ul repeat.for="module of allModules">
<li>
<a click.delegate="$parent.setActiveModule(module.Name)" data-trash="${$parent.activeModule.Name}">
<strong>${module.DisplayName} </strong> | <em> ${module.Description} </em>
</a>
</li>
<li class="divider">
</li>
</ul>
</ul>
</li>
</ul>
</section>
</nav>
<div class="page-host row">
...
</div>
<hr />
<footer>
<p></p>
</footer>
<script src="/Scripts/foundation/fastclick.js"></script>
<script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However whenever I am clicking the drop down item the custom event handler is not invoked. I tested the same piece of code by placing it outside the <li class="has-dropdown"> and directly under <ul class="left"> and I found it to be working.
Can anyone please let me know what I am missing here?
Thanks.
For anyone looking at this question, here is how I solved it:
I understood that the call to $(document).foundation(); is not working properly. As I am using Aurelia, I leveraged the lifecycle events of views for solving this issue. Thus, I added the call to $(document).foundation(); in the attached event like below:
attached() {
$(document).foundation();
}
And that's it. Hope it helps.
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
i am fresher to angular Js. i want to use pageslide-Directive. Below i have shared the sample template. How to load that content dynamically in that panel.. Please suggest.
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Ng-pageslide : AngularJS sliding panel for serving additional content" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="angular-pageslide-directive.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css">
<title>AngularJS Pageslide directive demo</title>
<style>
.ng-pageslide {
background: #eee;
}
</style>
<script>
var app = angular.module("app", ["pageslide-directive"]);
</script>
</head>
<body >
<!-- MAIN CONTENT -->
<div ng-app="app" ng-controller="test" id="" class="outer" style="padding:20px">
<a class="large button" pageslide ps-side="right" ps-speed="0.5" ng-click="profile_action('')" href="#demo-right">Open Demo</a> <div style="padding:20px" id="demo-right">
{{ NAME}}
<a id="demo-right-close"i class="button" >Close</a>
</div>
</div>
</body>
You have to add an controller to the panel and use it to load your content to the panel's items