我知道这个问题已经有几年了,但是我找不到与我的问题相关的答案。
我在此WP页面的中间看到了一个预订小部件插件: http://mattarahkka.com/the-lodge/#
选择日期后,页面将滚动到顶部。日期选择器保持打开状态,并且日期保持选中状态。但是为什么页面跳到顶部?
小部件php代码:
// include custom jQuery
functieon csf_booking_widget_custom_jquery() {
/* REGISTER JS FOR PLUGIN */
wp_register_script('datepicker',plugins_url().'/csf-booking-widget/js/datepicker_2.js');
/* REGISTER CSS FOR PLUGIN */
wp_register_style('jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
wp_register_style('csf-happy-booking-widget',plugins_url().'/csf-booking-widget/css/happy-booking-widget.css');
/* CALL ALL JS FOR PLUGIN */
wp_enqueue_script('jXquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_script('datepicker');
/* CALL ALL CSS FOR PLUGIN */
wp_enqueue_style('jquery-ui');
wp_enqueue_style('csf-happy-booking-widget');
}
function insert_booking_widget()
{
$content = "<div class=\"bookingWidget\">";
$content .= "<h2>Book Now</h2>";
$content .= "<form method=\"get\" action=\"https://mattarahkka.happybooking.io/\">";
$content .= "<table class=\"sideTable\"><tbody><tr>";
$content .= "<span class=\"date-title\" style=\"padding: 0px\">Check-in</span>";
$content .= "<input id=\"from\" name=\"from\" class=\"checkInsDate\" type=\"text\">";
$content .= "</tr><tr>";
$content .= "<span class=\"date-title\" style=\"padding: 0px\">Check-out</span>";
$content .= "<input id=\"to\" name=\"to\" class=\"checkInsDate\" type=\"text\">";
$content .= "</tr></tbody></table>";
$content .= "<div class=\"buttonHolder\">";
$content .= "<input class=\"btn\" value=\"Search available lodgings\" type=\"submit\">";
$content .= "</div>";
$content .= "<input type=\"hidden\" name=\"lang\" value=\"English\"/>";
$content .= "</form></div>";
return $content;
}
add_shortcode('happy-booking-widget','insert_booking_widget');
add_action('wp_enqueue_scripts', 'csf_booking_widget_custom_jquery');
Js文件(datepicker_2):
jQuery(function(){
var dates = jQuery("#from, #to").datepicker({
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
weekHeader: "W.",
monthNames: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = jQuery(this).data("datepicker"),
date = jQuery.datepicker.parseDate(
instance.settings.dateFormat ||
jQuery.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not(this).datepicker("option", option, date);
autoclose: true;
}
});
});