我目前正在开发一个Bootstrap网站，并且在整合jQuery Sortable Grid时遇到一些麻烦。我已将我的源代码包含在文件clients.html和插件中，我试图包含在文件插件中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="assets/ico/favicon.png" rel="shortcut icon">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/alertify.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link href="favicon.ico" rel="favicon icon">
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrap">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar visible-phone" data-target=".nav-collapse" data-toggle="collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></a> <a class="btn btn-navbar slide_menu_left visible-tablet"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></a>
<div class="top-menu visible-desktop">
<ul class="pull-right">
<li>
<a href="login.html"><i class="icon-off"></i> Logout</a>
</li>
</ul>
<ul class="pull-right">
<li>
<a data-notification="2" href="#" id="messages"><i class="icon-envelope"></i> Messages</a>
</li>
<li>
<a data-notification="3" href="#" id="notifications"><i class="icon-globe"></i> Notifications</a>
</li>
</ul>
</div>
<div class="top-menu visible-phone visible-tablet">
<ul class="pull-right">
<li>
<a href="#" title="link to View all Messages page, no popover in phone view or tablet"><i class="icon-envelope"></i></a>
</li>
<li>
<a href="#" title="link to View all Notifications page, no popover in phone view or tablet"><i class="icon-globe"></i></a>
</li>
<li>
<a href="login.html"><i class="icon-off"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- Side menu -->
<div class="sidebar-nav nav-collapse collapse">
<div class="user_side clearfix">
<img alt="Plush Management" src="assets/img/contact-icon.png">
<h5>User</h5><a href="#"><i class="icon-cog"></i> Settings</a>
</div>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle active b_F79999" href="index.html"><i class="icon-dashboard"></i> <span>Dashboard</span></a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle b_F5C294" href="clients.html"><em class="icon-user"></em> <span>Clients</span></a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle b_F6F1A2" href="tasks.html"><i class="icon-tasks"></i> <span>Tasks</span></a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle b_C1F8A9" href="analytics.html"><i class="icon-bar-chart"></i> <span>Analytics</span></a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle b_9FDDF6" href="tickets.html"><i class="icon-bullhorn"></i> <span>Support Tickets</span></a>
</div>
</div>
</div>
</div><!-- /Side menu -->
<!-- Main window -->
<div class="main_container" id="dashboard_page">
<div class="row-fluid"></div>
<div class="widget widget-padding">
<div class="widget-header">
<i class="icon-bar-chart"></i>
<h5>Monthly Summary</h5>
</div><!-- ===========================================================================================-->
<div class="widget widget-padding">
<div class="overview_boxes">
<div class="box_row clearfix">
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-eye-open" style="color:#E28271"></i>
<p style="color:#E28271">+85%</p>
</div>
<div>
<input class="knob" data-height="120" data-readonly="true" data-thickness=".15" data-width="120" value="85">
</div>
<p><strong>+530</strong>Pickups/Dropoffs</p></a>
</div>
</div><!-- ===========================================================================================-->
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-user" style="color:#98E5EA"></i>
<p style="color:#98E5EA">+13%</p>
</div>
<div>
<input class="knob" data-height="120" data-thickness=".15" data-width="120" value="13">
</div>
<p><strong>57</strong>Receiving</p></a>
</div>
</div><!-- ===========================================================================================-->
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-user" style="color:#98E5EA"></i>
<p style="color:#98E5EA">+13%</p>
</div>
<div>
<input class="knob" data-height="120" data-thickness=".15" data-width="120" value="13">
</div>
<p><strong>57</strong>Receiving</p></a>
</div>
</div><!-- ===========================================================================================-->
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-bullhorn" style="color:#AEEA98"></i>
<p style="color:#AEEA98">+15%</p>
</div>
<div>
<input class="knob" data-displayinput="false" data-height="120" data-readonly="true" data-thickness=".15" data-width="120" value="15">
</div>
<p><strong>35/235</strong>Deliveries</p></a>
</div>
</div><!-- ===========================================================================================-->
<div class="box_row clearfix">
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-thumbs-up" style="color:#98AEEA"></i>
<p style="color:#98AEEA">+55%</p>
</div>
<div>
<input class="knob" data-displayinput="false" data-height="120" data-readonly="true" data-thickness=".15" data-width="120" value="55">
</div>
<p><strong>$14,230</strong>Full Installs</p></a>
</div>
</div>
</div><!-- ===========================================================================================-->
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-credit-card" style="color:#EA98AB"></i>
<p style="color:#EA98AB">+35%</p>
</div>
<div>
<input class="knob" data-displayinput="false" data-height="120" data-readonly="true" data-thickness=".15" data-width="120" value="35">
</div>
<p><strong>152</strong>New Clients</p></a>
</div>
</div><!-- ===========================================================================================-->
<div class="widget-tasks-statistics">
<div class="userstats clearfix" style="margin-top: 25px;">
<a data-target="#example_modal2" data-toggle="modal" href="javascript:void(0)">
<div class="white">
<i class="icon-phone" style="color:#F6BF99"></i>
<p style="color:#F6BF99">+97%</p>
</div>
<div>
<input class="knob" data-displayinput="false" data-height="120" data-readonly="true" data-thickness=".15" data-width="120" value="97">
</div>
<p><strong>592</strong>Consults</p></a>
</div>
</div>
</div><!-- ===========================================================================================-->
</div>
</div>
</div><!-- ===========================================================================================-->
<div class="widget widget-padding">
<div class="widget-header">
<i class="icon-list-alt"></i>
<h5>Client Management</h5>
</div>
<div class="row-fluid">
<div class="widget widget-padding span12">
<div class="row-fluid">
<div class="row-fluid">
<div class="widget-body">
<div class="widget-forms clearfix">
<form class="form-horizontal">
<div class="control-group">
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">Quick Search <em class="icon-caret-down"></em></a> <input class="span7" data-items="4" data-provide="typeahead" data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]" placeholder="Type here for auto complete…" style="margin: 0 auto;" type="text">
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Customers</a>
</li>
</ul>
</div>
<div class="controls"></div>
</div>
<div class="row-fluid" style="margin-bottom:15px;">
<a class="btn btn-small btn-box bubble bubble-danger span2 tips" href="new_client.html"><em class="icon-user"></em><span>Add New Client</span></a> <a class="btn btn-small btn-box span2" href="#"><em class="icon-map-marker"></em><span>Delivery Requests</span></a> <a class="btn btn-small btn-box bubble bubble-info span2 tips" href="#"><em class="icon-thumbs-up"></em><span>Whiteboard</span></a> <a class="btn btn-small btn-box bubble bubble-info span2 tips" href="#"><em class="icon-twitter"></em><span>Invoice Manager</span></a> <a class="btn btn-small btn-box bubble bubble-warning span2 tips" href="#"><em class="icon-globe"></em><span>Region</span></a>
</div>
</form>
</div>
</div><!-- /Main window -->
</div><!--/.fluid-container-->
</div>
</div>
</div>
</div><!-- ===========================================================================================-->
<div class="row-fluid"></div>
<div class="row-fluid">
<div class="widget widget-padding span12">
<div class="widget-header">
<i class="icon-group"></i>
<h5>Delivery Requests</h5>
<div class="widget-buttons">
<a class="tip collapse" data-collapsed="false" data-title="Collapse" href="#"><i class="icon-chevron-up"></i></a>
</div>
</div>
<div class="widget-body">
<table class="table table-striped table-bordered dataTable" id="users">
<thead>
<tr>
<th>Request Date</th>
<th>Client</th>
<th>Item</th>
<th>Images</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amie</td>
<td>Admin</td>
<td>20-05-2012</td>
<td><span class="label label-success">Active</span></td>
<td>
<div class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#"><i class="icon-envelope"></i> Email</a>
</li>
<li>
<a href="#"><i class="icon-edit"></i> Edit</a>
</li>
<li>
<a href="#"><i class="icon-trash"></i> Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Katy</td>
<td>User</td>
<td>12-08-2012</td>
<td><span class="label label-success">Active</span></td>
<td>
<div class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#"><i class="icon-envelope"></i> Email</a>
</li>
<li>
<a href="#"><i class="icon-edit"></i> Edit</a>
</li>
<li>
<a href="#"><i class="icon-trash"></i> Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Serena</td>
<td>User</td>
<td>05-01-2013</td>
<td><span class="label label-success">Active</span></td>
<td>
<div class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#"><i class="icon-envelope"></i> Email</a>
</li>
<li>
<a href="#"><i class="icon-edit"></i> Edit</a>
</li>
<li>
<a href="#"><i class="icon-trash"></i> Delete</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- /widget-body -->
</div><!-- /widget -->
</div>
<div class="row-fluid">
<div class="widget widget-padding span12">
<div class="widget-header">
<i class="icon-group"></i>
<h5>Invoice Manager</h5>
<div class="widget-buttons">
<a class="tip collapse" data-collapsed="false" data-title="Collapse" href="#"><i class="icon-chevron-up"></i></a>
</div>
</div>
<div class="widget-body">
<table class="table table-striped table-bordered dataTable" id="users">
<thead>
<tr>
<th>Invoice #</th>
<th>Invoice Date</th>
<th>Client</th>
<th>Customer</th>
<th>Invoice Type</th>
<th>Sub-Total</th>
<th>Paid</th>
<th>Balance Due</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amie</td>
<td>Admin</td>
<td>20-05-2012</td>
<td><span class="label label-success">Active</span></td>
<td>
<div class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#"><i class="icon-envelope"></i> Email</a>
</li>
<li>
<a href="#"><i class="icon-edit"></i> Edit</a>
</li>
<li>
<a href="#"><i class="icon-trash"></i> Delete</a>
</li>
</ul>
</div>
</td>
<td>Amie</td>
<td>Amie</td>
<td>Amie</td>
<td>Amie</td>
</tr>
</tbody>
</table>
</div><!-- /widget-body -->
</div>
</div><!-- /widget -->
</div><!-- /widget-body -->
</div><!-- /widget -->
<!-- wrap ends-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js" type="text/javascript">
</script>
<script src="assets/js/bootstrap.js" type="text/javascript">
</script>
<script src='assets/js/sparkline.js' type="text/javascript">
</script>
<script src='assets/js/morris.min.js' type="text/javascript">
</script>
<script src="assets/js/jquery.dataTables.min.js" type="text/javascript">
</script>
<script src="assets/js/jquery.masonry.min.js" type="text/javascript">
</script>
<script src="assets/js/jquery.imagesloaded.min.js" type="text/javascript">
</script>
<script src="assets/js/jquery.facybox.js" type="text/javascript">
</script>
<script src="assets/js/jquery.alertify.min.js" type="text/javascript">
</script>
<script src="assets/js/jquery.knob.js" type="text/javascript">
</script>
<script src='assets/js/fullcalendar.min.js' type='text/javascript'>
</script>
<script src='assets/js/jquery.gritter.min.js' type='text/javascript'>
</script>
<script src="assets/js/realm.js" type="text/javascript">
</script>
<script src="assets/js/select2.min.js" type="text/javascript">
</script>
<script src="assets/js/bootstrap-colorpicker.js" type="text/javascript">
</script>
<script src="assets/js/bootstrap-datepicker.js" type="text/javascript">
</script>
<script src="assets/js/bootstrap-timepicker.js" type="text/javascript">
</script>
<script src="assets/js/jquery.validate.min.js" type="text/javascript">
</script>
<script src="assets/js/jquery.bootstrap.wizard.min.js" type="text/javascript">
</script>
<script src="assets/js/tiny.editor.packed.js" type="text/javascript">
</script>
</body>
</html>
此外，可以在此处找到Jquery插件：https://github.com/ksylvest/jquery-gridly
答案 0 :(得分：0)
看起来你需要在jQuery之后加载Gridly库，你现在正在加载它。如果Gridly依赖于任何jQuery依赖项，那么如果之前加载它可能无法工作。
您需要移动此行（从标题中）：
#!/usr/bin/env python
#GenEpub.py - Generates an .epub file from the data provided.
#Ideally with no errors or warnings from epubcheck (needs to be implemented, maybe with the Python wrapper).
import os
import json
import zipfile
with open('metadata.json') as json_file:
data = json.load(json_file)
#The ePub standard requires deflated compression and a compression order.
zf = zipfile.ZipFile(data["fileName"] + '.epub', mode='w', compression=zipfile.ZIP_STORED)
zf.write(data["fileName"] + '/mimetype')
for dirname, subdirs, files in os.walk(data["fileName"] + '/META-INF'):
zf.write(dirname)
for filename in files:
zf.write(os.path.join(dirname, filename))
for dirname, subdirs, files in os.walk(data["fileName"] + '/EBOOK'):
zf.write(dirname)
for filename in files:
zf.write(os.path.join(dirname, filename))
#zipfile has a built-in validator for debugging
if zipfile.is_zipfile(zf) is True:
print("ZIP file is valid.")
#Extra debugging information
#print(getinfo.compress_type(zf))
#print(getinfo.compress_size(zf))
#print(getinfo.file_size(zf))
zf.close()
在此行下（在页脚中）：
{
"comment1": "Metadata.json - Insert the e-book's metadata here. WIP",
"comment2": "Technical metadata - This is the where the cover image is specified. Recommended to use ePub V2.0.1 over 3.0 for epubVersion and Reflowable rather than Fixed for textPresentation (unless doing a project that requires a specific layout). mobiCover and generateKindle are currently unused but added for futureproofing.",
"epubCover": "cover.jpg",
"mobiCover": "cover.jpg",
"fileName": "IdealogicalEcho",
"epubVersion": "2.0.1",
"textPresentation": "Reflowable",
"generateKindle": "no",
"comment3": "Book metadata - Information about the e-book itself. Language is specified with ISO 639-1. Rights can be worldwide, country specific or under a permissable license such as Creative-Commons SA",
"title": "Google's Idealogical Echochamber",
"creator": "James Damore",
"subject": "Academic",
"publisher": "Hal Motley",
"ISBN": "-",
"language": "en",
"rights": "Creative-Commons SA",
"comment4": "This is the page order that the e-book has. The first number before the colon is the page order, the second is the indentation, third is the page name and fourth is file itself.",
"pages": [
{
"1": [0, "Cover", "bookcover.xhtml"],
"2": [0, "Title", "title.xhtml"],
"3": [0, "Indicia", "indicia.xhtml"],
"4": [0, "License", "license.xhtml"],
"5": [0, "Contents", "toc.xhtml"],
"6": [0, "Foreword", "foreword.xhtml"],
"7": [0, "Article", "article.xhtml"]
}
]
}
完成后，您的Gridly库应该可以正常工作。