javascript - 求用户个性定制皮肤的原理?
天蓬老师
天蓬老师 2017-04-11 11:37:11
0
6
195

想要实现用户可以自定义风格的功能,比如用户可以自己设置边框的颜色、粗细,菜单底色等,风格由用户自己去设计,要怎么去实现,麻烦各位大神给点思路。想过使用不同的CSS文件来进行替换,但是自由度太低了。

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全員に返信 (6)
刘奇

如果皮肤形式的, 我想到的和楼上差不多, 通过css不同的Container.class...

如果用户定制的话, 建议提交到后台, 存数据库(user.style字段).
用户登录时读取, 用户保存时(触发保存事件时)update该字段.

いいねを押す+0
    伊谢尔伦

    之前没有看清问题:

    还是没做过,没研究过,不过有想法,不知道是不是正规的做法:

    有两个想法:

    第一个

    如果用户可以自定义的话,样式可以用内联,这样子才能确保样式不会因为优先级被其他的样式覆盖掉。

    当用户修改的时候,保存一个selector 和 style的值到数据库中。

    等打开页面的时候,再通过js把style添加到对应的dom上

    第二个

    如果要修改的dom是固定的,那可以给每一个dom上面添加一个data-className之类的东西,就是对应的selector,确保selector的优先级足够。

    修改的时候,还是用内联来修改,保存的时候,遍历所有的内联样式,然后用之前的classname来组成一个样式表,保存到数据库里面。

    用户打开页面的时候,直接把样式表贴到页面上就行了。


    至于怎么去修改这么样式。。。想想都头疼。。。不知道网上有没有现成的插件。。。


    都是想法。。。谨慎参考。。。期待其他人能提供成熟的解决方案。。。


    之前的答案

    没做过,没研究过,不过有想法,不知道是不是正规的做法:

    既然不想替换CSS文件,那就通过修改body上面的class来进行样式切换喽,css代码就可以写成下面这种的:

    用scss方便点:

    /**公用的css**/ button {} a {} .title {} /**针对theme1*/ .theme1 { button {} a {} .title {} } /**针对theme2*/ .theme2 { button {} a {} .title {} }
    いいねを押す+0
      迷茫

      可以参考一下博客园的方法.
      每个用户有一个自定义样式的样式表.
      用户自定义的样式放里面, 引入样式的时候,
      用户的样式表放默认样式表后面,就可以覆盖默认样式.

      いいねを押す+0
        大家讲道理

        我也没做过,只是猜测是不是替换不同的css文件,也就是改变link的href吧

        いいねを押す+0
          黄舟

          自定义皮肤 建议自己写好配置 让用户选择 而不是这种高自由度的用户自己配置 如果我是用户 我不会浪费时间去搞这个。建议考虑好在做

          いいねを押す+0
            巴扎黑

            提供一个想法,以切换CSS 样式, 这个CSS样式是用户设置之后后台生成的!

            いいねを押す+0
              最新のダウンロード
              詳細>
              ウェブエフェクト
              公式サイト
              サイト素材
              フロントエンドテンプレート
              私たちについて 免責事項 Sitemap
              PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!