I want to implement a jump to functionality. It is basically like a breadcrums but not exactly. It is a dropdown and can have left and right button. Please see my code below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="btn-group" role="group" aria-label="..."> <a href="previousItemIfHas" class="btn btn-default">←</a> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Jump to <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Assignment1</a></li> <li><a href="#">Quiz2</a></li> <li><a href="#">Quiz4</a></li> <li><a href="#">Assignment2</a></li> </ul> </div> <a href="nextItemIfHas" class="btn btn-default">→</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>Controller
$course = Course::with([ 'assignments' => $undeleted, 'quizzes' => $undeleted, 'add_links' => $undeleted ])->findOrFail($course_id); $course_items = collect($course->assignments); $course_items = $course_items->merge(collect($course->quizzes)); $course_items = $course_items->merge(collect($course->add_links)); $course_items = $course_items->sortBy('item_number'); Result want:
If the $course loops, it can list the items sort by item_number. If you are click the first item, then there should be no left arrow, same with the last item, if you click the last item, there should be no right arrow. The list of items are listed in the dropdown I've created.
Problem I don't have any idea how can I add a condition if the item is the first item so I can remove the left button, and same with the last item.
Note: I'm using laravel 5.1
2 Answers
Answers 1
i think you mean in the template:
you can use
@foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach inside the "foreach" loop you has the variable loop
@foreach ($users as $user) @if ($user == reset($users )) This is the first iteration. @endif @if ($user == end($users)) This is the last iteration. @endif <p>This is user {{ $user->id }}</p> @endforeach so you can see if first or last item
more:
Answers 2
Hello Try this
it will start with no prev button, when you click on any thing has prev, prev will be shown, also when you click on anything has no nex the next will be hidden.. and so on..
give id="next" to next and id="prev" to prev buttons
Please run this snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="btn-group" role="group" aria-label="..."> <a href="previousItemIfHas" class="btn btn-default" id="prev">←</a> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Jump to <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Assignment1</a></li> <li><a href="#">Quiz2</a></li> <li><a href="#">Quiz4</a></li> <li><a href="#">Assignment2</a></li> </ul> </div> <a href="nextItemIfHas" class="btn btn-default" id="next">→</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script> $('#prev').hide(); $(".dropdown-menu li").click(function(){ if($(this).next('li').length <= 0) { $('#next').hide(); } else { $('#next').show(); } if($(this).prev('li').length <= 0) { $('#prev').hide(); } else { $('#prev').show(); } }); </script>
0 comments:
Post a Comment