首页 > 家居生活 > 健康保养 >

如何利用My97 DatePicker切换皮肤

来源:互联网 2023-02-20 16:01:05 版权归原作者所有,如有侵权,请联系我们

My97 DatePicker是一个日历插件,自身自带两种皮肤,但是有时还是不够用,需要再利用其它的自定义的皮肤。如果想要My97 DatePicker日期控件换成另外一种皮肤,需要到官网上下载对应的皮肤样式文件。下面利用一个实例说明My97 DatePicker日历控件切换皮肤,操作如下:4HR办公区 - 实用经验教程分享!

如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

工具/原料

  • My97 DatePicker
  • HBuilder
  • 浏览器
  • 截图工具
  • HTML
  • CSS

方法/步骤

  • 1

    第一步,创建静态页面skin.html,并引入My97 DatePicker相关的JS文件和jquery文件,注意引入js文件的先后顺序,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 2

    第二步,在主体代码内插入一个div标签元素,并在div元素内插入input输入框,给div标签一个id,input设置class属性,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 3

    第三步,预览该静态页面,这时可以看到日历控件的皮肤,这是日期控件默认的皮肤,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 4

    第四步,在onclick事件的WdatePicker添加皮肤skin:'whyGreen',修改日期控件皮肤,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 5

    第五步,再次预览页面,这时日历控件的皮肤由原来的换成了绿色的,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 6

    第六步,再次切换掉skin属性,再次预览出现报错,说明该皮肤不存在需要下载,到指定为官网上下载皮肤文件,如下图所示:4HR办公区 - 实用经验教程分享!

    如何利用My97 DatePicker切换皮肤4HR办公区 - 实用经验教程分享!

  • 6
  • 注意事项

    • 注意My97 DatePicker自定义皮肤应用
    • 注意日期控件皮肤应用和切换方法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4HR办公区 - 实用经验教程分享!


    标签: 皮肤CSS利用

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号