It is turn for us to add jQuery slideDown and sliedUp effects into Filter panel of websites that generated by PHP Report Maker. This is necessary since the effects will make your web application become more professional for your users.
Please note that this customization below is related to the customization I made and wrote it in the article Customizing Filter Panel in Websites that Generated by PHP Report Maker 6.0.0. So, make sure you have implemented the customization in that article first, before doing customization below.
[hidepost]
-
Open your \Script\rpt-extfilter.php file, and find this code:
<a href="javascript:<!--##=sFormName##-->.ToggleSearchPanel();" style="text-decoration: none;" id="searchPanelAnchor"><img id="<!--##=sFormName##-->_SearchImage" src="<!--##=ew_FolderPath("_images")##-->/collapse.gif" width="9" height="9" alt="" style="border: 0;" /></a><span class="phpreportmaker"> <!--##@Filters##--></span> <div id="<!--##=sFormName##-->_SearchPanel" class="msSearchPanel">
then replace it with the following code:
<?php // Begin of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, December 3, 2012 if ((MSR_SEARCH_PANEL_COLLAPSED == FALSE || $<!--##=sPageObj##-->->FilterApplied) || $<!--##=sPageObj##-->->Filter == "0=101") { $sButtonImage = "<!--##=ew_FolderPath("_images")##-->/collapse.gif"; $sDivDisplay = ""; ?> <script> $(document).ready(function() { $("a#searchPanelAnchor").html('<img src="phprptimages/collapse.gif" alt="" width="9" height="9" border="0">'); $('div#ReportSearchPanel').show(); }); </script> <?php } else { $sButtonImage = "<!--##=ew_FolderPath("_images")##-->/expand.gif"; $sDivDisplay = " style=\"display: none;\""; ?> <script> $(document).ready(function() { $("a#searchPanelAnchor").html('<img src="phprptimages/expand.gif" alt="" width="9" height="9" border="0">'); $('div#ReportSearchPanel').hide(); }); </script> <?php } ?> <a href="javascript:ewrpt_ToggleFilterPanel();" style="text-decoration: none;" id="searchPanelAnchor"><img id="ewrptToggleFilterImg" src="<?php echo $sButtonImage ?>" alt="" width="9" height="9" border="0"></a><span class="phpreportmaker"> <!--##@Filters##--></span><br /> <div id="ReportSearchPanel" <?php echo $sDivDisplay ?> class="msSearchPanel"> <?php // End of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, December 3, 2012 ?>
-
Open your PHP Report Maker project (.prp) file using PHP Report Maker, and then go to Code (Server Events/Client Scripts) tab -> Client Scripts -> Table-Specific -> Report Page -> Client Scripts, and then insert the following code into the right pane (code editor):
// Begin of modification jQuery for slideDown and slideUp effect in search panel, by Masino Sinaga, May 14, 2012 $(document).ready(function() { // trigger the function when clicking on an assigned element $('a#searchPanelAnchor').click(function () { if ($('div#ReportSearchPanel').is(':hidden')) { $('div#ReportSearchPanel').slideDown(300, function () { $("a#searchPanelAnchor").html('<img src="phprptimages/collapse.gif" alt="" width="9" height="9" border="0">') }); } else { $('div#ReportSearchPanel').slideUp(300, function () { $("a#searchPanelAnchor").html('<img src="phprptimages/expand.gif" alt="" width="9" height="9" border="0">') }); } }); }); // End of modification jQuery for slideDown and slideUp effect in search panel, by Masino Sinaga, May 14, 2012
Please note that this step must be done for that Server Events that belong to the reports which you want to implement the customization.
- Still in the PHP Report Maker application, now go to Tools -> Advanced Settings menu, and make sure you have already given checked mark to the following Local YUI/jQuery files setting item, afterwards, click on OK button to save the changes.
- Finally, re-generate your script files using PHP Report Maker as always.
[/hidepost]
Leave a Reply
You must be logged in to post a comment.