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

Question

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

我将在 CodeIgniter 中为 PHP 逻辑工作，并结合通常的.. CSS、jQuery、mySQL。 PHP是课程的要求；我选择在 CI 中做这件事是因为……我想学习这个框架。在我们的“学校生涯”的这一点上，我们不得不炫耀我们能做些什么。

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

编辑 2：我希望滑块是动态的。如果用户滑动到上个月或下个月，或单击按钮，我希望它加载上个月/下个月的日期并显示这些日期。另外，假设我们在一个月的 26 号，滑块必须显示本月的 10-31 和下个月的 1-10。我想我还必须更改我的月份指示（不像这里的图像），以便用户知道另一个月份什么时候开始（我会告诉他们月份的名称）。

这是一张图片（不要介意日期数字被弄乱了，我懒得在 Photoshop 中正确地这样做。将修复该 tomo）：

我一直在研究 jQuery UI 滑块。我想我必须从数据库或使用 PHP 中获取天数？我想cal_days_in_month 函数在这里可以派上用场。当用户单击箭头或向左或向右滑动时，我不希望页面刷新。我应该在那里使用ajax调用吗？老实说，我不太确定如何实现这一点。这些数字也是指向显示在此栏下方的日历类型视图的链接。 我可以为此使用 CI 日历类吗？还是更适合成熟的谷歌日历类型的日历？我认为this screencast 可能有用吗？

如果可能的话，有人可以提供一些关于如何开始工作以及我可以使用哪些插件/等的见解吗？老实说，我不确定从哪里开始。我确信我能以某种方式解决这个问题，但我想通过这里的一些帮助来获得启动会很好。我看到的主要问题是滑块/下一个/上一个东西和在上/下个月的日子里加载。

提前致谢。

编辑：我意识到有些人可能会说/想“天哪，你为什么不直接使用你拥有的技能，而不是尝试一些你必须问我们的事情！”。嗯，这是因为我实际上想在做这个项目时学习一些东西。请记住，我不是在这里要求代码行，我只是要求对从哪里开始以及使用什么东西有所了解；也许可以帮助我的小sn-ps。谢谢。

更新：

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

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

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

然后，助手会在我看来回应我的日常价值观。这是好还是坏的做法？当我想开始为此编写代码时，我一直在思考错误的方式。我想在控制器的某个地方有一个函数，然后从视图中调用它，但我读到我不应该那样做。 .我不得不颠倒我的逻辑。我发现我很难理解我必须通过将数据数组发送到我的视图（从我的控制器）来做到这一点，所以我选择创建帮助程序。好的？坏的？有什么提示、我应该阅读的资源、我应该观看的截屏视频吗？非常感谢。

Answer 1

这对我来说似乎很简单。我现在真的没有时间写完整的东西。但这是我要采取的步骤。

1) 创建一个模型来获取一个月的所有任务，并使用它来创建{date}=>{num_tasks} 的数组，例如{'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) 编写一个具有 javascript 函数的 html 页面，以使用 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 和 next 按钮与类似的东西一起使用

$('#prev_button').click(function() {
    fill_calendar(current_month - 1 , tyear);
    // you will probly need to make this calculation smarter than just minus 1
});

Answer 2

如果您希望您的系统是动态的，关键是要缩短数据传输时间。因此，正如 icchanobot 所说，使用 Ajax 发送特定月份的请求。使用获取：

'some_controller?m=' + month + '&y=' + year

甚至：

'some_controller?next' // or previous

控制器必须获取正确月份的数据，但不能发回整个月份 - 只需以尽可能紧凑的格式发送显示所需的数据。您可以查询在该月的哪几天运行了多少事件：

选择日期，计数（事件） FROM 事件表 'yyyy-mm-01' 和 'yyyy-mm-31' 之间的日期 按天分组 按天订购；

查询需要适应您的数据结构 - 使用函数从完整日期获取日期，并且可能使用索引以便查询快速返回数据。

然后控制器返回一个尽可能短的字符串，相关数据按天顺序排序：

1=3,15=1,29=2

这意味着“1st=3 事件，15th=1 事件，29=2 事件”。如果您不想要事件的数量，那么“1,15,2”就足够了。不传输空天。

数据由网页上的 ajax 事件处理程序接收，您使用 split 对其进行解析，然后使用循环填充滑块。

在一个非常动态的应用程序中，最大的阻力是当您反复请求下个月和下个月时它是否会变慢。 一些技巧：

• 在等待数据时更新显示；您发送查询，在处理查询时，您可以将月份滑动到视图中，显示正确的天数，看起来已禁用，以便用户立即知道他们将获得他们的数据，并且数据正在进行中。然后当数据到来时，填充并突出显示。虽然不是，但它会感觉瞬间。
• 避免处理用户不再需要的信息。如果有人点击“下一步”三次，他们想要 7 月的数据，而不是 5 月、6 月和 7 月的数据。不要处理未显示的内容。
• 缓存您已经询问过的数据，除非您希望系统动态返回服务器以获取日历的最新状态。您已要求提供 5 月和 6 月的数据，但未显示；当用户点击“返回”时，不要再次询问该数据。

祝你好运！

Answer 3

我真的不明白这有什么复杂的......

如果您只是使用 jQuery UI DataPicker 并修改 js 文件，以便将日期存储在滑块中，然后将数据放入 jQuery UI 滑块中，您应该几乎拥有所需的内容。