## 11.1.跨頁面操作 :id=page_oper
單頁面是可以直接跨頁面操作的：
```javascript
table.reload('userTab', {}); // 刷新其他頁面表格
```
layui.use里面定義的變量想在其他頁面訪問：
```javascript
layui.use(['layer'], function() {
window.xxx = 'xxxx'; // 變量給其他頁面訪問
// 方法給其他頁面訪問
window.xxx = function(){
alert('aa');
};
});
```
## 11.2.nginx部署解決跨域 :id=nginx_cors
部署只需要把前端所有代碼放在nginx的html中，修改config.js的base_server為接口地址即可，
如果接口沒有做跨域支持，可使用nginx反向代理來解決跨域問題：
1. 打開“nginx/conf/nginx.conf”配置文件
2. 設置反向代理：
```
http {
server {
# 加入以下配置，之前的配置全部不要動，這個location是新加入的
location /api/ {
proxy_pass http://11.11.111.111:8088/; # 這個是后臺接口所在的地址
}
}
}
```
3. 修改config.js里面的base_server為/api/。
> 這樣配置接口就會訪問localhost:80/api/，然后nginx再反向代理到實際接口
## 11.3.多系統模式 :id=more_side
 在header中有幾個選項：“xx系統”、“xx系統”，點擊不同的系統切換不同的側邊菜單，
在線演示：[side-more.html](https://demo.easyweb.vip/iframe/page/example/side-more.html)
側邊欄代碼，使用`nav-id`標識不同的菜單：
```html
<div class="layui-side">
<div class="layui-side-scroll">
<!-- 系統一的菜單，每個ul都加nav-id -->
<ul nav-id="xt1" class="layui-nav layui-nav-tree" lay-filter="admin-side-nav">
<!-- ...省略代碼... -->
</ul>
<!-- 系統二的菜單，加layui-hide隱藏 -->
<ul nav-id="xt2" class="layui-nav layui-nav-tree layui-hide" lay-filter="admin-side-nav">
<!-- ...省略代碼... -->
</ul>
</div>
</div>
```
header.html代碼，使用`nav-bind`綁定側邊欄菜單：
```html
<div class="layui-header">
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a nav-bind="xt1">系統一</a></li>
<li class="layui-nav-item"<a nav-bind="xt2">系統二</a></li>
</ul>
</div>
```
## 11.4.彈窗下拉框出現滾動條 :id=dialog_scroll
非iframe類型的彈窗才能解決，解決辦法如下：
```javascript
admin.open({
title: '添加用戶',
content: $('#model').html(),
success: function (layero, index) {
// 禁止出現滾動條
$(layero).children('.layui-layer-content').css('overflow', 'visible');
}
});
```
> 關鍵代碼就是在success回調中寫上面那句話
## 11.5.彈窗寬度不能超出屏幕 :id=dialog_overflow
這個是針對手機屏幕下做了讓彈窗寬度自適應，如果你需要讓彈窗寬度超出屏幕如下代碼即可：
```javascript
admin.open({
title: '添加用戶',
content: $('#model').html(),
success: function (layero, index) {
$(layero).css('max-width', 'unset'); // 去掉max-width屬性
}
});
```
> success回調中去掉max-width屬性
## 11.6.表單文字出現換行 :id=form_text
layui的表單左邊的標題文字最多顯示5個字，超出會換行，通過添加css修改寬度：
```css
#userForm .layui-form-label {
width: 100px; // 這里修改標題寬度
}
#userForm .layui-input-block {
margin-left: 130px; // 這里要比上面始終大30px
}
```
`#userForm`是表單的id，加id避免影響其他表單樣式：
```html
<form id="userForm" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">活動起止時間</label>
<div class="layui-input-block">
<input type="text" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活動詳細介紹</label>
<div class="layui-input-block">
<textarea class="layui-textarea" maxlength="200"></textarea>
</div>
</div>
</form>
```
## 11.7.側邊欄折疊圖標放大 :id=side_icon
側邊欄折疊后圖標會進行放大，如果要修改大小，添加如下css：
```css
@media screen and (min-width: 750px) {
.layui-layout-admin.admin-nav-mini .layui-side .layui-nav .layui-nav-item > a > .layui-icon {
font-size: 18px;
}
}
```
 修改font-size即可，如果不想放大，改成14px即可。
## 11.8.select、radio不顯示 :id=select_none
select、radio在layui中會被美化，對于動態生成的元素需要重新渲染才能美化：
```javascript
$('div').appen('<select><option value="1">xxxx</option></select>');
form.render('select'); // 重新渲染select
form.render('radio'); // 重新渲染radio
// 對于彈窗內select不顯示
admin.open({
type: 1,
content: '<select><option value="1">xxxx</option></select>',
success: function(){
form.render('select'); // 彈窗要在success里重新渲染
}
});
```
