-
Notifications
You must be signed in to change notification settings - Fork 46
/
Copy pathjquery-quickstart-snippet.html
147 lines (140 loc) · 6.82 KB
/
jquery-quickstart-snippet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
title: jQuery Quickstart Code Snippet Grabber| Developer Tools
layout: post
---
<html>
<head>
<!-- Meta tags common for website -->
{% include common-meta %}
<title>{{ page.title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="This is easy to grab jQuery code snippet for doing a quickstart of your project. Helpful for occasional jQuery users to start using it quickly." />
<meta name="keywords" content="online,jquery,code,snippet,quickstart,web,opensource" />
<!-- CSS for the site theme -->
{% include theme-css %}
<!-- Annoying IE fixes -->
{% include ie-fixes %}
</head>
<body class="hold-transition skin-green sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<!-- header tag from theme -->
{% include theme-header %}
<!-- Sidebar for the whole website -->
{% include theme-sidebar %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h1 class="box-title">jQuery Quickstart Code Snippet Grabber</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="title">Simple jQuery Document Ready Quickstart Code Snippet</label>
<textarea class="form-control" rows="7" id="inputText"></textarea>
</div>
</form>
</div>
</div>
<div class="box box-success">
<div class="box-header with-border">
<h1 class="box-title">jQuery Plugin Quickstart Code Snippet</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="title">Blank Plugin Quick start code snippet</label>
<textarea class="form-control" rows="7" id="pluginSnippet"></textarea>
</div>
<div class="form-group">
<label for="title">Plugin name</label>
<input class="form-control" type="text" value="helloWorld" id="pluginName"/>
</div>
</form>
</div>
</div>
</section>
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">About jQuery Quickstart Code Snippet</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>This is a free online page to grab a jQuery quickstart code. It is just for copy and paste in a javascript or HTML file where you want to add jQuery library.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why is this needed?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>The purpose of this page is to provide a quickstart snippet for irregular jQuery developers. It is usually difficult to remember the url and starting syntax. I use it a lot of times to develop more tools for this project itself.
</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Where Can I run it?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>You can run it in a online javascript editor like jsfiddle and other free <a href="http://www.fromdev.com/2015/01/websites-to-test-javascript-code.html">Javascript editors</a>. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">How to use jQuery Plugin snippet?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>This snippet can be used to write a jquery plugin from scratch. Follow below steps to get this working.</p>
<ul>
<li>Enter the name of plugin function in plugin name text box. This will automatically change the code snippet.</li>
<li>Copy the code snippet and save it in a .js file.</li>
<li>Include this .js file in your HTML page after jQuery include. </li>
</ul>
</div>
<!-- /.box-body -->
</div>
</section>
{% include addthis %}
</div>
<!-- /.content-wrapper -->
{% include theme-footer %}
</div>
<!-- ./wrapper -->
{% include theme-bottom-js %}
</body>
<script src="plugins/selectOnFocus/jquery.selectOnFocus.min.js"></script>
<script>
var updatePluginSnippet = function() {
var pluginName = $("#pluginName").val();
$("#pluginSnippet").val('(function($) {\n $.fn.' + pluginName + ' = function(options) {\n \/\/start here\n \n }\n}(jQuery));\n');
};
$(document).ready(function() {
$("#inputText").val('<script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"><\/script>\n<script>\n $(document).ready(function() {\n \n });\n<\/script>');
$("#inputText").selectOnFocus();
updatePluginSnippet();
$('#pluginName').on('input', function(e) {
updatePluginSnippet();
});
$("#pluginSnippet").selectOnFocus();
$("#pluginName").selectOnFocus();
$('#generators-category').addClass('active');
$('.markdown-body').attr('style', 'max-width:100%;');
});
</script>
</html>