zoukankan      html  css  js  c++  java
  • 页面主题设置

     1  <div class="layui-form-item select-theme">
     2                 <label class="layui-form-label">主题选择</label>
     3                 <div class="layui-input-block">
     4                     <select lay-filter="larryTheme"  lay-verify="" id="themeName">
     5                       <option value="larry">默认主题</option>
     6                       <option value="A">深蓝主题</option>
     7                       <option value="B">墨绿主题</option>
     8                       <option value="C">藏青主题</option>
     9                     </select>
    10                 </div>
    11             </div>
     1 <script>
     2     // 主题设置
     3     form.on('select(larryTheme)',function(data){
     4       var themeValue=data.value;
     5       localStorage.setItem('themeName',themeValue);
     6       if(themeName){
     7           $('body').attr('class','');
     8           $('body').addClass('larryTheme-'+themeName);
     9       }
    10       form.render('select');
    11     })
    12     $('#larryTheme').on('click', function() {
    13         var fScreen = localStorage.getItem('fullscreen_info');
    14         var themeName = localStorage.getItem('themeName');
    15         layer.open({
    16             type: 1,
    17             title: false,
    18             closeBtn: true,
    19             shadeClose: false,
    20             shade: 0.35,
    21             area: ['490px', '365px'],
    22             isOutAnim: true,
    23             resize: false,
    24             anim: Math.ceil(Math.random() * 6),
    25             content: $('#LarryThemeSet').html(),
    26             success: function (layero, index) {
    27                 if (fScreen && fScreen != 'false') {
    28                     $("input[lay-filter='fullscreen']").attr("checked", "checked");
    29                 }
    30                 if (themeName) {
    31                     $("#themeName option[value='" + themeName + "']").attr("selected", "selected");
    32                 }
    33                 form.render();
    34             }
    35         });
    36     });
    37 </script>
  • 相关阅读:
    7、JavaScript总结——实现选项卡切换的效果
    6、JavaScript进阶篇③——浏览器对象、Dom对象
    5、JavaScript进阶篇②——函数、事件、内置对象
    4、JavaScript进阶篇①——基础语法
    3、DOM操作
    2、JavaScript常用互动方法
    1、JavaScript入门篇
    HTML5与CSS3网页设计
    JAVA程序设计
    Elasticsearch搭建问题汇总
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8949371.html
Copyright © 2011-2022 走看看