Web 应用程序 - 显示月份中日期的滑块功能

2024-03-13

对于学校项目,我们必须构建一个网络应用程序。我将创建一些东西,让人们可以跟踪他们的课程、家庭作业和空闲时间。计划表/日历。 (我在这里听起来真的很蹩脚,但是嘿,我累了,英语不是我的母语;))

我将在 CodeIgniter 中处理 PHP 逻辑,并结合通常的 CSS、jQuery、mySQL。 PHP 是该课程的要求;我选择在 CI 中执行此操作,因为……我想学习该框架。我们必须展示我们在“学校生涯”的这个阶段可以做些什么。

无论如何,我想询问一些关于我想要实现的功能的见解。在我的页面顶部,我想显示一个包含该月中的天数的栏。在日期数字下方,我将通过一些点来显示当天添加了多少任务。当用户单击上一个或下一个时,我想显示上个月/下个月的日子。我还想要在该框下方有某种滑块,用户可以使用它左右滑动,并以这种方式循环播放日子。我希望这是有道理的?

编辑2:我希望滑块是dynamic。如果用户滑动到上个月或下个月,或者单击按钮,我希望它加载上个月/下个月的日期并显示这些日期。另外,假设现在是每月 26 日,滑块必须显示本月 10-31 日和下个月 1-10 日之类的内容。我想我还必须更改我的月份指示(不像此处的图片所示),以便用户知道另一个月份何时开始(我将向他们显示月份的名称)。

Here's a picture (don't mind the day numbers being messed up, I was lazy doing that correctly in Photoshop. will fix that tomo): Day bar, dont mind the numbers

我一直在研究 jQuery UI 滑块。我想我必须从数据库或使用 PHP 获取天数?我猜是月内天数 http://php.net/manual/en/function.cal-days-in-month.php函数在这里可以派上用场。当用户点击箭头或向左或向右滑动时,我不希望页面刷新。我应该在那里进行ajax调用吗?老实说,我不太确定如何实现这一点。这些数字还链接到显示在该栏下方的日历类型视图。 我可以使用 CI Calendar 类来实现此目的吗?或者更适合成熟的谷歌日历类型的日历?我想这个截屏视频 http://net.tutsplus.com/tutorials/php/codeigniter-from-scratch-the-calendar-library/也许有用吗?

如果可能的话,有人可以提供一些关于如何开始处理这个问题以及我可以使用哪些插件/等的见解吗?老实说,我不知道从哪里开始。我确信我可以以某种方式解决这个问题,但我想通过这里的一些帮助来启动会很好。我看到的主要问题是滑块/下一个/上一个事物以及在上个月/下个月的几天中加载。

提前致谢。

编辑:我意识到有些人可能会说/想“天啊,你为什么不使用你拥有的技能而不是尝试一些你必须问我们的事情!”。嗯,这是因为我实际上想在做这个项目的同时学到一些东西。请记住,我在这里并不是要求输入几行代码,我只是要求了解从哪里开始以及使用什么东西;也许一些小片段可以帮助我。谢谢。

UPDATE:

我有一个非常基本的“日间酒吧”。仍然没有滑块,上一个和下一个按钮也不起作用,但是嘿..至少它动态地填充它。它显示当天之前的 5 天,然后是本月直到月底。剩下要填写的内容都会填满下个月的日子。非常基本。不过,我确实有几个问题!

自从昨天有人告诉我,我按照自己的方式做一些事情正在打破设计模式,我对我现在的工作方式非常偏执,我真的很想得到“CodeIgniter pro”的一些反馈。为了填写“日栏”,我使用几种方法创建了一个助手。 (一种动态填充您在图片中看到的“月年”内容的方法,另一种方法 init() 加载日期列表,就像我之前解释的那样)。我在控制器中加载了这个助手,现在我正在使用我认为的方法:

    <ul>
        <?php
            init($current_day_of_month, $current_month, 
                          $current_year, $days_in_current_month, $show_history);
        ?>
    </ul>

然后,帮助者会在我看来呼应我的日常价值观。这是好还是坏做法?当我想开始为此编写代码时,我一直以错误的方式思考。我想在控制器中的某个位置有一个函数,然后从视图中调用它,但我读到我不应该这样做。 ..我必须扭转我的逻辑。我发现很难接受这样一个事实:我必须通过将数据数组发送到我的视图(从我的控制器)来完成此操作,因此我选择创建助手。好的?坏的?有什么我应该阅读的提示、资源、我应该观看的截屏视频吗?非常感谢。


这对我来说似乎很简单。我现在真的没有时间写全部内容。但这是我将采取的步骤。

1)创建一个模型,获取一个月的所有任务,并使用它创建一个数组{date}=>{num_tasks} e.g. {'1'=>3,'2'=>1, "3"=>0, ...}。 //提示:使用常规 SQL 计数或仅循环并统计它们。

2) 创建一个控制器函数以将此数组作为 JSON 返回。像这样的事情:

public function get_month($month, $year) {
    $tasks = $this->task_model->get_each_days_taskcount($month, $year);
    $json = json_encode ($tasks);
    echo $json;
}

3) 编写一个 html 页面,其中包含一个 javascript 函数,用于通过 AJAX 调用此控制器函数。就像是:

function fill_calendar(month, year) {
$.get('some_controller/get_month/' + month + '/' + year, function(data) {
    // parse the JSON then
    // do something with the data here like $('#calendar').append();
});
}

4)本月加载如下内容:

$(function() {
    var d = new Date();
    var tmonth = d.getMonth();
    var tyear = d.getFullYear();
    fill_calendar(tmonth, tyear); // populate with this month
});

5)使上一个和下一个按钮可以与类似的东西一起使用

$('#prev_button').click(function() {
    fill_calendar(current_month - 1 , tyear);
    // you will probly need to make this calculation smarter than just minus 1
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web 应用程序 - 显示月份中日期的滑块功能 的相关文章

  • 将 Node.js(用于实时通知)添加到现有 PHP 应用程序

    我有一个现有的 PHP 应用程序 我需要向其中添加实时通知 为了实现这一点 我安装了node js 打算添加socket io以实现所有实时功能 然而 尽管在过去的三个小时里研究并试图弄清楚如何将两者结合起来 但我发现自己并没有更接近于获得
  • 给定两个日期,在 PHP 中查找工作日数的最佳方法是什么?

    标题几乎是不言自明的 给定两个日期 使用 PHP 查找工作日数的最佳方法是什么 工作日为周一至周五 例如 我如何知道中间有 10 个工作日31 08 2008 and 13 09 2008 datefrom strtotime datefr
  • 测试 jQuery UI 工具提示是否打开

    我正在尝试控制自动打开和关闭jQuery 工具提示 http api jqueryui com tooltip 如何测试工具提示的当前状态是否为打开 我正在使用所有内容的最新版本 Thanks 您可以尝试检查是否有任何课程ui toolti
  • 将字符串(是一个函数)转换回 Javascript 中的函数

    我在下面将此函数作为字符串 我如何将其转换回函数 我正在从 JQuery 事件中提取事件处理程序 我想将它们存储为字符串 然后将它们转换回来 因为它们将保存在 mySQL 中 function if GActiveClick return
  • ASCII“../”是 PHP 中指示目录遍历的唯一字节序列吗?

    我有一个 PHP 应用程序 它使用 GET参数来选择文件系统上的 JS CSS 文件 如果我拒绝输入字符串包含的所有请求 或者可见 7 位 ASCII 范围之外的字节 当路径传递到 PHP 的底层 基于 C 文件函数时 这是否足以防止父目录
  • 数据库中的持久日期不等于检索日期

    我有一个具有 Date 属性的简单实体类 此属性对应于 MySQL 日期时间列 Entity public class Entity Column name start date Temporal TemporalType TIMESTAM
  • MySQL中如何存储小数?

    我尝试过将 DECIMAL 与 2 2 一起使用 但它不允许我使用它 我只想存储一个数字 例如 7 50 或 10 50 我需要将这两个数字保留在小数点后 但是当我刷新数据库时 它会将值重置为 0 99 有什么建议么 第一个参数DECIMA
  • 具有挑战性的问题 - 使用 PHP 对 XML 数据进行排序

    我有 xml 文件 其中包含大量产品数据 我需要根据我的字段 ProductRange 的数据对我的产品进行排序 ProductRange urldecode GET Range XML 文件数据
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这
  • Php 转换 GMT 格式的时间

    我有这个字符串2012 06 27 16 17 06我想将其转换为 GMT 格式 我怎样才能做到这一点 多谢 Use gmdate http php net manual en function gmdate php 使用以下命令将当前日期
  • 如何使用 Jquery .animate() 函数创建连续滚动内容? [复制]

    这个问题在这里已经有答案了 可能的重复 在jquery中实现圆形滚动条 https stackoverflow com questions 812049 implementing circular scroller in jquery 我想
  • knockoutjs通过点击事件获取元素id

    我正在使用 knockoutjs 目前我认为有些东西看起来像这样 img src images image1 png 这允许我获取视图模型中的元素 ID pressedTab function tab console log Element
  • 使用 Apache 允许 Glassfish 和 PHP 在同一服务器中协同工作

    是否可以建立从 Java 到 php 文件的桥梁 我有一个用 Java 编写的应用程序 我需要执行http piwik org http piwik org 这是用 PHP 编写的 在服务器中 我正在运行 PHP 但无法从浏览器访问 php
  • 这个 JQuery 指令做什么 $(function(){...}) [重复]

    这个问题在这里已经有答案了 我最近一直在研究JQuery 尽管我知道一些东西 但书上有这样一句话我根本无法理解 function current entry 1 有谁知道这条线是如何工作的以及它的作用是什么 它类似于 JQuery 函数中的
  • JsGrid 将嵌套对象加载到表中

    我正在 Django 中开发一个 Web 项目并使用 jsGrid 我遇到了问题并且找不到解决方案 我有一个嵌套的 JSON 数据 它是通过组合多个数据库表记录创建的 这是我的 JSON count 3 results personnel
  • Javascript/jQuery 外部高度()

    Does idOfLememt outerHeight 对所有浏览器产生相同的结果 IE7 有什么不同吗 只要去http api jquery com outerHeight http api jquery com outerHeight
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • Composer 安装要求

    我正在尝试将 Composer 安装到 Laravel 项目中 当我做的时候sudo composer install在项目目录中它显示了两个错误 Problem 1 Installation request for simplesoftw
  • 无法删除数据库 mysql:错误 3664 (HY000)

    我的应用程序中有一个名为X Files 我想要drop它 但每当我运行命令时drop database X Files我收到以下错误 mysql gt drop database X Files ERROR 3664 HY000 Faile
  • ASP.Net 4.0 与 TinyMCE 和 XML 编码在回发时重新编码内容

    我有一个基于 ASP NET 4 0 的 CMS 我在其中通过 jQuery 使用 TinyMCE 3 4 来编辑一个文本框 除此之外 我还有其他几个文本框 页面上还有另一个下拉列表 用于控制内容类型 该控件启用了自动回发并设置有关所选项目

随机推荐

  • D3 鼠标事件——单击和拖动结束

    在 D3 中 如果您定义了这样的拖动函数 var drag d3 behavior drag on drag function alert drag on dragend function alert dragEnd 您确实不能执行以下操作
  • 如何在Android中的地图视图中获取3D建筑视图?

    我使用了地图设置 googleMap setBuildingsEnabled true 但这不起作用 大约一个月前 它运行良好 附上屏幕截图以供参考 这是我一个月前得到的观点 现在地图显示 2D 视图 None
  • 在 Android TV 模拟器上运行时缺少 MainActivity 错误

    我创建了一个示例 Android TV 应用程序用于测试目的 我按照以下文档进行操作 https developer android com training tv start start https developer android c
  • Netbeans + 德比 + 休眠

    我正在跟进http netbeans org kb docs java hibernate java se html http netbeans org kb docs java hibernate java se html学习在 Netb
  • 一次从目录导入所有模块 [NODE]

    MyApp main js modules a js b js c js d js e js 在我的 NodeJS 应用程序中 如何一次性导入 main js 文件中的所有自定义模块 a b c d e 我有一长串模块 我不想单独导入它们
  • JAX-WS 从 jar 加载 WSDL

    我正在编写一个胖客户端 它使用 SOAP 服务来实现某些功能 错误报告等 我的 JAX WS 工作正常 但默认情况下 至少在 netbeans 中 它会在每次初始化服务时从远程服务器获取 WSDL 我希望这有助于提供一些版本控制支持等 但这
  • SQL Select 语句中的动态列,保留“未定义”值

    这是基于我之前的问题的一个新问题 该问题被标记为问题的 重复 mySQL 使用三个表中的数据和列创建新表 https stackoverflow com questions 26665499 mysql create a new table
  • 使用 React 定期运行 fetch

    我有一个包含不同反应组件的网格 所有组件都是独立的 因为它们获取自己的数据并显示它 我想以某种方式让它们每 15 分钟自动重新获取和更新一次 我的第一个想法是 HOC 但是随着更新的钩子和功能组件的出现 我尝试了一些使用钩子的东西 所以我已
  • 何时抑制 PHP 中的错误

    我有一些可能已定义或未定义的变量 isLoggedIn布尔值 我正在尝试清除错误消息 我想知道是否有任何理由不应该使用错误抑制运算符 if isLoggedIn 或者我是否应该首先检查变量是否存在 if isset isLoggedIn a
  • javafx.scene.control.TableColumn 无法转换为 javafx.scene.control.TableColumn$CellDataFeatures

    我在填充 javafx tableview 时遇到问题 我目前正在开发一个基于 GUI 的事件管理工具 适用于大学 并且我一直在尝试填充 Tableview 列表 该列表应该位于边框窗格布局的中心 这是我的代码 它很长的想法 它的主窗口函数
  • C 中正弦函数的实现不起作用

    我尝试用 C 语言实现正弦函数 但得到了奇怪的结果 以下是我用来计算正弦的三个函数 define PI 3 14159265358979323846 define DEPTH 16 double sine long double long
  • 不支持混合类型

    请看一下下面的头文件 pragma once using namespace UsbLibrary ref class MissileLauncher public MissileLauncher void private Bytes us
  • 缩小名称和变量名称

    我知道缩小负责删除 空白字符 换行符 注释 有时还有块分隔符 不久前我读到它还负责缩短变量名称 但我一直认为这是混淆的一部分 我对吗 或者现在缩小库也包含这样的功能 好吧 由于缩小的目标是尽可能减少代码的大小 因此重命名变量是实现这一目标的
  • Angular CDK的OverlayModule,cdk-overlay-pane不会将位置设置为绝对?

    我正在使用 Angular 的 CDK 的 Overlay 模块 我只是找不到将position absolute添加到覆盖层的方法 该模块将收到一个top and a left与连接元素位置匹配的位置 但覆盖层不会接收到position
  • Pandas _metadata的DataFrame持久化错误

    我终于弄清楚如何使用 DataFrame 中的 metadata 一切正常 除了我无法将其持久化 例如 hdf5 或 json 我知道它有效 因为我复制框架 而 metadata 属性复制到 非 metadata 属性则不然 example
  • CakePHP-cakeDC搜索插件实现

    我目前正在尝试找出一种在我的应用程序中实现 cakeDC 搜索插件的方法 但我发现很难理解在我可以让它在我的应用程序中 很好地 工作之前需要完成的管道工作 需要考虑的事项 搜索必须是 实时搜索 检索到的记录需要分页 搜索将使用选定的条件 i
  • Fn 类型未实现 Size

    我想构建一个将列表分成两部分的函数 一个列表包含原始列表中满足特定谓词的元素 另一个列表包含所有不满足特定谓词的元素 以下是我的尝试 fn split filter
  • 除了 Hibernate Validator 的 @SafeHtml 之外,还有哪些替代方案来验证字符串?

    正如 JavaDocs 中所述 它将在未来版本中删除 是否有任何替代库可以通过注释类似地工作 让我们首先解释一下弃用的原因 由于这一限制 我们最近遇到了安全问题 CVE 这是由于我们实施中的一个错误 但它让我们意识到这是非常脆弱的 并且在安
  • Pandas:将列中的值与唯一值相加

    我有数据框 ID time coeff category 111 12 1 5 shop 111 15 1 5 shop 222 12 0 8 shop 222 18 0 8 shop 我需要得到 category unique users
  • Web 应用程序 - 显示月份中日期的滑块功能

    对于学校项目 我们必须构建一个网络应用程序 我将创建一些东西 让人们可以跟踪他们的课程 家庭作业和空闲时间 计划表 日历 我在这里听起来真的很蹩脚 但是嘿 我累了 英语不是我的母语 我将在 CodeIgniter 中处理 PHP 逻辑 并结