Web应用程序 - 滑块显示几个月的功能 [英] Web app - slider showing days of the months feature

问题描述

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

For a school project we have to build a web app. I'll be creating something where people can keep track of their classes, their homework, and their free time. A planner/calendar. (I'm making it sound really lame here but hey, I'm tired and English isn't my first language ;) )

我会在CodeIgniter工作对于PHP逻辑，结合通常的CSS，jQuery，mySQL。 PHP是课程的要求;我选择这样做在CI因为好..我想学习框架。我们必须炫耀我们在我们的学校生活这一点上我们能做什么。

I'll be working in CodeIgniter for the PHP logic, combined with the usual.. CSS, jQuery, mySQL. PHP is a requirement for the course; I chose to do this in CI because well.. I wanted to learn the framework. We kind of have to show off what we can do at this point of our 'school career'.

无论如何，我想询问有关我要实现的功能的一些见解。在我的页面顶部，我想显示一个包含一个月的日期的栏。在天数之下，我将显示在那天通过一些点添加了多少任务。当用户点击上一个或下一个，我想显示上一个/下个月的天。我还想在这个框下面有一些滑块，用户可以使用它来左右滑动，并循环通过这些天。我希望有意义吗？

Anyway, I would like to ask for some insights regarding a feature I want to implement. At the top of my page, I would like to show a bar which contains the days of the month. Below the day number, I would be showing how many tasks are added on that day by means of some dots. When the user clicks previous or next, I want to show the previous/next month's days. I also want some sort of slider underneath this box which the user can use to slide left and right, and cycle through the days that way. I hope that made sense?

编辑2：我想让滑块动态。如果用户滑动到上一个月或下一个月，或点击按钮，我希望它加载前/下个月的天数，并显示这些。另外，说我们在一个月的26号，滑块将不得不显示本月10-31和下个月的1-10。我想我也必须改变我的月份指示（不像这里的图像），以便用户知道另一个月开始（我会显示他们的月份的名称）。

EDIT 2: I want the slider to be dynamic. If the user slides to the previous or next months, or clicks the buttons, I want it to load the days of the previous/next months and show those. Also, say we're at the 26th of a month, the slider would have to show something like 10-31 of this month AND 1-10 of the next month. I suppose I'll also have to change my month indication (not like in the image here) so a user knows when another month starts (I'll show them the name of the month).

这里是一张图片（不介意一天的数字被搞砸了，我在Photoshop中正确地做了这个事情会修复那个断层）：
< img src =https://i.stack.imgur.com/1SqpX.jpgalt =日栏，不介意数字>

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):

一直在看jQuery UI滑块。我想我必须从数据库或使用PHP获取天数吗？我想 cal_days_in_month 功能可以派上用场。当用户向左或向右单击箭头或幻灯片时，我不想刷新页面。我应该和ajax电话一起去吗？我不太确定如何实现这一点，老实说。数字也是指向此条下方显示的日历类型视图的链接。
我可以使用CI Calendar类吗？或者它是更成熟的谷歌日历类型的日历？我认为这个屏幕录像可能是有用吗？

I've been looking at the jQuery UI sliders. I suppose I'd have to grab the number of days from a database or by using PHP? I guess the cal_days_in_month function could come in handy here. When the user clicks on the arrows or slides left or right, I don't want the page to refresh. Should I go with ajax calls there? I'm not quite sure how to implement this, to be honest. The numbers are also links to a calendar type of view which shows underneath this bar. Could I possibly use the CI Calendar class for this? Or is it more for full-fledged google calendar-type of calendars? I thought this screencast could perhaps be useful?

如果可能，有人可以提供一些见解如何开始工作，以及哪些插件/我可能使用？我不知道从哪里开始，老实说。我相信我可以工作这出了某种方式，但我想这将是很高兴得到一个kickstart通过一些帮助在这里。我看到的主要问题是滑块/下一个/上一件事，并在上一个/下个月的日子加载。

If possible, could someone please provide some insights on how to start working on this and which plugins/etc I could perhaps use? I'm not sure where to start, to be honest. I'm sure I can work this out somehow, but I guess it'd be nice to get a kickstart by means of some help here. The main problem I'm seeing is the slider/next/previous thing and loading in the previous/next month's days.

提前感谢。

编辑：我意识到一些人可能会说/你只是使用你的技能，而不是尝试你要问我们的事情！嗯，这是因为我真的想在这个项目期间学习东西。记住，我不是在这里要求代码行，我只是要求一些洞察，从哪里开始和使用什么东西;也许很少的片段，可以帮助我出去。非常感谢。

I realise some people might say/think 'OMG, why don't you just use the skills you have instead of trying something you have to ask us about!'. Well, this is because I actually want to learn something while doing this project. Keep in mind, I'm not asking for lines of code here, I'm just asking for some insight on where to start and what stuff to use; perhaps little snippets that can help me out. Thanks.

更新：

我有一个非常基本的day bar仍然没有滑块，上一个和下一个按钮也没有工作，但至少它动态填充它。它显示当前一天之前的5天，然后这个月直到结束。剩下的任何留下来填充下个月的日子。相当基本。但是，我有几个问题！

I got a very basic 'day bar' working. Still without a slider, nor do the previous and next buttons work, but hey.. at least it fills it in dynamically. It shows the 5 days previous to the current day, then this month till the end. Whatever is left to fill in gets filled with days of the next month. Quite basic. However, I do have a couple of questions!

由于昨天有人告诉我，我是通过做一些东西来打破设计模式，我对我的工作方式非常矛盾我真的想从CodeIgniter pro的反馈。为了填充'日栏'，我创建了一个帮助程序与几种方法。 （一种方法来动态填充你在图片中看到的月事件，另一个方法init（）加载天的列表，就像我以前解释的）。我在控制器中加载了这个助手，我现在使用我的视图中的方法：

Since someone told me yesterday that I was breaking design patterns by doing some stuff the way I was doing it, I'm extremely paranoid about the way I'm working now and I would really like some feedback from 'CodeIgniter pro's'. To fill in the 'day bar', I created a helper with a couple of methods. (One method to dynamically fill that 'month year' thing you see in the picture, another method init() which loads the list of the days, like I explained before). I loaded this helper in the controller and I'm now using the methods in my view:

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

然后，助手在我的视图中回显我的日期值。这是好还是坏？当我想开始为这个代码编写代码时，我一直在思考错误的方式。我想在我的控制器中有一个函数，然后从视图中调用它，但我读到，我不应该这样做。 。我不得不扭转我的逻辑。我发现很难围绕我的事实，我必须这样做通过发送数组数据到我的视图（从我的控制器），所以我选择创建帮助器。好？坏？任何提示，资源我应该阅读，截图我应该看？非常感谢。

The helper then echoes my day values in my view. Is this good or bad practice? I kept thinking the wrong way when I wanted to start writing the code for this.. I wanted to have a function somewhere in my controller and then call it from the view, but I read that I shouldn't be doing it like that.. that I had to reverse my logic. I find it hard to wrap my head around the fact that I have to do this by sending arrays of data to my view (from my controller), so I opted for creating the helper. Good? Bad? Any tips, resources I should read, screencasts I should watch? Thanks a bunch.

推荐答案

如果你希望系统是动态的，关键是使数据传输很短。所以使用Ajax，正如icchanobot所说，发送一个特定月份的请求。使用get：

The key thing if you want your system to be dynamic is to make the data transmission short. So using Ajax, as icchanobot says, send the request for a specific month. Use get:

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

或甚至：

'some_controller?next' // or previous

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

The controller has to get data for the correct month, but not send back the whole month - only the data needed for your display, in a format as tight as possible. You could query how many events run on which days of that month:

选择日期，计数（事件）
FROM event_table
WHERE DATE BETWEEN' yyyy-mm-01'AND'yyyy-mm-31'
GROUP BY day
ORDER BY day;

SELECT day, count(event) FROM event_table WHERE DATE BETWEEN 'yyyy-mm-01' AND 'yyyy-mm-31' GROUP BY day ORDER BY day;

查询需要适应您的数据结构 - 使用一个函数来从一个完整的日期获取一天，也许使用索引，以便查询快速返回数据。

query needs adapting to your data structure - use a function to get the day from a complete date, and maybe use indexes so that the query returns the data fast.

然后控制器返回一个字符串作为短您可以按照一天的顺序排列相关数据：

Then the controller returns a string as short as you can make it, of the relevant data sorted in day order:

1 = 3,15 = 1,29 = 2

1=3,15=1,29=2

这意味着1st = 3个事件，15th = 1个事件，29 = 2个事件。如果你不想要的事件数，那么1,15,2就够了。空白天不会传输。

That would mean "1st=3 events, 15th=1 event, 29=2 events". If you don't want the number of events then "1,15,2" is enough. Empty days aren't transmitted.

数据由您的网页上的ajax事件处理程序接收，您使用split解析它，然后使用

the data is received by an ajax event handler on your web page and you parse it by using split, then populate the slider by using a loop.

在一个非常动态的应用程序中，最大的阻力是，如果它反复要求下个月和下一个月减慢。
一些技巧：

Your biggest drag, in a very dynamic application, is if it slows down when you repeatedly ask for the next month and the next. A few tricks:

• 在等待数据时更新显示;您发送您的查询，并且正在处理它时，您可以滑动月份进入视图，正确的天数，看起来禁用，以便用户立即知道他们将获得他们的数据，并且正在进行中。然后当数据到来时，填充和突出显示。


• 避免处理用户不再需要的信息。如果有人点击下一步三次，他们想要的数据为7月，而不是6月和7月。


• 缓存您已经请求的数据，除非您希望系统为日历的最新状态动态地返回到服务器。您要求提供5月和6月的数据，但不显示;当用户点击返回时，不要再次请求该数据。

祝你好运！

这篇关于Web应用程序 - 滑块显示几个月的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！