composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-26 03:58:45 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
6e9c6eeb23e19a14338ecb40e05a3e862ab0d8a1
iTop/.doc/UI/build/html/manual/Component/Alert/AlertFooter.html
Eric Espie 6e9c6eeb23 Doc update
2021-09-28 17:35:33 +02:00

147 lines
9.8 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Examples &mdash; iTop UI 3.0.0 documentation</title>
<link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="../../../_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="../../../_static/css/ui-doc.css" type="text/css" />
<!--[if lt IE 9]>
<script src="../../../_static/js/html5shiv.min.js"></script>
<![endif]-->
<script data-url_root="../../../" id="documentation_options" src="../../../_static/documentation_options.js"></script>
<script src="../../../_static/jquery.js"></script>
<script src="../../../_static/underscore.js"></script>
<script src="../../../_static/doctools.js"></script>
<script src="../../../_static/js/theme.js"></script>
<link rel="index" title="Index" href="../../../genindex.html" />
<link rel="search" title="Search" href="../../../search.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="../../../index.html" class="icon icon-home"> iTop UI
<img src="../../../_static/itop-logo.png" class="logo" alt="Logo"/>
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="../../../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
<p class="caption" role="heading"><span class="caption-text">Twig Base:</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBase/TwigBase.html">Twig Base Presentation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBaseTuto/TwigBaseTuto.html">Twig Base Tutorial</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBaseReference/TwigBaseReference.html">Twig Base Reference</a></li>
</ul>
<p class="caption" role="heading"><span class="caption-text">Tags reference:</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../../../generated/Component/Component.html">UI Components</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../generated/Layout/Layout.html">UI Layouts</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="../../../index.html">iTop UI</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="../../../index.html" class="icon icon-home"></a> &raquo;</li>
<li>Examples</li>
<li class="wy-breadcrumbs-aside">
<a href="../../../_sources/manual/Component/Alert/AlertFooter.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<section id="examples">
<h1>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"></a></h1>
<p>Example to generate an temporary information with a spinner (on the real display the spinner is animated)</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orInformation</span> <span class="o">{</span><span class="s1">&#39;sId&#39;:&#39;header-requirements&#39;</span><span class="o">,</span> <span class="s1">&#39;IsCollapsible&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="s1">&#39;IsClosable&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">UIContentBlock</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{</span><span class="s1">&#39;aContainerClasses&#39;</span><span class="o">:[</span><span class="s1">&#39;ibo-update-core-header-requirements&#39;</span><span class="o">],</span>
<span class="s1">&#39;sId&#39;:&#39;can-core-update&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{{</span> <span class="s1">&#39;iTopUpdate:UI:CanCoreUpdate:Loading&#39;</span><span class="o">|</span><span class="nf">dict_s</span> <span class="cp">}}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">UISpinner</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The information displayed:</p>
<img alt="../../../_images/AlertInformationExample.png" src="../../../_images/AlertInformationExample.png" />
<p>The javascript to set a success or a failure in return of an ajax call</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">oRequirements</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#header-requirements&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">oCanCoreUpdate</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#can-core-update&quot;</span><span class="p">);</span>
<span class="nx">oCanCoreUpdate</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sMessage</span><span class="p">);</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-information&quot;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">bStatus</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-success&quot;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-failure&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<hr class="docutils" />
<p>Example to generate a hidden alert to display using javascript in case of error</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orFailure</span> <span class="o">{</span><span class="nv">sId</span><span class="s2">:&quot;dir_error_outer&quot;</span><span class="o">,</span> <span class="p">I</span><span class="nv">sCollapsible</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sClosable</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sHidden</span><span class="o">:</span><span class="kp">true</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> *The content goes here*</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The javascript to show the alert</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#dir_error_outer&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-hidden&quot;</span><span class="p">);</span>
</pre></div>
</div>
<p>The error displayed:</p>
<img alt="../../../_images/AlertFailureExample.png" src="../../../_images/AlertFailureExample.png" />
</section>
</div>
</div>
<footer>
<hr/>
<div role="contentinfo">
<p>&#169; Copyright 2021, Combodo.</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink