当前位置: 首页 > 站长文章 > 织梦cms > 正文页面

DEDECMS织梦系统页面添加日历控件

DEDECMS管理系统页面添加自定义功能,类似博客系统的日历插件功能,通过相应的js和css文件来构建自己风格的日历显示。sCD网站目录_网站网址收录与提交入口

准备工具/原料 sCD网站目录_网站网址收录与提交入口

1.dedecms安装环境sCD网站目录_网站网址收录与提交入口

2.日历控件的js和csssCD网站目录_网站网址收录与提交入口

下载日历控件所需的js文件和css文件,下载路径如下。http://110.85.5.26:81/code/wz/日历控件.zipsCD网站目录_网站网址收录与提交入口

内容文件包括:jquery.datetimepicker.js,jquery.js,jquery.datetimepicker.csssCD网站目录_网站网址收录与提交入口

其中的jquery.js可选用任何版本,例如本次我使用的是jquery-1.11.1.min.js文件sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

打开dedecms的文件系统,找到decmstempletsdefault路径,下载的压缩包中的文件要放在对应的default文件夹目录下。sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

打开要插入日历控件的模板页面,例如index.html页面,引入要使用的js和css文件。sCD网站目录_网站网址收录与提交入口

<link href="{dede:global.cfg_templets_skin/}/style/jquery.datetimepicker.css" rel="stylesheet" media="screen" type="text/css" />sCD网站目录_网站网址收录与提交入口

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-1.11.1.min.js"></script>sCD网站目录_网站网址收录与提交入口

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.datetimepicker.js"></script>sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

在本页<body>结尾标签页添加如下代码:sCD网站目录_网站网址收录与提交入口

<script>sCD网站目录_网站网址收录与提交入口

    $('#datetimepicker3').datetimepicker({sCD网站目录_网站网址收录与提交入口

        inline:truesCD网站目录_网站网址收录与提交入口

    });sCD网站目录_网站网址收录与提交入口

</script>sCD网站目录_网站网址收录与提交入口

一定要添加在页尾,因为先行加载input的标签,然后再渲染标签的效果,显出日历控件的模样。sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

打开页面,查看效果图。sCD网站目录_网站网址收录与提交入口

 sCD网站目录_网站网址收录与提交入口

sCD网站目录_网站网址收录与提交入口

  

此文由 网站目录_网站网址收录与提交入口 编辑,未经允许不得转载!:

相关文章