2问题/ 1.全屏（jQuery）/ 2.后台更改并另存为Cookie [英] 2 Questions / 1. Fullscreen(jQuery) / 2. Background change and save as Cookies

问题描述

您好，

我在网上搜索，但无法找到合适的和平代码..

我想做：
- 按钮点击进入全屏模式。

全屏模式：

我是新的jQuery和找不到一个正确的代码。我找到一个，但当我点击按钮到下一页，它关闭全屏模式到正常的浏览器窗口，并更改我的网站背景颜色。

创建代码：

 < html> 
< head> 
< title> TEST< / title> 
< / head> 
< body> 
< a href =＃title =Go Fullscreenonclick =toggleFullScreen（）>< img src =fullscreen.png>< / a> 
 
< script> 
 function toggleFullScreen（）{
 if（（document.fullScreenElement&& document.fullScreenElement！== null）|| 
（！document.mozFullScreen&&！document.webkitIsFullScreen ））{
 if（document.documentElement.requestFullScreen）{
 document.documentElement.requestFullScreen（）; 
} else if（document.documentElement.mozRequestFullScreen）{
 document.documentElement.mozRequestFullScreen（）; 
} else if（document.documentElement.webkitRequestFullScreen）{
 document.documentElement.webkitRequestFullScreen（Element.ALLOW_KEYBOARD_INPUT）; 
} 
} else {
 if（document.cancelFullScreen）{
 document.cancelFullScreen（）; 
} else if（document.mozCancelFullScreen）{
 document.mozCancelFullScreen（）; 
} else if（document.webkitCancelFullScreen）{
 document.webkitCancelFullScreen（）; 
} 
} 
} 
< / script> 
< / body> 
< / html> 
  

更改背景并另存为Cookie ：

我想做，成员选择单选按钮的主题白色或黑暗。白色主题默认< div> 背景是白色#fff（白色）。当会员选择Dark主题时，会将< div> 背景更改为＃000000（黑色）。我是新的，不能写代码，没有示例或东西。有人可以告诉我，我该如何使用Cookie和Javascript / jQuery？

会员设置页面

 < html> 
< head> 
< title>设置< / title> 
< / head> 
< body> 
< p>更改主题< / p> 
< form> 
< input type =radioid =Lighttitle =White Theme> 
< br /> 
< input type =radioid =Darktitle =Dark theme> 
< br /> 
< input type =submitid =submitvalue =Submit> 
< / form> 
< / body> 
< / html> 
  

页 BEFORE 将主题更改为黑色：

 < html> 
< head> 
< title>首页< / title> 
< / head> 
< body> 
< div style =background：#fff; height：600px; width：100％;> 
<！ - 一些内容 - > 
< / div> 
< / body> 
< / html> 
  

和 AFTER 将主题更改为黑色：

 < html> 
< head> 
< title>首页< / title> 
< / head> 
< body> 
< div style =background：＃000000; height：600px; width：100％;> 
<！ - 一些内容 - > 
< / div> 
< / body> 
< / html> 
  
 
 
 
感谢！ 
解决方案
您可以设置Cookie值，如下所示：
  document.cookie =theme = black; 
  
或者，如果要保留其他设置，则：
  function changeCookieValue（attribute，value）{
 var previousCookie = document.cookie.split（;）; 
 for（var i = 0; i< previousCookie.length; i ++）{
 var key = previousCookie [i] .substring（0，previousCookie [i] .indexOf（=））; 
 if（key === attribute）{
 previousCookie [i] = attribute +=+ value; 
 document.cookie = previousCookie.join（;）; 
 return; 
} 
} 
 document.cookie = document.cookie +; + attribute +=+ value; 
} 
  
您可以这样使用：
 `changeCookieValue（black）;`
  
 
 $ b b 
这是如何从cookie中读取的：
  function getCookieValue（attribute）{
 var previousCookie = document.cookie.split（;）; 
 for（var i = 0; i< previousCookie.length; i ++）{
 var key = previousCookie [i] .substring（0，previousCookie [i] .indexOf（=））; 
 if（key === attribute）{
 return presiousCookie [i] .substring（previousCookie [i] .indexOf（=）+1）; 
} 
} 
 return; 
} 
  
您可以设置正文的类，如下所示：
  $（body）。addClass（getCookieValue（theme））; 
  
只需确保在运行此零件时已加载了主体。您可以像这样设计主题：
  .black> div {
 background：＃000000; 
} 
 
 .white> div {
 background：#fff; 
} 
  
或者，您可以使用 localStorage ，这更加方便。至于全屏模式，没有理由重新发明轮子，因为有一个很好的全屏API 。
 
 
 
您可以确保 changeCookieValue 使用收音机按钮的 onclick 属性运行正确的参数。 
 
 
 
或者，您可以考虑将值存储在数据库中，并在生成服务器时将所需的类添加到body。
 
 
 
编辑：
 
 
 
您可以在加载的事件中添加类：
  $（function（）{
 $（body）。addClass（getCookieValue（theme））; 
}）; 
  
注意，这将负责在页面加载时显示主题。每当你为主题调用 changeCookieValue 时，你需要显示它。在调用函数  $（body）。removeClass（getCookieValue（theme））;  函数被执行 $（body）。addClass（getCookieValue（theme））; 主题是改变的）。当然，你需要一个包装器：
  function changeTheme（theme）{
 $（body）。 removeClass（getCookieValue（theme））; 
 changeCookieValue（theme，theme）; 
 $（body）。addClass（getCookieValue（theme））; 
} 
  
并触发此 changeTheme 在收音机按钮。
 
Hello,

i searched around the web, but can't find right peace of codes..

I want to do:
- go to Fullscreen mode on a button click.
- change a background color to dark and save it as cookies.

Fullscreen mode:

i'm new with jQuery and can't find a right code. I found one, but when i click on button to next page, it turn's off the full screen mode to normal browser window, and changes my website background colors.

Founded code:
<html>
    <head>
      <title>TEST</title>
    </head>
    <body>
    <a href="#" title="Go Fullscreen" onclick="toggleFullScreen()"><img src="fullscreen.png"></a>

    <script>
    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
      (!document.mozFullScreen && !document.webkitIsFullScreen)) {
      if (document.documentElement.requestFullScreen) {  
          document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
          document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }  
        } else {  
        if (document.cancelFullScreen) {  
        document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
         document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
        }  
      }   
    }
    </script>
    </body>
    </html>
Change Background and save as Cookies:

I want to do, that a members chooses on radio button's a theme White or Dark. The White theme default <div> background is white #fff(White). When member chooses the Dark theme, it changes <div> background to #000000(Black) color. I'm new and can't write a code, without examples or something. Can someone tell me, how can i do it with Cookies and Javascript/jQuery?

Members settings page to change it:
<html>
    <head>
      <title>Settings</title>
    </head>
    <body>
    <p>Change Theme</p>
    <form>
      <input type="radio" id="Light" title="White Theme">
      <br />
      <input type="radio" id="Dark" title="Dark theme">
      <br />
      <input type="submit" id="submit" value="Submit">
    </form>
    </body>
</html>
Page BEFORE changes the Theme to Dark:
<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#fff;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>
and Page AFTER changes the Theme to Dark:
<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#000000;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>
Thanks!
解决方案
You can set a cookie value, like this:
document.cookie = "theme=black";
Or, if you want to keep other settings, then:
function changeCookieValue(attribute, value) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            previousCookie[i] = attribute + "=" + value;
            document.cookie = previousCookie.join(";");
            return;
        }
    }
    document.cookie = document.cookie + ";" + attribute + "=" + value;
}
And you can use it like this:
`changeCookieValue("black");`
This is how you can read from cookie:
function getCookieValue(attribute) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            return presiousCookie[i].substring(previousCookie[i].indexOf("=") + 1);
        }
    }
    return "";
}
You can set the class of the body, like this:
$("body").addClass(getCookieValue("theme"));
just make sure that body is already loaded when you run this part. You can design the themes like this:
.black > div {
    background: #000000;
}

.white > div {
    background: #fff;
}
Alternatively, you can work with localStorage, which is much more handy. As about full screen mode, there is no reason to reinvent the wheel, since there is a good fullscreen API you should use for this purpose.

And you can make sure that changeCookieValue runs with the proper parameter on click using the onclick attribute of your radio buttons. 

Alternatively, you might consider storing the values inside a database and adding the needed class to body on server, when you generate it.

EDIT:

You can add the class at the loaded event:
$(function() {
    $("body").addClass(getCookieValue("theme"));
});
Note, that this will be responsible to display the theme at page load. You need to display it whenever you call changeCookieValue for theme. Before you call that function $("body").removeClass(getCookieValue("theme")); and after the function is executed $("body").addClass(getCookieValue("theme")); (note, that the theme is changed). Naturally, you need a wrapper for this:
function changeTheme(theme) {
    $("body").removeClass(getCookieValue("theme"));
    changeCookieValue("theme", theme);
    $("body").addClass(getCookieValue("theme"));
}
and trigger this changeTheme at your radio buttons.

                        
这篇关于2问题/ 1.全屏（jQuery）/ 2.后台更改并另存为Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！