تغيير Theme بدون رفرش شدن صفحه

Printable View

جمعه 18 اسفند 1391, 13:21 عصر
bftarane

تغيير Theme بدون رفرش شدن صفحه

سلام.
چطور مي شه ظاهر صفحه رو تغيير داد بدون اينکه صفحه رفرش بشه؟
و همينطور به نحوي که وقتي کاربر در صفحات مختلف گردش مي کنه همون Theme اي که اول انتخاب کرده باقي بمونه مثلاً يه دفعه رنگ قرمز رو براي سايت انتخاب کرد در صفحه هاي مختلف هم که گردش مي کنه صفحات رو قرمز ببينه؟
ممنون.
جمعه 18 اسفند 1391, 14:31 عصر
exlord

نقل قول: تغيير Theme بدون رفرش شدن صفحه

فایل css رو میتونین با javascript لود کنین ...
http://stackoverflow.com/questions/5...ing-javascript
و آدرس فایل لود شده رو توی cookie ذخیره کنین و هربار که صفحه لود میشه از cookie اون فایل css رو هم لود کنین...
http://www.w3schools.com/js/js_cookies.asp

نقل قول: تغيير Theme بدون رفرش شدن صفحه

سلام.
الآن من سه تا لينک به شکل زير در صفحه گذاشتم

<ul>

<li><a id="css-black" href="#">Black</a></li>

<li><a id="css-blue" href="#">Blue</a></li>

<li><a id="css-green" href="#">Green</a></li>

</ul>

سه تا استايل شيت هم در پوشه App_Themes دارم
حالا سعي کردم با کدهاي زير روي هر لينک که کليک بشه استايل شيت عوض بشه منتها اولين بار که کليک مي کنم کار ميکنه مثلاً صفحه مشکي ميشه ولي بعد که رو لينکهاي ديگه مثلاً آبي و سبز کليک مي کنم اتفاقي نمي افته.

<script type="text/javascript">

    $(document).ready(function () {

        // black

        $("#css-black").click(function () {

            var $ = document; // shortcut

            var cssId = 'myCss';  // you could encode the css path itself to generate id..

            if (!$.getElementById(cssId)) {

                var head = $.getElementsByTagName('head')[0];

                var link = $.createElement('link');

                link.id = cssId;

                link.rel = 'stylesheet';

                link.type = 'text/css';

                link.href = 'App_Themes/Black/StyleSheet.css';

                link.media = 'all';

                head.appendChild(link);

            }

        });



        // blue

        $("#css-blue").click(function () {

            var $ = document; // shortcut

            var cssId = 'myCss';  // you could encode the css path itself to generate id..

            if (!$.getElementById(cssId)) {

                var head = $.getElementsByTagName('head')[0];

                var link = $.createElement('link');

                link.id = cssId;

                link.rel = 'stylesheet';

                link.type = 'text/css';

                link.href = 'App_Themes/Blue/StyleSheet.css';

                link.media = 'all';

                head.appendChild(link);

            }

        });



        // green

        $("#css-green").click(function () {

            var $ = document; // shortcut

            var cssId = 'myCss';  // you could encode the css path itself to generate id..

            if (!$.getElementById(cssId)) {

                var head = $.getElementsByTagName('head')[0];

                var link = $.createElement('link');

                link.id = cssId;

                link.rel = 'stylesheet';

                link.type = 'text/css';

                link.href = 'App_Themes/Green/StyleSheet.css';

                link.media = 'all';

                head.appendChild(link);

            }

        });

    });

</script>

کدهام چه اشکالي دارن؟
راستي يادم رفت بگم اين رو هم در head نوشتم

 <link id="myCss" href="App_Themes/Blue/StyleSheet.css" rel="stylesheet" type="text/css" />

يعني يه آي دي به اسم myCss به لينک بالا دادم.

جمعه 18 اسفند 1391, 16:56 عصر
bftarane

نقل قول: تغيير Theme بدون رفرش شدن صفحه

اون قسمت if رو بر داشتم از کدها اون مشکل برطرف شد. نمي دونم چرا در اين تالار امکان حذف پست وجود نداره.
جمعه 18 اسفند 1391, 17:33 عصر
exlord

نقل قول: تغيير Theme بدون رفرش شدن صفحه

راهنمای کامل این کار :
http://www.thesitewizard.com/javascr...e-sheets.shtml

نقل قول: تغيير Theme بدون رفرش شدن صفحه

سلام.
من سعي کردم با کمک لينک پست 5 اين کار رو انجام بدم ولي متأسفانه به نتيجه نرسيد البته با کليک روي لينک ها عوض ميشه css ولي مسئله اينه که با تغيير صفحه استايل باقي نمي مونه، خيلي جالبه حتي چک کردم ديدم کوکي هم ذخيره ميشه و مقدارش هم به درستي ست ميشه ولي نمي دونم چرا اين مشکل وجود داره
من با Asp.net کار مي کنم اول گفتم شايد چون از MasterPage دارم استفاده مي کنم اين طوره ولي اومدم با صفحه معمولي و همين طور صفحه html هم چک کردم فرقي نکرد.
فايلش رو ضميمه مي کنم لطفاً هر کس متوجه شد ايراد از کجاست راهنمايي کنه.
هر چي سعي کردم در اين تالار نتونستم ضميمه کنم، از لينکهاي زير ميتونيد دانلود کنيد
http://uplod.ir/7cffejb67i3j/WebSite1.zip.htm
http://www.4shared.com/zip/3aSB2BGk/WebSite1.html
....................................
و البته با کمک پست 2 اين کدها رو نوشتم که جواب هم ميده
<script type="text/javascript">

    $(document).ready(function () {

        // red

        $("#css-black").click(function () {

            var $ = document; // shortcut

            var cssId = 'myCss';  // you could encode the css path itself to generate id..



            var head = $.getElementsByTagName('head')[0];

            var link = $.createElement('link');

            link.id = cssId;

            link.rel = 'stylesheet';

            link.type = 'text/css';

            link.href = 'App_Themes/Black/StyleSheet.css';

            link.media = 'all';

            head.appendChild(link);



            setCookie("theme", 'App_Themes/Black/StyleSheet.css', 365);



        });



        // blue

        $("#css-blue").click(function () {

            مشابه کدهاي بالا

setCookie("theme", 'App_Themes/Blue/StyleSheet.css', 365);



        });



        // green

        $("#css-green").click(function () {

            مشابه کدهاي بالا

setCookie("theme", 'App_Themes/Green/StyleSheet.css', 365);





        });

    });





    function getCookie(c_name) {

        var i, x, y, ARRcookies = document.cookie.split(";");

        for (i = 0; i < ARRcookies.length; i++) {

            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));

            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);

            x = x.replace(/^\s+|\s+$/g, "");

            if (x == c_name) {

                return unescape(y);

            }

        }

    }



    function setCookie(c_name, value, exdays) {

        var exdate = new Date();

        exdate.setDate(exdate.getDate() + exdays);

        var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());

        document.cookie = c_name + "=" + c_value;

    }



    function checkCookie() {

        var theme = getCookie("theme");

        if (theme != null && theme != "") {

            var $ = document; // shortcut

            var cssId = 'myCss';  // you could encode the css path itself to generate id..



            var head = $.getElementsByTagName('head')[0];

            var link = $.createElement('link');

            link.id = cssId;

            link.rel = 'stylesheet';

            link.type = 'text/css';

            link.href = theme;

            link.media = 'all';

            head.appendChild(link);

        }

        else {

            

               

            

        }

    }

</script>
<body onload="checkCookie() ;">
در قسمت head هم همچين کدي نوشته بودم
<link href="App_Themes/Black/StyleSheet.css" rel="stylesheet" type="text/css" />
ولي فقط يه اشکال داره اونم اينه که مثلاً استايل سبز رو انتخاب کرده کاربر صفحهش هم سبز شده منتها وقتي کليک مي کنه بره يه صفحه ديگه قبل از اينکه صفحه بعدي به رنگ سبز ديده بشه حدود 1 ثانيه به رنگ سياه ديده ميشه يعني حدود 1 ثانيه اون استايلي که به صورت ثابت در head نوشته شده نشون داده ميشه به کاربر بعد سبز ميشه.
خودتون مي تونيد اين رو در سايتم چک کنيد http://www.bfportfolio.somee.com
اون بالاي سايت اون قسمت که نوشته Portfolio روي مربع آبي يا سبز کليک کنيد
بعد از منويي که زير باکس ورود هست منوي تماس با ما رو کليک کنيد خودتون متوجه مي شيد.

لطفاً راهنمايي کنيد.

نقل قول: تغيير Theme بدون رفرش شدن صفحه

اون صفحه ای رو که دادم درست بررسی نکردین ... فقط اسم متد هارو برداشتین ...

نقل قول:

ولي فقط يه اشکال داره اونم اينه که مثلاً استايل سبز رو انتخاب کرده کاربر صفحهش هم سبز شده منتها وقتي کليک مي کنه بره يه صفحه ديگه قبل از اينکه صفحه بعدي به رنگ سبز ديده بشه حدود 1 ثانيه به رنگ سياه ديده ميشه يعني حدود 1 ثانيه اون استايلي که به صورت ثابت در head نوشته شده نشون داده ميشه به کاربر بعد سبز ميشه.

توی Page_Load (سمت سرور) چک کنین اگه cookie وجود داره css مربوطه رو به صفحه اضافه کنین ...
این کدی که نوشتم الان کاملا درست کار میکنه
من VS نصب نداشتم قسمت سرورشو با php نوشتم ولی فکر نکنم تو تبدیلش مشکلی داشته باشین چیزه سادییه ...



$user_selected_theme = $_COOKIE['user_selected_theme'];

$css = '';

if ($user_selected_theme)

    $css = "<link rel='stylesheet' type='text/css' href='{$user_selected_theme}.css'>";

?>

<html>

<head>

    <?=$css?>

    <script type="text/javascript" src="../jquery.1.7.2.js"></script>

    <script type="text/javascript">

        var themes = ['black', 'blue', 'red'];

        $(document).ready(function () {

            $('.theme_switch').click(function () {

                disable_themes();

                switch_theme($(this).attr('id'));

            });

        });

        function disable_themes() {

            for (var i = 0; i < themes.length; i++) {

                var css = $('#theme_' + themes[i]);

                if (css.length != 0) {

                    $(css).prop('disabled', true);

                }

            }

        }

        function switch_theme(theme) {

            var theme_css = $('#theme_' + theme);

            if (theme_css.length != 0) {

                $(theme_css).removeAttr('disabled');

            }

            else {

                theme_css = $('<link rel="stylesheet" type="text/css">')

                        .attr('href', theme + '.css')

                        .attr('id', 'theme_' + theme);

                $('head').append(theme_css);

            }

            set_cookie('user_selected_theme', theme, 365);

        }

        function set_cookie(cookie_name, cookie_value, lifespan_in_days, valid_domain) {

            // http://www.thesitewizard.com/javascripts/cookies.shtml

            var domain_string = valid_domain ?

                    ("; domain=" + valid_domain) : '';

            document.cookie = cookie_name +

                    "=" + encodeURIComponent(cookie_value) +

                    "; max-age=" + 60 * 60 *

                    24 * lifespan_in_days +

                    "; path=/" + domain_string;

        }

        function get_cookie(cookie_name) {

            // http://www.thesitewizard.com/javascripts/cookies.shtml

            var cookie_string = document.cookie;

            if (cookie_string.length != 0) {

                var cookie_value = cookie_string.match(

                        '(^|;)[\s]*' +

                                cookie_name +

                                '=([^;]*)');

                return decodeURIComponent(cookie_value[2]);

            }

            return '';

        }

    </script>

</head>

<body>

<a class="theme_switch" id="black">Black</a>

<a class="theme_switch" id="blue">Blue</a>

<a class="theme_switch" id="red">red</a>

</body>

</html>

شنبه 19 اسفند 1391, 09:31 صبح
bitcob589

نقل قول: تغيير Theme بدون رفرش شدن صفحه

نقل قول:

قسمت سرورشو با php نوشتم ولی فکر نکنم تو تبدیلش مشکلی داشته باشین چیزه سادییه

اگر امکان دارد با C#‎‎‎ بنویسید
شنبه 19 اسفند 1391, 16:01 عصر
bftarane

نقل قول: تغيير Theme بدون رفرش شدن صفحه

..........................................

نقل قول: تغيير Theme بدون رفرش شدن صفحه

نقل قول:

نوشته شده توسط bitcob589

اگر امکان دارد با C#‎‎‎ بنویسید

namespace WebApplication1

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            HttpCookie user_selected_theme = Request.Cookies["user_selected_theme"];

            if (user_selected_theme != null)

            {

                HtmlGenericControl css = new HtmlGenericControl();

                css.TagName = "link";

                css.Attributes.Add("type", "text/css");

                css.Attributes.Add("rel", "stylesheet");

                css.Attributes.Add("href", "themes/" + user_selected_theme.Value + ".css");



                css_theme.Controls.Add(css);

            }

        }

    }

}

<%@ Page Language="C#‎" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>



<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <asp:PlaceHolder ID="css_theme" runat="server"></asp:PlaceHolder>

    <title></title>

    <script type="text/javascript" src="jquery.1.7.2.js"></script>

    <script type="text/javascript">

        var themes = ['black', 'blue', 'red'];

        $(document).ready(function () {

            $('.theme_switch').click(function () {

                disable_themes();

                switch_theme($(this).attr('id'));

            });

        });

        function disable_themes() {

            for (var i = 0; i < themes.length; i++) {

                var css = $('#theme_' + themes[i]);

                if (css.length != 0) {

                    $(css).prop('disabled', true);

                }

            }

        }

        function switch_theme(theme) {

            var theme_css = $('#theme_' + theme);

            if (theme_css.length != 0) {

                $(theme_css).removeAttr('disabled');

            }

            else {

                theme_css = $('<link rel="stylesheet" type="text/css">')

                        .attr('href', 'themes/'+ theme + '.css')

                        .attr('id', 'theme_' + theme);

                $('head').append(theme_css);

            }

            set_cookie('user_selected_theme', theme, 365);

        }

        function set_cookie(cookie_name, cookie_value, lifespan_in_days, valid_domain) {

            // http://www.thesitewizard.com/javascripts/cookies.shtml

            var domain_string = valid_domain ?

                    ("; domain=" + valid_domain) : '';

            document.cookie = cookie_name +

                    "=" + encodeURIComponent(cookie_value) +

                    "; max-age=" + 60 * 60 *

                    24 * lifespan_in_days +

                    "; path=/" + domain_string;

        }

        function get_cookie(cookie_name) {

            // http://www.thesitewizard.com/javascripts/cookies.shtml

            var cookie_string = document.cookie;

            if (cookie_string.length != 0) {

                var cookie_value = cookie_string.match(

                        '(^|;)[\s]*' +

                                cookie_name +

                                '=([^;]*)');

                return decodeURIComponent(cookie_value[2]);

            }

            return '';

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <a class="theme_switch" id="black">Black</a>

            <a class="theme_switch" id="blue">Blue</a>

            <a class="theme_switch" id="red">red</a>

        </div>

    </form>

</body>

</html>

شنبه 19 اسفند 1391, 20:02 عصر
bitcob589

نقل قول: تغيير Theme بدون رفرش شدن صفحه

یک سوال مبتدی:
در کد بالا از کوکی استفاده است آیا هکر ها می توانند با دستکاری درون کوکی می توانند به سایت آسیب برسانند
سه شنبه 22 اسفند 1391, 23:31 عصر
s.hoseinpoor

نقل قول: تغيير Theme بدون رفرش شدن صفحه

کوکی شامل اطلاعات بی ارزشه!
مثلا چی میشه اگه منه هکر بیام کوکی تم سایتی که رو سیستمم لود شده رو تغییر بدم! فوقش رنگش میپره! یام لود نمیشه...
یک شنبه 18 فروردین 1392, 10:19 صبح
ahmad156

نقل قول: تغيير Theme بدون رفرش شدن صفحه

دوست عزیز شما وقتی گزینه "مرا به خاطر بسپار" در صفحه ورود سایت مورد نظر(مثلا yahoo) رو انتخاب میکنین و دفعه بعد شما رو به صفحه login نمیفرسته فکر میکنین کجا ذخیره میشه این اطلاعات که دوباره شما رو میشناسه؟
اگر کسی به این کوکی شما دسترسی داشته باشه خب .......