Skip to content

Z
zui

易企天创 / zui
10 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 20a880db 编写于 作者: C Catouse
浏览文件
操作

* improve document.

上级 bde8d25a
隐藏空白更改
内联 并排
Showing with 143 addition and 52 deletion
docs/part/basic-browser.html
浏览文件 @ 20a880db
<section>
<header><h3>桌面浏览器</h3></header>
<header><h3>受支持的平台</h3></header>
<article>
<h4>桌面浏览器</h4>
<ul>
<li>IE8+</li>
<li>Opera 12+</li>
......@@ -8,20 +9,110 @@
<li>Safari 5+</li>
<li>Chrome 10+</li>
</ul>
</article>
</section>
<section>
<header><h3>移动浏览器</h3></header>
<article>
<h4>移动浏览器</h4>
<ul>
<li>IOS 4+ Safari</li>
<li>Chrome for Android</li>
<li>Chrome for IOS</li>
<li>Chrome for Android</li>
<li>Windows Phone 7+ IE</li>
<li>Windows Phone 8+ IE</li>
</ul>
<p>最新的浏览器都能获得最佳体验，在旧的浏览器上ZUI中的部分特性（例如圆角或阴影效果）无法使用。</p>
<div class="alert alert-warning-inverse">
<p>在最新的浏览器都能获得最佳体验，但一些古老的浏览器上（例如IE8）ZUI中的部分特性（例如圆角或阴影效果）无法使用。</p>
</div>
</article>
</section>
<section>
<header><h3>浏览器检测</h3></header>
<article>
<p>浏览器检测提供对IE6~IE9版本间的检测功能，不检测更高版本的IE浏览器和Microsoft edge浏览器。</p>
<h4>IE版本辅助类</h4>
<p>为方便开发者更加方便的处理IE系列浏览器的兼容性问题，ZUI中内置了IE版本检测功能，并为<code>&lt;body&gt;</code>元素增加了一些辅助类。使用辅助类可以方便的为特定版本或者一系列版本的IE浏览器应用单独的样式，或者使用JS来作单独处理。</p>
<p>可能使用的辅助类含义如下：</p>
<table class="table table-bordered">
<thead>
<tr>
<th>类名</th>
<th>对应的IE版本</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.support-ie</code></td>
<td>IE版本&gt;=8</td>
<td>此浏览器为ZUI中受支持的IE版本</td>
</tr>
<tr>
<td><code>.outdated-ie</code></td>
<td>IE版本&gt;=8</td>
<td>此浏览器为ZUI中不受支持的IE版本</td>
</tr>
<tr>
<td><code>.ie-α</code></td>
<td>IE版本=α</td>
<td>如果当前IE版本为8，则为<code>.ie-8</code></td>
</tr>
<tr>
<td><code>.gt-ie-α</code></td>
<td>IE版本&lt;α</td>
<td><code>.gt-ie-7</code>则表示当前浏览器版本大于7，即大于或等于版本8</td>
</tr>
<tr>
<td><code>.gte-ie-α</code></td>
<td>IE版本&gt;=α</td>
<td><code>.gte-ie-8</code>则表示当前浏览器版本大于等于8</td>
</tr>
<tr>
<td><code>.lt-ie-α</code></td>
<td>IE版本&lt;α</td>
<td><code>.lt-ie-8</code>则表示当前浏览器版本小于8</td>
</tr>
<tr>
<td><code>.lte-ie-α</code></td>
<td>IE版本&lt;=α</td>
<td><code>.lte-ie-7</code>则表示当前浏览器版本小于等于7</td>
</tr>
</tbody>
</table>
<h4>在Javascript中判断浏览器版本</h4>
<p>ZUI提供<code>$.zui.browser</code>对象来检测IE版本。此对象包含以下方法和属性：</p>
<table class="table table-bordered">
<tbody>
<tr>
<td><code>$.zui.browser.ie</code></td>
<td>获取当前IE版本值</td>
</tr>
<tr>
<td><code>$.zui.browser.isIE(version)</code></td>
<td>判断当前浏览器是否是特定IE版本，如果满足条件返回<code>true</code>，反之返回<code>false</code>；version参数可选，如果为空，则只要是IE浏览器就返回<code>true</code></td>
</tr>
</tbody>
</table>
<h4>显示低版本提示</h4>
<p>当用户使用一个较低版本的不受ZUI支持的浏览器时，页面可能无法得到最低预期效果。此时建议向用户显示一个信息，并提示用户升级到最新的浏览器。</p>
<p>ZUI提供<code>$.zui.browser.tip()</code>方法在页面顶部显示一条友好的信息，并引导用户访问<a target="_blank" href="http://browsehappy.com/">browsehappy.com</a>来升级到更好的浏览器。此方法接受一个参数用来自定义自己的消息文本。</p>
<div class="example">
<button type="button" class="btn btn-primary show-low-version-tip">显示低版本浏览器提示信息</button>
<button type="button" class="btn show-low-version-tip" data-content='哇~~~你的浏览器版本太低了，快快升级吧！'>自定义的提示信息</button>
</div>
<pre><code>// 显示低版本提示信息
$.zui.browser.tip();
// 显示自定义的低版本提示信息
$.zui.browser.tip('哇~~~你的浏览器版本也太低了，快快升级吧！');</code></pre>
<div class="alert alert-primary-inverse">
<h5>提示</h5>
<p>在IE7及更低IE版本的浏览器上会自动现实低版本提示信息，所以一般情况下，你无须自己手动调用此方法。</p>
</div>
</article>
</section>
<script>
function afterPageLoad() {
$('.show-low-version-tip').click(function(){
$.zui.browser.tip($(this).data('content'));
});
}
</script>
docs/part/basic-theme.html
浏览文件 @ 20a880db
......@@ -22,8 +22,8 @@ body.lte-ie-9 #themeActions > .toolbar {display: none}
<p>点击以下主题来更改文档外观：</p>
<div class="example themes clearfix hl-primary" id="themesExample">
</div>
<div id="themeActions" class="hl-primary">
<textarea name="themeVariablesLess" id="themeVariablesLess" rows="7" class="form-control"></textarea>
<div id="themeActions" class="hl-primary copyable">
<textarea name="themeVariablesLess" id="themeVariablesLess" rows="7" class="form-control copyable-target"></textarea>
<div class='toolbar'>
<h5>主题：<span id="currentThemeName">default</span></h5>
<button type="button" class="btn btn-primary" id="downloadThemeCss">编译下载 zui-theme.css</button>
......
docs/part/javascript-store.html
浏览文件 @ 20a880db
<article>
<p>本地存储（Local storage）是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间（相同域下一般达到5M存储空间），使用更灵活，而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储，甚至包括IE8。</p>
<p>ZUI中提供读写本地存储的插件。文件路径为：<code>/src/js/store.js</code>。</p>
<p>ZUI中提供读写本地存储的插件。</p>
</article>
<section>
<header><h3>实例</h3></header>
<article>
<div class="example" id="storeExample">
<div class="alert hide alert-success">
<h4>本地存储可用，刷新页面或关闭浏览器不会丢失你的数据。</h4>
</div>
<div class="alert hide alert-warning">
<h4>本地存储不可用！</h4>
</div>
<table class="table">
<thead>
<tr>
<th style="width:80px">索引</th>
<th style="width:40%">名称</th>
<th>值</th>
<th></th>
</tr>
</thead>
<tbody id="storeTable">
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<div class="input-group">
<span class="input-group-addon">名称</span>
<input type="text" id="storeName" name="storeName" class="form-control">
<span class="input-group-addon fix-border">值</span>
<input type="text" id="storeValue" name="storeValue" class="form-control">
<span class="input-group-btn"><button type="button" id="storeAdd" class="btn btn-primary">保存</button></span>
</div>
</td>
<td colspan="2"><button type="button" class="btn btn-danger" id="storeClear">清空</button></td>
</tr>
</tfoot>
</table>
</div>
</article>
</section>
<section>
<header><h3>如何使用</h3></header>
<article>
......@@ -233,46 +273,6 @@ $.zui.store.pageClear(); // 清空所有本
</article>
</section>
<section>
<header><h3>实例</h3></header>
<article>
<div class="example" id="storeExample">
<div class="alert hide alert-success">
<h4>本地存储可用，刷新页面或关闭浏览器不会丢失你的数据。</h4>
</div>
<div class="alert hide alert-warning">
<h4>本地存储不可用！</h4>
</div>
<table class="table">
<thead>
<tr>
<th style="width:80px">索引</th>
<th style="width:40%">名称</th>
<th>值</th>
<th></th>
</tr>
</thead>
<tbody id="storeTable">
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<div class="input-group">
<span class="input-group-addon">名称</span>
<input type="text" id="storeName" name="storeName" class="form-control">
<span class="input-group-addon fix-border">值</span>
<input type="text" id="storeValue" name="storeValue" class="form-control">
<span class="input-group-btn"><button type="button" id="storeAdd" class="btn btn-primary">保存</button></span>
</div>
</td>
<td colspan="2"><button type="button" class="btn btn-danger" id="storeClear">清空</button></td>
</tr>
</tfoot>
</table>
</div>
</article>
</section>
<script>
function afterPageLoad(){
$('#storeExample .alert-' + ($.zui.store.enable ? 'success' : 'warning')).removeClass('hide');
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或